0
Image Optimization  7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24t...
About the presentation <ul><li>Image optimization for the non-designer </li></ul><ul><li>7 mistakes all sites make, even t...
About the presenter <ul><li>Yahoo! Exceptional Performance    (research, consulting) </li></ul><ul><li>YSlow lead develope...
Hmm, images? <ul><li>Q: Is this really   important? </li></ul><ul><li>A: Let’s survey </li></ul><ul><li>the global </li></...
What % of page weight is images? <ul><li>Average  45.6% </li></ul><ul><li>Not exactly half, but pretty close </li></ul><ul...
Mistake #1: Using GIF when PNG is smaller
GIF vs. PNG * some IE < v.7 issues No (future) No (future) Yes Animation All A-grade (96%+) All A-grade (96%+) Nearly all ...
PNG transparency and IE <ul><li>Truecolor PNG </li></ul><ul><li>IE 7 and up  IE 6 and earlier </li></ul>PNG8 IE 7 and up  ...
GIF vs. PNG <ul><li>PNG8 can do everything a GIF can do, and more  (sans cheesy Web 1.0 animations) </li></ul><ul><li>PNG8...
GIF-to-PNG <ul><li>Average  20.42% savings </li></ul>24.58% Yahoo! JP 10 24.27% Blogger 9 17.47% Facebook 8 No GIFs! Wikip...
Take away #1: Choose PNG over GIF LOSSLESS!
Mistake #2: Not crushing PNGs
About the PNG chunks <ul><li>PNGs store information in &quot;chunks&quot; </li></ul><ul><li>Most chunks can safely be dele...
Crush top 10 and check for savings <ul><li>Average  16.05% savings </li></ul>No PNGs Yahoo! JP 10 1.07% Blogger 9 9.08% Fa...
Take away #2: Crush your PNGs LOSSLESS!
Mistake #3: Not stripping JPEG metadata
JPEG metadata <ul><li>Comments </li></ul><ul><li>EXIF  </li></ul><ul><ul><li>camera information </li></ul></ul><ul><ul><li...
Lossless JPEG operations <ul><li>jpegtran  ( http:// jpegclub.org / ) </li></ul><ul><li>Free command-line tool </li></ul><...
Running jpegtran on top 10 sites <ul><li>Average  11.85% savings </li></ul>17.31% Yahoo! JP 10 38.35% Blogger 9 13.59% Fac...
Take away #3: Strip needless JPEG metadata LOSSLESS!
Mistake #4: Using truecolor PNGs when palette PNG is good enough
Truecolor vs. palette PNGs <ul><li>Palette PNGs (PNG8) have 256 colors </li></ul><ul><li>Truecolor PNGs could have million...
Truecolor vs. palette PNGs <ul><li>Convert truecolor to palette </li></ul><ul><li>How about 50% savings? </li></ul><ul><li...
Truecolor vs. palette PNGs <ul><li>Command-line tools: </li></ul><ul><li>pngquant  ( http:// www.libpng.org/pub/png/apps/p...
Take away #4: Make all PNGs palette PNGs * <ul><li>* but manually check the result </li></ul><ul><li>(or wait for someone ...
Mistake #5: Using CSS alpha filters
CSS filters <ul><li>Back to the problem with truecolor PNG alpha transparency in earlier IEs </li></ul><ul><li>AlphaImageL...
Avoid filters <ul><li>Best: Avoid completely, use gracefully degrading PNG8 </li></ul><ul><li>Fallback: use underscore hac...
Take away #5: Avoid  AlphaImageLoader , try PNG8 or at least  _filter
Mistake #6: Serve generated images “as-is”
Dynamically generated images <ul><li>GD library doesn't do what pngcrush does </li></ul><ul><li>Generated images are bigge...
Recipe for generated images <ul><li>1st request: </li></ul><ul><li>generate </li></ul><ul><li>write to disk </li></ul><ul>...
Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
Case study: Google charts API 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1...
Take away #6: Crush generated images LOSSLESS!
Mistake #7: Not combining images
CSS Sprites CSS: HTML: …
CSS Sprites <ul><li>Size of the combined image is usually less </li></ul><ul><li>You save HTTP requests  </li></ul><ul><li...
Optimizing sprites
Take away #7: Use CSS Sprites Stay within the palette number of  colors (use PNG8)
Bonus mistake: Improper favicon.ico <ul><li>www.example.org/favicon.ico </li></ul><ul><li>Necessary evil: </li></ul><ul><u...
Bonus mistake #2: serving images from your app server <ul><li>Option 1: use a CDN </li></ul><ul><li>Option 2: setup a stat...
Wrapping up <ul><li>You can save  10-30%  in unnecessary image size! </li></ul>
URLs – Exceptional Performance <ul><li>YUI blog  </li></ul><ul><li>http:// yuiblog.com /blog/category/performance/   </li>...
Thank you! [email_address]     [email_address]
Credits <ul><li>http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/  Apolo 17 Full-Earth Photograph </li></ul><ul><li>ht...
Upcoming SlideShare
Loading in...5
×

Yahoo - Web Images optimization

3,637

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,637
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
81
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • S
  • Transcript of "Yahoo - Web Images optimization"

    1. 1. Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]
    2. 2. About the presentation <ul><li>Image optimization for the non-designer </li></ul><ul><li>7 mistakes all sites make, even the big ones </li></ul><ul><li>Trivial to correct, serious savings </li></ul><ul><li>Easy win </li></ul><ul><ul><li>improve page load time </li></ul></ul><ul><ul><li>save bandwidth </li></ul></ul><ul><ul><li>save disk space </li></ul></ul><ul><ul><li>save servers (and energy and the planet) </li></ul></ul><ul><ul><li>… without compromising quality </li></ul></ul>
    3. 3. About the presenter <ul><li>Yahoo! Exceptional Performance (research, consulting) </li></ul><ul><li>YSlow lead developer </li></ul><ul><li>Open Source contributor (PEAR, Firebug) </li></ul><ul><li>Blog http://www.phpied.com </li></ul><ul><li>Articles and books author </li></ul>
    4. 4. Hmm, images? <ul><li>Q: Is this really important? </li></ul><ul><li>A: Let’s survey </li></ul><ul><li>the global </li></ul><ul><li>top 10 sites. </li></ul>
    5. 5. What % of page weight is images? <ul><li>Average 45.6% </li></ul><ul><li>Not exactly half, but pretty close </li></ul><ul><li>Your site may be different, amazon.com for example is 71% images </li></ul><ul><li>huge potential </li></ul>36% Yahoo! JP 10 27% Blogger 9 35% Facebook 8 39% Wikipedia 7 48% MySpace 6 41% MSN 5 64% Live.com 4 62% YouTube 3 75% Google 2 29% Yahoo! 1
    6. 6. Mistake #1: Using GIF when PNG is smaller
    7. 7. GIF vs. PNG * some IE < v.7 issues No (future) No (future) Yes Animation All A-grade (96%+) All A-grade (96%+) Nearly all Browser support Alpha (variable) * Alpha (variable) * Boolean (on/off) Transparency Up to 48bit 256 256 Number of colors Truecolor PNG Palette PNG (aka PNG8, aka indexed) GIF
    8. 8. PNG transparency and IE <ul><li>Truecolor PNG </li></ul><ul><li>IE 7 and up IE 6 and earlier </li></ul>PNG8 IE 7 and up IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency
    9. 9. GIF vs. PNG <ul><li>PNG8 can do everything a GIF can do, and more (sans cheesy Web 1.0 animations) </li></ul><ul><li>PNG8 works across all A-Grade browsers </li></ul><ul><li>Q: And what about the size? </li></ul><ul><li>A: Let’s survey the top 10 sites and convert all GIFs to PNGs to check if there are savings </li></ul>
    10. 10. GIF-to-PNG <ul><li>Average 20.42% savings </li></ul>24.58% Yahoo! JP 10 24.27% Blogger 9 17.47% Facebook 8 No GIFs! Wikipedia 7 17.65% MySpace 6 13.53% MSN 5 19.93% Live.com 4 33.82% YouTube 3 22.95% Google 2 9.55% Yahoo! 1
    11. 11. Take away #1: Choose PNG over GIF LOSSLESS!
    12. 12. Mistake #2: Not crushing PNGs
    13. 13. About the PNG chunks <ul><li>PNGs store information in &quot;chunks&quot; </li></ul><ul><li>Most chunks can safely be deleted </li></ul><ul><li>Most image programs DO NOT optimize </li></ul><ul><li>Command line tools: </li></ul><ul><ul><li>pngcrush http://pmt.sourceforge.net/pngcrush/ </li></ul></ul><ul><ul><li>pngrewrite http://www.pobox.com/~jason1/pngrewrite/ </li></ul></ul><ul><ul><li>OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ </li></ul></ul><ul><ul><li>PNGOut http:// advsys.net/ken/utils.htm </li></ul></ul><ul><li>Example: </li></ul><ul><li>> pngcrush -rem alla -brute -reduce src.png dest.png </li></ul>
    14. 14. Crush top 10 and check for savings <ul><li>Average 16.05% savings </li></ul>No PNGs Yahoo! JP 10 1.07% Blogger 9 9.08% Facebook 8 21.32% Wikipedia 7 25.44% MySpace 6 No PNGs MSN 5 No PNGs Live.com 4 17.32% YouTube 3 22.60% Google Reader 2 15.52% Yahoo! 1
    15. 15. Take away #2: Crush your PNGs LOSSLESS!
    16. 16. Mistake #3: Not stripping JPEG metadata
    17. 17. JPEG metadata <ul><li>Comments </li></ul><ul><li>EXIF </li></ul><ul><ul><li>camera information </li></ul></ul><ul><ul><li>thumbnail ! </li></ul></ul><ul><ul><li>audio !?! </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Application specific (e.g. Photoshop) </li></ul>
    18. 18. Lossless JPEG operations <ul><li>jpegtran ( http:// jpegclub.org / ) </li></ul><ul><li>Free command-line tool </li></ul><ul><li>Loseless operations such as crop, rotate </li></ul><ul><li>You probably have it installed already </li></ul><ul><li>Example: </li></ul><ul><li>> jpegtran -copy none -optimize -perfect src.jpg dest.jpg </li></ul>
    19. 19. Running jpegtran on top 10 sites <ul><li>Average 11.85% savings </li></ul>17.31% Yahoo! JP 10 38.35% Blogger 9 13.59% Facebook 8 No jpegs Wikipedia 7 4.28% MySpace 6 7.43% MSN 5 0.47% Live.com 4 10.71% YouTube 3 No jpegs Google 2 2.62% Yahoo! 1
    20. 20. Take away #3: Strip needless JPEG metadata LOSSLESS!
    21. 21. Mistake #4: Using truecolor PNGs when palette PNG is good enough
    22. 22. Truecolor vs. palette PNGs <ul><li>Palette PNGs (PNG8) have 256 colors </li></ul><ul><li>Truecolor PNGs could have millions </li></ul><ul><li>In practice, truecolor PNGs often have less than 1000 colors </li></ul><ul><li>Otherwise it would mean they are photos and should be JPEGs </li></ul><ul><li>Human eye is not that sensitive </li></ul>
    23. 23. Truecolor vs. palette PNGs <ul><li>Convert truecolor to palette </li></ul><ul><li>How about 50% savings? </li></ul><ul><li>Solves IE<7’s little alpha transparency problem </li></ul><ul><li>Warning 1: LOSSY </li></ul><ul><ul><li>But no one will ever know </li></ul></ul><ul><li>Warning 2: automation is hard when there’s alpha </li></ul>
    24. 24. Truecolor vs. palette PNGs <ul><li>Command-line tools: </li></ul><ul><li>pngquant ( http:// www.libpng.org/pub/png/apps/pngquant.html ) </li></ul><ul><li>pngnq ( http:// pngnq.sourceforge.net / ) </li></ul><ul><li>Example: </li></ul><ul><li>> pngquant 256 src.png </li></ul>
    25. 25. Take away #4: Make all PNGs palette PNGs * <ul><li>* but manually check the result </li></ul><ul><li>(or wait for someone to complain, chances are you'll be waiting in vain ;) </li></ul>
    26. 26. Mistake #5: Using CSS alpha filters
    27. 27. CSS filters <ul><li>Back to the problem with truecolor PNG alpha transparency in earlier IEs </li></ul><ul><li>AlphaImageLoader CSS filter to fix the issue </li></ul><ul><li>IE proprietary </li></ul><ul><li>Blocks rendering, freezes the browser </li></ul><ul><li>Increased memory consumption </li></ul><ul><li>Per element, not per image! </li></ul><ul><li>CSS code for sprites becomes messy </li></ul>
    28. 28. Avoid filters <ul><li>Best: Avoid completely, use gracefully degrading PNG8 </li></ul><ul><li>Fallback: use underscore hack _filter not to penalize IE7+ users </li></ul><ul><li>Yahoo! Search saved 50-100ms for users of IE5&6 </li></ul>
    29. 29. Take away #5: Avoid AlphaImageLoader , try PNG8 or at least _filter
    30. 30. Mistake #6: Serve generated images “as-is”
    31. 31. Dynamically generated images <ul><li>GD library doesn't do what pngcrush does </li></ul><ul><li>Generated images are bigger </li></ul><ul><li>From big to small: generated GIF > generated PNG > crushed PNG </li></ul><ul><li>Server resources on every request </li></ul>
    32. 32. Recipe for generated images <ul><li>1st request: </li></ul><ul><li>generate </li></ul><ul><li>write to disk </li></ul><ul><li>pngcrush </li></ul><ul><li>serve </li></ul><ul><li>2nd request: </li></ul><ul><li>serve cached </li></ul><ul><li>Estimate 5-30% savings </li></ul>
    33. 33. Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
    34. 34. Case study: Google charts API 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
    35. 35. Take away #6: Crush generated images LOSSLESS!
    36. 36. Mistake #7: Not combining images
    37. 37. CSS Sprites CSS: HTML: …
    38. 38. CSS Sprites <ul><li>Size of the combined image is usually less </li></ul><ul><li>You save HTTP requests </li></ul><ul><li>Article: http://alistapart.com/articles/sprites </li></ul><ul><li>Tool: http://csssprites.com </li></ul>
    39. 39. Optimizing sprites
    40. 40. Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)
    41. 41. Bonus mistake: Improper favicon.ico <ul><li>www.example.org/favicon.ico </li></ul><ul><li>Necessary evil: </li></ul><ul><ul><li>The browser will request it </li></ul></ul><ul><ul><li>Better not respond with a 404 </li></ul></ul><ul><ul><li>Cookies are sent </li></ul></ul><ul><ul><li>Cannot be on CDN </li></ul></ul><ul><ul><li>Interferes with the download sequence </li></ul></ul><ul><li>Make it small (<= 1K) </li></ul><ul><li>Animated favicons are not cool </li></ul><ul><li>Set Expires header (but not “forever”) </li></ul><ul><li>Tools: imagemagick, png2ico </li></ul><ul><li>Case study: Yahoo! Search - favicon.ico is 9% of all page views </li></ul>
    42. 42. Bonus mistake #2: serving images from your app server <ul><li>Option 1: use a CDN </li></ul><ul><li>Option 2: setup a static server </li></ul><ul><ul><li>stripped down Apache or LightTPD </li></ul></ul><ul><ul><li>no libraries, no PHP, no Perl, etc </li></ul></ul><ul><ul><li>serve images (and other static components) </li></ul></ul><ul><ul><li>request -> find on disk -> serve </li></ul></ul><ul><ul><li>&quot;Never expires&quot; policy </li></ul></ul><ul><ul><li>no cookies </li></ul></ul>
    43. 43. Wrapping up <ul><li>You can save 10-30% in unnecessary image size! </li></ul>
    44. 44. URLs – Exceptional Performance <ul><li>YUI blog </li></ul><ul><li>http:// yuiblog.com /blog/category/performance/ </li></ul><ul><li>YDN (Yahoo Developer Network) </li></ul><ul><li>http://developer.yahoo.com/performance/ </li></ul><ul><li>YDN blog </li></ul><ul><li>http:// developer.yahoo.net /blog/archives/performance/ </li></ul><ul><li>Mailing list (Yahoo! Group) </li></ul><ul><li>http://tech.groups.yahoo.com/group/exceptional-performance/ </li></ul><ul><li>Feedback </li></ul><ul><li>http:// developer.yahoo.com/yslow/feedback.html </li></ul>
    45. 45. Thank you! [email_address] [email_address]
    46. 46. Credits <ul><li>http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph </li></ul><ul><li>http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test </li></ul><ul><li>http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×