How to optimize image files for the web regarding file size, http requests and code and file maintenance.

1. Image optimization
For the Web
Guilherme Zühlke O’Connor
http://www.z-oc.com

2. Optimise what?
• Data transfer (file size)
• HTTP requests
• File maintenance
• File References in Code

3. File size
• Colour system
• Number of colours effectively used
• Image format
• Image size

4. File Size by Save As - PNG - 8247 bytes (8Kb)
Palette Save for Web - PNG 24 - 5471 bytes (5Kb)
(png) Save for Web - PNG 8 - 128c - 4478 bytes (4Kb)
500x20px
Save for Web - PNG 8 - 20c - 1259 bytes (1.2Kb)
Gradient
Save for Web - PNG 8 - 16c - 716 bytes
Save for Web - PNG 8 - 8c - 507 bytes

5. File Size by
Palette
(gif) Save for Web - GIF - 128c - 5260 bytes (5Kb)
500x20px
Save for Web - GIF - 20c - 1772 bytes (1.7Kb)
Gradient
Save for Web - GIF - 16c - 1071 bytes
Save for Web - GIF - 8c - 765 bytes

6. File Size by Save As - JPG - Q10/12 - 20686 bytes (20Kb)
compression Save for Web - JPG - 100% - 2016 bytes (2Kb)
(jpg) Save for Web - JPG - 60% - 732 bytes
500x20px
Save for Web - JPG - 30% - 571 bytes
Gradient
Save for Web - JPG - 5% - 490 bytes

7. 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

8. Save for Web
Save for Web Save for Web
Jpeg 15%
PNG8 - 8c Jpeg - 15%
200x300px
100x160px 100x160px
2121 bytes
997 bytes 5577 bytes
http://flickr.com/photos/annazuhlke/3254769257/
Jpeg Vs. Png

9. 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)

10. Save for Web
Save for Web Save for Web
PNG 8 - 128c
JPEG - 30% PNG 24
200x300px
200x300px 200x300px
22,170 bytes
7,869 bytes 95,130 bytes
http://flickr.com/photos/annazuhlke/3252543983/
Photo rendering

11. GIF format
• Up to 8 bits, indexed colour (up to 256c)
• Lossless compression
• 1 bit transparency
• Generally poorer compression than PNG

12. Save for Web Save for Web
PNG 8 - 128c GIF - 128c
200x300px 200x300px
22,170 bytes 28,930 bytes
http://flickr.com/photos/annazuhlke/3252543983/
Photo rendering

13. Colour Sytems
• RGB
• Grayscale
• Indexed Colour

14. RGB
• Each pixel is represented by 24 bits
• Three channels (R,G & B)
• 8 bits each

15. 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

16. 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

17. Cool!
Can I create my colour palettes in photoshop
beforehand so I have precise colours?

18. Yes, you can!

19. Image Sizes
Size of compressed image files don’t increase linearly to
the number of pixels

20. File Size by Save for Web - 500x20px - 507 bytes
pixel qty Save for Web - 300x20px - 392 bytes
(png) Save for Web - 100x20px - 248 bytes
PNG-8
Save for Web - 10x20px - 190 bytes
8 colours
Save for Web - 1x20px - 162 bytes

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

22. Sprites
Multiple page assets in a single image

23. 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

24. Save for Web - 8c -100x20px - 248 bytes
Arithmetic
248 x 4 x 4 = 449?
Save for Web - 32c -100x80px - 449 bytes

25. More
assets Save for Web - 48c
100x160px
The beauty of 837 bytes
sublinear increment!
Save for Web - 48c
100x240px
899 bytes

26. 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

27. http://flickr.com/photos/guioconnor/332026161/
Tiny and robust

28. Last but not least:
(automate it)

29. http://smush.it

30. Smush.It
• Lossless and extreme optimization
• Quick and Simple
• Be aware of confidentiality issues
processing images on a site external to the
company.

31. ?
Questions
gui@z-oc.com