Images - 7 mistakes (first draft)

  • 3,518 views
Uploaded 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: …

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/

  • 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,518
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
43
Comments
0
Likes
3

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

Transcript

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