Image Optimization for The Web
•
6 j'aime•1,435 vues
How to optimize image files for the web regarding file size, http requests and code and file maintenance.
Recommandé
Contenu connexe
Similaire à Image Optimization for The Web
Similaire à Image Optimization for The Web (20)
Dernier
Dernier (20)
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 (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
- 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.