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

Yahoo - Web Images optimization

on

  • 5,464 views

 

Statistics

Views

Total Views
5,464
Views on SlideShare
5,412
Embed Views
52

Actions

Likes
4
Downloads
74
Comments
0

8 Embeds 52

http://leechermods.blogspot.com 27
http://static.slidesharecdn.com 8
http://www.slideshare.net 7
http://www.leechermods.com 4
http://www.scoop.it 3
http://www.feedcollector.org 1
https://proxy12345https.appspot.com 1
http://feedproxy.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • S

Yahoo - Web Images optimization Yahoo - Web Images optimization Presentation Transcript

  • Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]
  • 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
  • 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
  • Hmm, images?
    • Q: Is this really important?
    • A: Let’s survey
    • the global
    • top 10 sites.
  • 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
  • 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 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
  • 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
  • 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
  • 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
  • Take away #1: Choose PNG over GIF LOSSLESS!
  • Mistake #2: Not crushing PNGs
  • 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
  • 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
  • Take away #2: Crush your PNGs LOSSLESS!
  • Mistake #3: Not stripping JPEG metadata
  • JPEG metadata
    • Comments
    • EXIF
      • camera information
      • thumbnail !
      • audio !?!
    • Application specific (e.g. Photoshop)
  • 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
  • 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
  • Take away #3: Strip needless JPEG metadata LOSSLESS!
  • Mistake #4: Using truecolor PNGs when palette PNG is good enough
  • 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
  • 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
  • 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
  • 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 ;)
  • Mistake #5: Using CSS alpha filters
  • 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
  • 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
  • Take away #5: Avoid AlphaImageLoader , try PNG8 or at least _filter
  • Mistake #6: Serve generated images “as-is”
  • 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
  • Recipe for generated images
    • 1st request:
    • generate
    • write to disk
    • pngcrush
    • serve
    • 2nd request:
    • serve cached
    • Estimate 5-30% savings
  • 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 (1408 colors) Original (1408 colors)
  • Take away #6: Crush generated images LOSSLESS!
  • Mistake #7: Not combining images
  • CSS Sprites CSS: HTML: …
  • CSS Sprites
    • Size of the combined image is usually less
    • You save HTTP requests
    • Article: http://alistapart.com/articles/sprites
    • Tool: http://csssprites.com
  • Optimizing sprites
  • Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)
  • 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
  • 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
  • Wrapping up
    • You can save 10-30% in unnecessary image size!
  • 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
  • Thank you! [email_address] [email_address]
  • 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