際際滷

際際滷Share a Scribd company logo

Image Optimization for The Web

Guilherme Z端hlke O'Connor
Guilherme Z端hlke O'Connor

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

1 of 31
Downloaded 55 times
Image optimization For the Web Guilherme Z端hlke OConnor http://www.z-oc.com
Optimise what? Data transfer (鍖le 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 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
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
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
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 Sacri鍖ces chrominance, optim. luminance
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://鍖ickr.com/photos/annazuhlke/3254769257/ Jpeg Vs. Png
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)
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://鍖ickr.com/photos/annazuhlke/3252543983/ Photo rendering
GIF format Up to 8 bits, indexed colour (up to 256c) Lossless compression 1 bit transparency Generally poorer compression than PNG
Save for Web Save for Web PNG 8 - 128c GIF - 128c 200x300px 200x300px 22,170 bytes 28,930 bytes http://鍖ickr.com/photos/annazuhlke/3252543983/ Photo rendering
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 鍖le 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 Sizes Size of compressed image 鍖les dont increase linearly to the number of pixels
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
The less the merrier? Consider the rendering effort of tiling the image on the browser.
Sprites Multiple page assets in a single image
Having a single 鍖le... Its easier to maintain the image Its easier to deploy Only one HTTP request File size growth is sublinear on number of pixels and colours
Save for Web - 8c -100x20px - 248 bytes Arithmetic 248 x 4 x 4 = 449? Save for Web - 32c -100x80px - 449 bytes
More assets Save for Web - 48c 100x160px The beauty of 837 bytes sublinear increment! Save for Web - 48c 100x240px 899 bytes
If you maintain the 鍖les, you know... Nothing is more boring and inef鍖cient than saving, exporting maintaining and organizing a lot of 鍖les Youll have better use for your time and attention polishing and optimizing one 鍖le, rather than several
http://鍖ickr.com/photos/guioconnor/332026161/ Tiny and robust
Last but not least: (automate it)
http://smush.it
Smush.It Lossless and extreme optimization Quick and Simple Be aware of con鍖dentiality issues processing images on a site external to the company.
? Questions gui@z-oc.com

More Related Content

Image Optimization for The Web

  • 1. Image optimization For the Web Guilherme Z端hlke OConnor http://www.z-oc.com
  • 2. Optimise what? Data transfer (鍖le 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 Sacri鍖ces 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://鍖ickr.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://鍖ickr.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://鍖ickr.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 鍖le 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?
  • 19. Image Sizes Size of compressed image 鍖les dont 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 鍖le... Its easier to maintain the image Its 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 鍖les, you know... Nothing is more boring and inef鍖cient than saving, exporting maintaining and organizing a lot of 鍖les Youll have better use for your time and attention polishing and optimizing one 鍖le, rather than several
  • 28. Last but not least: (automate it)
  • 30. Smush.It Lossless and extreme optimization Quick and Simple Be aware of con鍖dentiality issues processing images on a site external to the company.