Upload
stoyan-stefanov
View
9.326
Download
0
Embed Size (px)
Citation preview
Image Optimization: Image Optimization: 7 mistakes7 mistakesNicole Sullivan, Stoyan StefanovAjax Experience Boston, Sep 30th, 2008
On the agenda
• 7 best practices
• demo
Images?
What % of page weight is images?• Average
45.6%45.6%• some say 50%+
• amazon.com is 71%
• huge potential
1 Yahoo! 29%2 Google 75%3 YouTube 62%4 Live.com 64%5 MSN 41%6 MySpace 48%7 Wikipedia 39%8 Facebook 35%9 Blogger 27%10 Yahoo! JP 36%
Best practices1. No GIFs
2. Crush PNGs
3. Strip JPEG meta
4. Avoid truecolor PNG, use PNG8
5. Avoid AlphaImageLoader
6. Optimize and cache dynamic images
7. Combine images into sprites
Best practices – automation, lossless1. No GIFs
2. Crush PNGs
3. Strip JPEG meta
4. Avoid truecolor PNG, use PNG8
5. Avoid AlphaImageLoader
6. Optimize and cache dynamic images
7. Combine images into sprites
Top 10 sites save1. No GIFs – 20.42%
2. Crush PNGs – 16.05%
3. Strip JPEG meta – 11.85%
4. Avoid truecolor PNG, use PNG8
5. Avoid AlphaImageLoader
6. Optimize and cache dynamic images
7. Combine images into sprites
1. GIF to PNG8
2. Crush PNGs
3. Strip JPEG meta
Bonus: Optimize GIF animations
Demo: http://smushit.com/
Let’s keep talking... Nicole Sullivanhttp://stubbornella.org
Stoyan Stefanovhttp://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