Image optimizationFor the Web

Guilherme Zühlke O’Connorhttp://www.z-oc.com

Optimise what?

• Data transfer (file size)

• HTTP requests

• File maintenance

• File References in Code

File size

• Colour system

• Number of colours effectively used

• Image format

• Image size

File Size by Palette(png)500x20pxGradient

Save As - PNG - 8247 bytes (8Kb)

Save for Web - PNG 24 - 5471 bytes (5Kb)

Save for Web - PNG 8 - 128c - 4478 bytes (4Kb)

Save for Web - PNG 8 - 20c - 1259 bytes (1.2Kb)

Save for Web - PNG 8 - 16c - 716 bytes

Save for Web - PNG 8 - 8c - 507 bytes

File Size by Palette

(gif)500x20pxGradient

Save for Web - GIF - 128c - 5260 bytes (5Kb)

Save for Web - GIF - 20c - 1772 bytes (1.7Kb)

Save for Web - GIF - 16c - 1071 bytes

Save for Web - GIF - 8c - 765 bytes

File Size by compression

(jpg)500x20pxGradient

Save As - JPG - Q10/12 - 20686 bytes (20Kb)

Save for Web - JPG - 100% - 2016 bytes (2Kb)

Save for Web - JPG - 60% - 732 bytes

Save for Web - JPG - 30% - 571 bytes

Save for Web - JPG - 5% - 490 bytes

Jpeg format

• RGB or Grayscale

• There is no lossless Jpeg

• Good for gradients and loose edges

• Poor for simple images

• No precise control over the colour palette

• Sacrifices chrominance, optim. luminance

Jpeg Vs. Png

Save for WebJpeg 15%

200x300px2121 bytes

Save for WebPNG8 - 8c100x160px997 bytes

Save for WebJpeg - 15%100x160px5577 bytes

http://flickr.com/photos/annazuhlke/3254769257/

PNG format

• 24 or up to 8 bits (RGB, GS or Indexed)

• Lossless compression

• Colorspace Reduction != Compression

• Poor compression for complex gradient patterns

• Alpha or 1-bit transparency (Probs in IE)

Photo rendering

Save for WebPNG 8 - 128c

200x300px22,170 bytes

Save for WebJPEG - 30%200x300px7,869 bytes

Save for WebPNG 24

200x300px95,130 bytes

http://flickr.com/photos/annazuhlke/3252543983/

GIF format

• Up to 8 bits, indexed colour (up to 256c)

• Lossless compression

• 1 bit transparency

• Generally poorer compression than PNG

Photo rendering

Save for WebPNG 8 - 128c

200x300px22,170 bytes

Save for WebGIF - 128c200x300px

28,930 bytes

http://flickr.com/photos/annazuhlke/3252543983/

Colour Sytems

• RGB

• Grayscale

• Indexed Colour

RGB

• Each pixel is represented by 24 bits

• Three channels (R,G & B)

• 8 bits each

Grayscale

• Each shade of gray is represented by 8 bits

• 256 shades of gray overal

• 1/3 of the basic file size for a non-colour image, compared to RGB

Indexed Colour

• Each pixel is represented by up to 8 bits

• A colour palette is created

• Each colour in the palette is referenced by the (up to) 8 bits number

Cool!Can I create my colour palettes in photoshop

beforehand so I have precise colours?

Yes, you can!

Image SizesSize of compressed image files don’t increase linearly to

the number of pixels

File Size by pixel qty

(png)PNG-8

8 colours

Save for Web - 500x20px - 507 bytes

Save for Web - 300x20px - 392 bytes

Save for Web - 100x20px - 248 bytes

Save for Web - 10x20px - 190 bytes

Save for Web - 1x20px - 162 bytes

The less the merrier?Consider the rendering effort of tiling the image on the

browser.

SpritesMultiple page assets in a single image

Having a single file...

• It’s easier to maintain the image

• It’s easier to deploy

• Only one HTTP request

• File size growth is sublinear on number of pixels and colours

Arithmetic248 x 4 x 4 = 449?

Save for Web - 8c -100x20px - 248 bytes

Save for Web - 32c -100x80px - 449 bytes

More assets

The beauty of sublinear increment!

Save for Web - 48c100x160px837 bytes

Save for Web - 48c100x240px899 bytes

If you maintain the files, you know...

• Nothing is more boring and inefficient than saving, exporting maintaining and organizing a lot of files

• You’ll have better use for your time and attention polishing and optimizing one file, rather than several

Tiny and robusthttp://flickr.com/photos/guioconnor/332026161/

Last but not least:(automate it)

http://smush.it

Smush.It

• Lossless and extreme optimization

• Quick and Simple

• Be aware of confidentiality issues processing images on a site external to the company.

Questions?

gui@z-oc.com