Yahoo - Web Images optimization
•Download as PPT, PDF•
5 likes•1,384 views
The document discusses 7 common mistakes made with image optimization on websites and how to correct them. These mistakes include using GIF files when PNG would be smaller, not optimizing PNG files to remove unnecessary metadata, not stripping metadata from JPEG files, using truecolor PNGs when palette PNGs would suffice, using CSS filters instead of optimized image formats, serving dynamically generated images without optimization, and not combining images into CSS sprites. The document provides examples and case studies demonstrating the potential file size savings from optimizing images.
![Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]](https://image.slidesharecdn.com/image-optimization-how-many-of-these-7-mistakes-are-you-making-presentation-1217423346120538-8/85/Yahoo-Web-Images-optimization-1-320.jpg)
![About the presentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Yahoo - Web Images optimization
Similar to Yahoo - Web Images optimization (20)
Recently uploaded
Recently uploaded (20)
Yahoo - Web Images optimization
- 1. Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]
- 6. Mistake #1: Using GIF when PNG is smaller
- 7. GIF vs. PNG * some IE < v.7 issues No (future) No (future) Yes Animation All A-grade (96%+) All A-grade (96%+) Nearly all Browser support Alpha (variable) * Alpha (variable) * Boolean (on/off) Transparency Up to 48bit 256 256 Number of colors Truecolor PNG Palette PNG (aka PNG8, aka indexed) GIF
- 11. Take away #1: Choose PNG over GIF LOSSLESS!
- 12. Mistake #2: Not crushing PNGs
- 15. Take away #2: Crush your PNGs LOSSLESS!
- 16. Mistake #3: Not stripping JPEG metadata
- 20. Take away #3: Strip needless JPEG metadata LOSSLESS!
- 21. Mistake #4: Using truecolor PNGs when palette PNG is good enough
- 26. Mistake #5: Using CSS alpha filters
- 29. Take away #5: Avoid AlphaImageLoader , try PNG8 or at least _filter
- 30. Mistake #6: Serve generated images “as-is”
- 33. Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
- 34. Case study: Google charts API 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
- 35. Take away #6: Crush generated images LOSSLESS!
- 36. Mistake #7: Not combining images
- 37. CSS Sprites CSS: HTML: …
- 40. Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)
- 45. Thank you! [email_address] [email_address]
Editor's Notes
- S