+

5 Things you need to know about images**Images for the web

+1. PNG is the best*

*most modern, robust, and web-friendly format.

PNG: Portable Network Graphic

Most advanced compression algorithm

Combines the best features of GIF and JPEG

+2. GIF and JPEG are very different

GIF: Graphics Interchange Format Limited to 256

colors Great for shapes,

diagrams, and charts

Small files size, but crisp edges, uses Run-length encoding

JPEG (.jpg): Joint Photographic Expert Group millions of colors

(photo-realistic) Still the standard

for digital photography

Compression leads to loss of quality.

+3. Actual Image Size vs. Displayed Size

The stored image file has an actual size Width X Height. people.jpg might be 4000px by 3000px and 12MB

HTML and CSS can change the displayed size <img width=“400” src=“people.jpg” alt=“funny”>

people.jpg could be as small as 0.2MB if it were resized to 400px wide

File size matters because of mobile web browsing.

+4. Scaling-up small images leads to loss of quality

A 100px wide image will look terrible if it is scale up. See example

PNG, GIF, and JPEG cannot be scaled up without loss of quality Keep the original (large) image just in case you need a

larger version in the future.

SVG: Scalable Vector Graphic is the 4th format widely used on the web. Images are stored as geometric functions instead of as pixels.

+5. Aspect ratio is really important for photos

If you scale an image (especially a photograph), be sure to scale the width and height proportionally.

Common aspect ratios: 4:3 old-fashioned computer monitors 3:2 old-fashioned 33mm film 1.618 : 1.000

(8:5) golden ratio, common for artwork 16:9 modern wide-screen photos