1 / 46

Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov

Learn about common image optimization mistakes made by websites and how to correct them. Improve page load time, save bandwidth and disk space without compromising quality. Presented by Stoyan Stefanov from Yahoo! Exceptional Performance team.

michaelmorris
Download Presentation

Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Image Optimization 7 mistakes(and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco stoyan@yahoo-inc.comyslow@yahoo-inc.com

  2. About the presentation • Image optimization for the non-designer • 7 mistakes all sites make, even the big ones • Trivial to correct, serious savings • Easy win • improve page load time • save bandwidth • save disk space • save servers (and energy and the planet) • … without compromising quality

  3. About the presenter • Yahoo! Exceptional Performance (research, consulting) • YSlow lead developer • Open Source contributor (PEAR, Firebug) • Blog http://www.phpied.com • Articles and books author

  4. Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.

  5. What % of page weight is images? • Average 45.6% • Not exactly half, but pretty close • Your site may be different, amazon.com for example is 71% images • huge potential

  6. Mistake #1: Using GIF when PNG is smaller

  7. GIF vs. PNG * some IE < v.7 issues

  8. PNG transparency and IE Truecolor PNG IE 7 and up IE 6 and earlier PNG8 IE 7 and up IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency

  9. GIF vs. PNG • PNG8 can do everything a GIF can do, and more (sans cheesy Web 1.0 animations) • PNG8 works across all A-Grade browsers Q: And what about the size? A: Let’s survey the top 10 sites and convert all GIFs to PNGs to check if there are savings

  10. GIF-to-PNG • Average 20.42%savings

  11. Take away #1: Choose PNG over GIF LOSSLESS!

  12. Mistake #2: Not crushing PNGs

  13. About the PNG chunks • PNGs store information in "chunks" • Most chunks can safely be deleted • Most image programs DO NOT optimize • Command line tools: • pngcrush http://pmt.sourceforge.net/pngcrush/ • pngrewrite http://www.pobox.com/~jason1/pngrewrite/ • OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ • PNGOut http://advsys.net/ken/utils.htm • Example: > pngcrush -rem alla -brute -reduce src.png dest.png

  14. Crush top 10 and check for savings • Average 16.05%savings

  15. Take away #2: Crush your PNGs LOSSLESS!

  16. Mistake #3: Not stripping JPEG metadata

  17. JPEG metadata • Comments • EXIF • camera information • thumbnail! • audio!?! • … • Application specific (e.g. Photoshop)

  18. Lossless JPEG operations • jpegtran (http://jpegclub.org/) • Free command-line tool • Loseless operations such as crop, rotate • You probably have it installed already Example: > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

  19. Running jpegtran on top 10 sites • Average 11.85%savings

  20. Take away #3: Strip needless JPEG metadata LOSSLESS!

  21. Mistake #4: Using truecolor PNGs when palette PNG is good enough

  22. Truecolor vs. palette PNGs • Palette PNGs (PNG8) have 256 colors • Truecolor PNGs could have millions • In practice, truecolor PNGs often have less than 1000 colors • Otherwise it would mean they are photos and should be JPEGs • Human eye is not that sensitive

  23. Truecolor vs. palette PNGs • Convert truecolor to palette • How about 50% savings? • Solves IE<7’s little alpha transparency problem • Warning 1: LOSSY • But no one will ever know • Warning 2: automation is hard when there’s alpha

  24. Truecolor vs. palette PNGs Command-line tools: • pngquant (http://www.libpng.org/pub/png/apps/pngquant.html) • pngnq (http://pngnq.sourceforge.net/) Example: > pngquant 256 src.png

  25. Take away #4: Make all PNGs palette PNGs * * but manually check the result (or wait for someone to complain, chances are you'll be waiting in vain ;)

  26. Mistake #5: Using CSS alpha filters

  27. CSS filters • Back to the problem with truecolor PNG alpha transparency in earlier IEs • AlphaImageLoader CSS filter to fix the issue • IE proprietary • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image! • CSS code for sprites becomes messy

  28. Avoid filters • Best: Avoid completely, use gracefully degrading PNG8 • Fallback: use underscore hack _filter not to penalize IE7+ users • Yahoo! Search saved 50-100ms for users of IE5&6

  29. Take away #5: Avoid AlphaImageLoader, try PNG8 or at least _filter

  30. Mistake #6: Serve generated images “as-is”

  31. Dynamically generated images • GD library doesn't do what pngcrush does • Generated images are bigger • From big to small:generated GIF > generated PNG > crushed PNG • Server resources on every request

  32. Recipe for generated images 1st request: • generate • write to disk • pngcrush • serve 2nd request: • serve cached • Estimate5-30%savings

  33. Case study: Google charts API

  34. Case study: Google charts API

  35. Take away #6: Crush generated images LOSSLESS!

  36. Mistake #7: Not combining images

  37. … CSS Sprites CSS: HTML:

  38. CSS Sprites • Size of the combined image is usually less • You save HTTP requests • Article: http://alistapart.com/articles/sprites • Tool: http://csssprites.com

  39. Optimizing sprites

  40. Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)

  41. Bonus mistake: Improper favicon.ico • www.example.org/favicon.ico • Necessary evil: • The browser will request it • Better not respond with a 404 • Cookies are sent • Cannot be on CDN • Interferes with the download sequence • Make it small (<= 1K) • Animated favicons are not cool • Set Expires header (but not “forever”) • Tools: imagemagick, png2ico • Case study: Yahoo! Search - favicon.ico is 9% of all page views

  42. Bonus mistake #2: serving images from your app server • Option 1: use a CDN • Option 2: setup a static server • stripped down Apache or LightTPD • no libraries, no PHP, no Perl, etc • serve images (and other static components) • request -> find on disk -> serve • "Never expires" policy • no cookies

  43. Wrapping up You can save 10-30% in unnecessary image size!

  44. URLs – Exceptional Performance YUI blog http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/ Feedback http://developer.yahoo.com/yslow/feedback.html

  45. Thank you! stoyan@yahoo-inc.comyslow@yahoo-inc.com

  46. Credits • http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph • http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test • http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner

More Related