Your SlideShare is downloading. ×
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Yahoo - Web Images optimization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yahoo - Web Images optimization

3,587

Published on

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

No Downloads
Views
Total Views
3,587
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
79
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

    ×