• Like
Yahoo - Web Images optimization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Yahoo - Web Images optimization

  • 3,513 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,513
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
74
Comments
0
Likes
4

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
  • S

Transcript

  • 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. 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
    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. Mistake #1: Using GIF when PNG is smaller
  • 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. 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
    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. Take away #1: Choose PNG over GIF LOSSLESS!
  • 12. Mistake #2: Not crushing PNGs
  • 13. About the PNG chunks
    • PNGs store information in &quot;chunks&quot;
    • 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
    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. 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
    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. 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
    • Estimate 5-30% savings
  • 33. Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
  • 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. 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
      • &quot;Never expires&quot; 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! [email_address] [email_address]
  • 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