Yahoo - Web Images optimization

Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]

About the presentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

About the presenter ,[object Object],[object Object],[object Object],[object Object],[object Object]

Hmm, images? ,[object Object],[object Object],[object Object],[object Object]

What % of page weight is images? ,[object Object],[object Object],[object Object],[object Object],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

Mistake #1: Using GIF when PNG is smaller

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

PNG transparency and IE ,[object Object],[object Object],PNG8 IE 7 and up IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency

GIF vs. PNG ,[object Object],[object Object],[object Object],[object Object]

GIF-to-PNG ,[object Object],24.58% Yahoo! JP 10 24.27% Blogger 9 17.47% Facebook 8 No GIFs! Wikipedia 7 17.65% MySpace 6 13.53% MSN 5 19.93% Live.com 4 33.82% YouTube 3 22.95% Google 2 9.55% Yahoo! 1

Take away #1: Choose PNG over GIF LOSSLESS!

About the PNG chunks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Crush top 10 and check for savings ,[object Object],No PNGs Yahoo! JP 10 1.07% Blogger 9 9.08% Facebook 8 21.32% Wikipedia 7 25.44% MySpace 6 No PNGs MSN 5 No PNGs Live.com 4 17.32% YouTube 3 22.60% Google Reader 2 15.52% Yahoo! 1

Take away #2: Crush your PNGs LOSSLESS!

Mistake #3: Not stripping JPEG metadata

JPEG metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Lossless JPEG operations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Running jpegtran on top 10 sites ,[object Object],17.31% Yahoo! JP 10 38.35% Blogger 9 13.59% Facebook 8 No jpegs Wikipedia 7 4.28% MySpace 6 7.43% MSN 5 0.47% Live.com 4 10.71% YouTube 3 No jpegs Google 2 2.62% Yahoo! 1

Take away #3: Strip needless JPEG metadata LOSSLESS!

Mistake #4: Using truecolor PNGs when palette PNG is good enough

Truecolor vs. palette PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object]

Truecolor vs. palette PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Take away #4: Make all PNGs palette PNGs * ,[object Object],[object Object]

Mistake #5: Using CSS alpha filters

CSS filters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Avoid filters ,[object Object],[object Object],[object Object]

Take away #5: Avoid AlphaImageLoader , try PNG8 or at least _filter

Mistake #6: Serve generated images “as-is”

Dynamically generated images ,[object Object],[object Object],[object Object],[object Object]

Recipe for generated images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)

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)

Take away #6: Crush generated images LOSSLESS!

Mistake #7: Not combining images

CSS Sprites ,[object Object],[object Object],[object Object],[object Object]

Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)

Bonus mistake: Improper favicon.ico ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Bonus mistake #2: serving images from your app server ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

URLs – Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Thank you! [email_address] [email_address]

Credits ,[object Object],[object Object],[object Object]

Yahoo - Web Images optimization

Yahoo - Web Images optimization

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

Editor's Notes