Image optimization
          For the Web




   Guilherme Zühlke O’Connor
         http://www.z-oc.com
Optimise what?

• Data transfer (file 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)


    (p...
File Size by
   Palette
    (gif)      Save for Web - GIF - 128c - 5260 bytes (5Kb)

   500x20px
               Save for W...
File Size by   Save As - JPG - Q10/12 - 20686 bytes (20Kb)

compression     Save for Web - JPG - 100% - 2016 bytes (2Kb)

...
Jpeg format
• RGB or Grayscale
• There is no lossless Jpeg
• Good for gradients and loose edges
• Poor for simple images
•...
Save for Web
Save for Web                              Save for Web
                 Jpeg 15%
 PNG8 - 8c                  ...
PNG format
• 24 or up to 8 bits (RGB, GS or Indexed)
• Lossless compression
 • Colorspace Reduction != Compression
• Poor ...
Save for Web
Save for Web                              Save for Web
               PNG 8 - 128c
 JPEG - 30%               ...
GIF format

• Up to 8 bits, indexed colour (up to 256c)
• Lossless compression
• 1 bit transparency
• Generally poorer com...
Save for Web      Save for Web
 PNG 8 - 128c       GIF - 128c
  200x300px         200x300px
 22,170 bytes      28,930 byte...
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 file size for a non...
Indexed Colour

• Each pixel is represented by up to 8 bits
• A colour palette is created
• Each colour in the palette is ...
Cool!
Can I create my colour palettes in photoshop
   beforehand so I have precise colours?
Yes, you can!
Image Sizes
Size of compressed image files 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)      Sa...
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 file...

• It’s easier to maintain the image
• It’s easier to deploy
• Only one HTTP request
• File size gr...
Save for Web - 8c -100x20px - 248 bytes

Arithmetic
248 x 4 x 4 = 449?
                     Save for Web - 32c -100x80px -...
More
     assets            Save for Web - 48c
                           100x160px
   The beauty of            837 bytes
...
If you maintain the
     files, you know...
• Nothing is more boring and inefficient than
  saving, exporting maintaining an...
http://flickr.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 confidentiality issues
  processing images o...
?
Questions
 gui@z-oc.com
Upcoming SlideShare
Loading in …5
×

Image Optimization for The Web

4,895 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
6 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,895
On SlideShare
0
From Embeds
0
Number of Embeds
999
Actions
Shares
0
Downloads
54
Comments
1
Likes
6
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

×