Images - 7 mistakes
Upcoming SlideShare
Loading in...5
×
 

Images - 7 mistakes

on

  • 10,694 views

A 5 minutes lightning talk from Ajax Experience 2008, introducing the smush.it tool (smush.it)

A 5 minutes lightning talk from Ajax Experience 2008, introducing the smush.it tool (smush.it)

Statistics

Views

Total Views
10,694
Views on SlideShare
7,467
Embed Views
3,227

Actions

Likes
4
Downloads
64
Comments
0

17 Embeds 3,227

http://www.phpied.com 2081
http://descary.com 839
http://www.locosxlosbits.com 263
http://locosxlosbits.com 18
http://www.mmm.phpied.com 10
https://www.linkedin.com 2
http://www.linkedin.com 2
http://www.scoop.it 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1
http://www.slideshare.net 1
http://mailhost2.mana.pf 1
http://74.125.87.132 1
http://74.125.43.113 1
http://217.12.8.115 1
http://74.125.77.132 1
http://74.125.93.104 1
More...

Accessibility

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

Images - 7 mistakes Images - 7 mistakes Presentation Transcript

  • Image Optimization: 7 mistakes Nicole Sullivan, Stoyan Stefanov Ajax Experience Boston, Sep 30 th , 2008
  • On the agenda
    • 7 best practices
    • demo
    • Images?
  • 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
  • Best practices
    • No GIFs
    • Crush PNGs
    • Strip JPEG meta
    • Avoid truecolor PNG, use PNG8
    • Avoid AlphaImageLoader
    • Optimize and cache dynamic images
    • Combine images into sprites
  • Best practices – automation, lossless
    • No GIFs
    • Crush PNGs
    • Strip JPEG meta
    • Avoid truecolor PNG, use PNG8
    • Avoid AlphaImageLoader
    • Optimize and cache dynamic images
    • Combine images into sprites
  • Top 10 sites save
    • No GIFs – 20.42%
    • Crush PNGs – 16.05%
    • Strip JPEG meta – 11.85%
    • Avoid truecolor PNG, use PNG8
    • Avoid AlphaImageLoader
    • Optimize and cache dynamic images
    • Combine images into sprites
    • GIF to PNG8
    • Crush PNGs
    • Strip JPEG meta
    • Bonus: Optimize GIF animations
    • Demo: http://smushit.com/
  • Let’s keep talking... Nicole Sullivan http://stubbornella.org Stoyan Stefanov http://phpied.com
  • 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