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)
Smush.It
• Lossless and extreme optimization
• Quick and Simple
• Be aware of confidentiality issues processing images on a site external to the company.
Recommended
