Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,542 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>

×