images - 7 mistakes
TRANSCRIPT
![Page 1: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/1.jpg)
Image Optimization: Image Optimization: 7 mistakes7 mistakesNicole Sullivan, Stoyan StefanovAjax Experience Boston, Sep 30th, 2008
![Page 2: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/2.jpg)
On the agenda
• 7 best practices
• demo
![Page 3: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/3.jpg)
Images?
![Page 4: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/4.jpg)
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%
![Page 5: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/5.jpg)
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
![Page 6: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/6.jpg)
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
![Page 7: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/7.jpg)
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
![Page 8: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/8.jpg)
1. GIF to PNG8
2. Crush PNGs
3. Strip JPEG meta
Bonus: Optimize GIF animations
![Page 9: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/9.jpg)
Demo: http://smushit.com/
![Page 10: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/10.jpg)
Let’s keep talking... Nicole Sullivanhttp://stubbornella.org
Stoyan Stefanovhttp://phpied.com
![Page 11: Images - 7 mistakes](https://reader035.vdocument.in/reader035/viewer/2022081520/58ecb0231a28abbd428b45fb/html5/thumbnails/11.jpg)
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