Your SlideShare is downloading. ×
0
Image Optimization:  7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]
About the presenter <ul><li>Yahoo! performance    team member </li></ul><ul><li>YSlow architect, dev lead </li></ul><ul><l...
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>some say 50%+ </li></ul><ul><li>amazon.com is 71...
GIF vs. PNG8 vs. truecolor PNG <ul><li>PNG8 is like GIF, only: </li></ul><ul><ul><li>Usually smaller </li></ul></ul><ul><u...
All we are saying is: “Give PiNG a chance!” <ul><li>JPEG is for photos </li></ul><ul><li>GIF for animations </li></ul><ul>...
Mistake #1: Using GIF when PNG is smaller <ul><li>Solution: </li></ul><ul><ul><li>Convert GIFs to PNG </li></ul></ul><ul><...
Mistake #2: Not crushing PNGs <ul><li>Remove unneded PNG “chunks”  </li></ul><ul><li>Example  lossless  solution: </li></u...
Mistake #3: Not stripping JPEG metadata <ul><li>Comments, EXIF (camera info)… </li></ul><ul><li>Example  lossless  solutio...
Mistake #4: Using truecolor PNG instead of PNG8 <ul><li>256 colors vs. thousands or millions? </li></ul><ul><li>Human eye ...
Mistake #5: Using  AlphaImageLoader <ul><li>AlphaImageLoaders fixes transparency issue with truecolor PNGs in IE < 7  </li...
Mistake #5: solution <ul><li>Best:  avoid, use PNG8 </li></ul><ul><li>Fallback:  use underscore hack  _filter , so IE7+ us...
Mistake #6: serving dynamically generated images “as is” <ul><li>generated GIF > generated PNG > crushed PNG </li></ul><ul...
Mistake #7: Not combining images <ul><li>HTTP requests are expensive </li></ul><ul><li>Use CSS sprites </li></ul>…
Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 col...
Demo…
Thank you!
URLs: Exceptional Performance <ul><li>YUI blog  </li></ul><ul><li>http:// yuiblog.com /blog/category/performance/   </li><...
URLs: Tools <ul><li>PNG crushers </li></ul><ul><ul><li>pngcrush  http:// pmt.sourceforge.net/pngcrush /   </li></ul></ul><...
Upcoming SlideShare
Loading in...5
×

Images - 7 mistakes (first draft)

3,689

Published on

longer version of the Ajax Experience talk, before we realized 5 minutes are in no way enough to present those slides. The final slides are here: http://www.slideshare.net/stoyan/images-7-mistakes-presentation/

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,689
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Images - 7 mistakes (first draft)"

  1. 1. Image Optimization: 7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]
  2. 2. About the presenter <ul><li>Yahoo! performance team member </li></ul><ul><li>YSlow architect, dev lead </li></ul><ul><li>Book author, open-source contributor </li></ul><ul><li>Blog: http:// phpied.com </li></ul>
  3. 3. 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>
  4. 4. What % of page weight is images? <ul><li>Average 45.6% </li></ul><ul><li>some say 50%+ </li></ul><ul><li>amazon.com is 71% </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
  5. 5. GIF vs. PNG8 vs. truecolor PNG <ul><li>PNG8 is like GIF, only: </li></ul><ul><ul><li>Usually smaller </li></ul></ul><ul><ul><li>Supports alpha transparency (in IE < 7 gracefully degrading to GIF-like boolean transparency) </li></ul></ul><ul><ul><li>No animations </li></ul></ul>
  6. 6. All we are saying is: “Give PiNG a chance!” <ul><li>JPEG is for photos </li></ul><ul><li>GIF for animations </li></ul><ul><li>PNG for everything else: icons, backgrounds, graphs… </li></ul>
  7. 7. Mistake #1: Using GIF when PNG is smaller <ul><li>Solution: </li></ul><ul><ul><li>Convert GIFs to PNG </li></ul></ul><ul><ul><li>Lossless operation </li></ul></ul><ul><ul><li>Top 10 sites save 20.42% </li></ul></ul>
  8. 8. Mistake #2: Not crushing PNGs <ul><li>Remove unneded PNG “chunks” </li></ul><ul><li>Example lossless solution: </li></ul><ul><li>> pngcrush -rem alla -brute -reduce src.png dest.png </li></ul><ul><li>Top 10 sites save 16.05% </li></ul>
  9. 9. Mistake #3: Not stripping JPEG metadata <ul><li>Comments, EXIF (camera info)… </li></ul><ul><li>Example lossless solution: </li></ul><ul><li>> jpegtran -copy none -optimize src.jpg dest.jpg </li></ul><ul><li>Top 10 sites would save 11.85% </li></ul>
  10. 10. Mistake #4: Using truecolor PNG instead of PNG8 <ul><li>256 colors vs. thousands or millions? </li></ul><ul><li>Human eye is not that sensitive </li></ul><ul><li>Solves the transparency problem in IE < 7 </li></ul><ul><li>Warning: lossy </li></ul><ul><li>> pngquant 256 image.png </li></ul>
  11. 11. Mistake #5: Using AlphaImageLoader <ul><li>AlphaImageLoaders fixes transparency issue with truecolor PNGs in IE < 7 </li></ul><ul><li>Problems: blocks rendering, freezes the browser, costs memory, per element (not per image), IE-proprietary </li></ul>
  12. 12. Mistake #5: solution <ul><li>Best: avoid, use PNG8 </li></ul><ul><li>Fallback: use underscore hack _filter , so IE7+ users are not penalized </li></ul><ul><li>Yahoo! Search saved 50-100ms for IE5&6 users </li></ul>
  13. 13. Mistake #6: serving dynamically generated images “as is” <ul><li>generated GIF > generated PNG > crushed PNG </li></ul><ul><li>server resources on every request </li></ul><ul><li>solution: </li></ul><ul><ul><li>1 st request: generate, write, crush </li></ul></ul><ul><ul><li>2 nd request: serve cached </li></ul></ul><ul><li>5-30% savings </li></ul>
  14. 14. Mistake #7: Not combining images <ul><li>HTTP requests are expensive </li></ul><ul><li>Use CSS sprites </li></ul>…
  15. 15. Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
  16. 16. 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
  17. 17. Demo…
  18. 18. Thank you!
  19. 19. 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>
  20. 20. URLs: Tools <ul><li>PNG crushers </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>Truecolor-to-PNG8 </li></ul><ul><ul><li>pngquant ( http:// www.libpng.org/pub/png/apps/pngquant.html ) </li></ul></ul><ul><ul><li>pngnq ( http://pngnq.sourceforge.net/ ) </li></ul></ul><ul><li>JPEG </li></ul><ul><ul><li>jpegtran ( http:// jpegclub.org / ) </li></ul></ul><ul><li>CSS Sprites </li></ul><ul><ul><li>Tool: http:// csssprites.com </li></ul></ul>
  1. A particular slide catching your eye?

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

×