Image Optimization for The Web

  • 4,039 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great information i like it just visit http://hotmegafun.com
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,039
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
42
Comments
1
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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