Image Optimization for The Web

4,749 views
4,491 views

Published on

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

Published in: Design
1 Comment
5 Likes
Statistics
Notes
  • Great information i like it just visit http://hotmegafun.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,749
On SlideShare
0
From Embeds
0
Number of Embeds
1,000
Actions
Shares
0
Downloads
51
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Image Optimization for The Web

  1. 1. Image optimization For the Web Guilherme Zühlke O’Connor http://www.z-oc.com
  2. 2. Optimise what? • Data transfer (file size) • HTTP requests • File maintenance • File References in Code
  3. 3. File size • Colour system • Number of colours effectively used • Image format • Image size
  4. 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. 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. 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. 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. 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. 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. 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. 11. GIF format • Up to 8 bits, indexed colour (up to 256c) • Lossless compression • 1 bit transparency • Generally poorer compression than PNG
  12. 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. 13. Colour Sytems • RGB • Grayscale • Indexed Colour
  14. 14. RGB • Each pixel is represented by 24 bits • Three channels (R,G & B) • 8 bits each
  15. 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. 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. 17. Cool! Can I create my colour palettes in photoshop beforehand so I have precise colours?
  18. 18. Yes, you can!
  19. 19. Image Sizes Size of compressed image files don’t increase linearly to the number of pixels
  20. 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. 21. The less the merrier? Consider the rendering effort of tiling the image on the browser.
  22. 22. Sprites Multiple page assets in a single image
  23. 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. 24. Save for Web - 8c -100x20px - 248 bytes Arithmetic 248 x 4 x 4 = 449? Save for Web - 32c -100x80px - 449 bytes
  25. 25. More assets Save for Web - 48c 100x160px The beauty of 837 bytes sublinear increment! Save for Web - 48c 100x240px 899 bytes
  26. 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. 27. http://flickr.com/photos/guioconnor/332026161/ Tiny and robust
  28. 28. Last but not least: (automate it)
  29. 29. http://smush.it
  30. 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. 31. ? Questions gui@z-oc.com

×