Image Optimization:  7 mistakes Nicole Sullivan, Stoyan Stefanov Ajax Experience  Boston, Sep 30 th , 2008
On the agenda <ul><li>7 best practices </li></ul><ul><li>demo </li></ul>
<ul><li>Images? </li></ul>
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...
Best practices <ul><li>No GIFs </li></ul><ul><li>Crush PNGs </li></ul><ul><li>Strip JPEG meta </li></ul><ul><li>Avoid true...
Best practices – automation, lossless <ul><li>No GIFs </li></ul><ul><li>Crush PNGs </li></ul><ul><li>Strip JPEG meta </li>...
Top 10 sites save <ul><li>No GIFs –  20.42% </li></ul><ul><li>Crush PNGs –  16.05% </li></ul><ul><li>Strip JPEG meta –  11...
<ul><li>GIF to PNG8  </li></ul><ul><li>Crush PNGs </li></ul><ul><li>Strip JPEG meta </li></ul><ul><li>Bonus: Optimize GIF ...
<ul><li>Demo:  http://smushit.com/   </li></ul>
Let’s keep talking...  Nicole Sullivan http://stubbornella.org   Stoyan Stefanov http://phpied.com
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

9,273 views

Published on

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

Published in: Technology, Economy & Finance

Images - 7 mistakes

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

×