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

Page 2 About the presentation Image optimization for the non-designer 7 mistakes all sites make, even the big ones Trivial to correct, serious savings Easy win –improve page load time –save bandwidth –save disk space –save servers (and energy and the planet) –… without compromising quality

Page 3 About the presenter Yahoo! Exceptional Performance (research, consulting) YSlow lead developer Open Source contributor (PEAR, Firebug) Blog Articles and books author

Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.

Page 5 What % of page weight is images? Average 45.6% Not exactly half, but pretty close Your site may be different, amazon.com for example is 71% images huge potential 1Yahoo!29% 2Google75% 3YouTube62% 4Live.com64% 5MSN41% 6MySpace48% 7Wikipedia39% 8Facebook35% 9Blogger27% 10Yahoo! JP36%

Page 6 Mistake #1: Using GIF when PNG is smaller

Page 7 GIF vs. PNG GIFPalette PNG (aka PNG8, aka indexed) Truecolor PNG Number of colors 256 Up to 48bit TransparencyBoolean (on/off) Alpha (variable) * Browser support Nearly allAll A-grade (96%+) AnimationYesNo (future) * some IE < v.7 issues

PNG transparency and IE Truecolor PNG IE 7 and up IE 6 and earlier PNG8 IE 7 and up IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency

Page 9 GIF vs. PNG PNG8 can do everything a GIF can do, and more (sans cheesy Web 1.0 animations) PNG8 works across all A-Grade browsers Q: And what about the size? A: Let’s survey the top 10 sites and convert all GIFs to PNGs to check if there are savings

Page 10 GIF-to-PNG 1Yahoo!9.55% 2Google22.95% 3YouTube33.82% 4Live.com19.93% 5MSN13.53% 6MySpace17.65% 7WikipediaNo GIFs! 8Facebook17.47% 9Blogger24.27% 10Yahoo! JP24.58% Average 20.42% savings

Page 11 Take away #1: Choose PNG over GIF LOSSLESS!

Page 12 Mistake #2: Not crushing PNGs

Page 13 About the PNG chunks PNGs store information in "chunks" Most chunks can safely be deleted Most image programs DO NOT optimize Command line tools: –pngcrush –pngrewrite –OptiPNG –PNGOut Example: > pngcrush -rem alla -brute -reduce src.png dest.png

Page 14 Crush top 10 and check for savings 1Yahoo!15.52% 2Google Reader22.60% 3YouTube17.32% 4Live.comNo PNGs 5MSNNo PNGs 6MySpace25.44% 7Wikipedia21.32% 8Facebook9.08% 9Blogger1.07% 10Yahoo! JPNo PNGs Average 16.05% savings

Page 15 Take away #2: Crush your PNGs LOSSLESS!

Page 16 Mistake #3: Not stripping JPEG metadata

Page 17 JPEG metadata Comments EXIF –camera information –thumbnail! –audio!?! –… Application specific (e.g. Photoshop)

Page 18 Lossless JPEG operations jpegtran ( Free command-line tool Loseless operations such as crop, rotate You probably have it installed already Example: > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Page 19 Running jpegtran on top 10 sites 1Yahoo!2.62% 2GoogleNo jpegs 3YouTube10.71% 4Live.com0.47% 5MSN7.43% 6MySpace4.28% 7WikipediaNo jpegs 8Facebook13.59% 9Blogger38.35% 10Yahoo! JP17.31% Average 11.85% savings

Page 20 Take away #3: Strip needless JPEG metadata LOSSLESS!

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

Page 22 Truecolor vs. palette PNGs Palette PNGs (PNG8) have 256 colors Truecolor PNGs could have millions In practice, truecolor PNGs often have less than 1000 colors Otherwise it would mean they are photos and should be JPEGs Human eye is not that sensitive

Page 23 Truecolor vs. palette PNGs Convert truecolor to palette How about 50% savings? Solves IE<7’s little alpha transparency problem Warning 1: LOSSY –But no one will ever know Warning 2: automation is hard when there’s alpha

Page 24 Truecolor vs. palette PNGs Command-line tools: pngquant ( pngnq ( Example: > pngquant 256 src.png

Page 25 Take away #4: Make all PNGs palette PNGs * * but manually check the result (or wait for someone to complain, chances are you'll be waiting in vain ;)

Page 26 Mistake #5: Using CSS alpha filters

Page 27 CSS filters Back to the problem with truecolor PNG alpha transparency in earlier IEs AlphaImageLoader CSS filter to fix the issue IE proprietary Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! CSS code for sprites becomes messy

Page 28 Avoid filters Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users Yahoo! Search saved ms for users of IE5&6

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

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

Page 31 Dynamically generated images GD library doesn't do what pngcrush does Generated images are bigger From big to small: generated GIF > generated PNG > crushed PNG Server resources on every request

Page 32 Recipe for generated images 1st request: generate write to disk pngcrush serve 2nd request: serve cached Estimate 5-30% savings

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

Page 34 Case study: Google charts API Original (1408 colors)Crushed (1408 colors)PNG8 (256 colors) 25% saving55% saving (1000+ colors are lost but who can tell?)

Page 35 Take away #6: Crush generated images LOSSLESS!

Page 36 Mistake #7: Not combining images

Page 37 CSS Sprites … CSS: HTML:

Page 38 CSS Sprites Size of the combined image is usually less You save HTTP requests Article: Tool:

Page 39 Optimizing sprites

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

Page 41 Bonus mistake: Improper favicon.ico Necessary evil: –The browser will request it –Better not respond with a 404 –Cookies are sent –Cannot be on CDN –Interferes with the download sequence Make it small (<= 1K) Animated favicons are not cool Set Expires header (but not “forever”) Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views

Page 42 Bonus mistake #2: serving images from your app server Option 1: use a CDN Option 2: setup a static server –stripped down Apache or LightTPD –no libraries, no PHP, no Perl, etc –serve images (and other static components) –request -> find on disk -> serve –"Never expires" policy –no cookies

Page 43 Wrapping up You can save 10-30% in unnecessary image size!

Page 44 URLs – Exceptional Performance YUI blog YDN (Yahoo Developer Network) YDN blog Mailing list (Yahoo! Group) performance/ Feedback

Page 45 Thank you!

Page 46 Credits Apolo 17 Full-Earth Photographhttp://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ W3C PNG Alpha Testhttp:// PNG8 - The Clear Winnerhttp://