ºÝºÝߣ

ºÝºÝߣ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
Image optimization For the Web Guilherme Z¨¹hlke O¡¯Connor 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 don¡¯t 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... ? 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
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 ? You¡¯ll 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 O¡¯Connor 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 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 ?le... ? 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 ?les, you know... ? Nothing is more boring and inef?cient than saving, exporting maintaining and organizing a lot of ?les ? You¡¯ll 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.