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 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

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

About the presenter Yahoo! Exceptional Performance (research, consulting) YSlow lead developer Open Source contributor (PEAR, Firebug) Blog http://www.phpied.com Articles and books author

Yahoo! Exceptional Performance (research, consulting)

YSlow lead developer

Open Source contributor (PEAR, Firebug)

Blog http://www.phpied.com

Articles and books author

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

Q: Is this really important?

A: Let’s survey

the global

top 10 sites.

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 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

Average 45.6%

Not exactly half, but pretty close

Your site may be different, amazon.com for example is 71% images

huge potential

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 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

Truecolor PNG

IE 7 and up IE 6 and earlier

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

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

GIF-to-PNG Average 20.42% savings 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

Average 20.42% savings

Take away #1: Choose PNG over GIF LOSSLESS!

Mistake #2: Not crushing PNGs

About the PNG chunks PNGs store information in &quot;chunks&quot; Most chunks can safely be deleted Most image programs DO NOT optimize Command line tools: 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 Example: > pngcrush -rem alla -brute -reduce src.png dest.png

PNGs store information in &quot;chunks&quot;

Most chunks can safely be deleted

Most image programs DO NOT optimize

Command line tools:

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

Example:

> pngcrush -rem alla -brute -reduce src.png dest.png

Crush top 10 and check for savings Average 16.05% savings 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

Average 16.05% savings

Take away #2: Crush your PNGs LOSSLESS!

Mistake #3: Not stripping JPEG metadata

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

Comments

EXIF

camera information

thumbnail !

audio !?!

…

Application specific (e.g. Photoshop)

Lossless JPEG operations jpegtran ( http:// jpegclub.org / ) 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

jpegtran ( http:// jpegclub.org / )

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

Running jpegtran on top 10 sites Average 11.85% savings 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

Average 11.85% savings

Take away #3: Strip needless JPEG metadata LOSSLESS!

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

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

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

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

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

Truecolor vs. palette PNGs Command-line tools: pngquant ( http:// www.libpng.org/pub/png/apps/pngquant.html ) pngnq ( http:// pngnq.sourceforge.net / ) Example: > pngquant 256 src.png

Command-line tools:

pngquant ( http:// www.libpng.org/pub/png/apps/pngquant.html )

pngnq ( http:// pngnq.sourceforge.net / )

Example:

> pngquant 256 src.png

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 ;)

* but manually check the result

(or wait for someone to complain, chances are you'll be waiting in vain ;)

Mistake #5: Using CSS alpha filters

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

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

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

Best: Avoid completely, use gracefully degrading PNG8

Fallback: use underscore hack _filter not to penalize IE7+ users

Yahoo! Search saved 50-100ms for users of IE5&6

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

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

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

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

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

1st request:

generate

write to disk

pngcrush

serve

2nd request:

serve cached

Estimate 5-30% savings

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 CSS: HTML: …

CSS Sprites Size of the combined image is usually less You save HTTP requests Article: http://alistapart.com/articles/sprites Tool: http://csssprites.com

Size of the combined image is usually less

You save HTTP requests

Article: http://alistapart.com/articles/sprites

Tool: http://csssprites.com

Optimizing sprites

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

Bonus mistake: Improper favicon.ico www.example.org/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

www.example.org/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

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 &quot;Never expires&quot; policy no cookies

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

&quot;Never expires&quot; policy

no cookies

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

You can save 10-30% in unnecessary image size!

URLs – Exceptional Performance YUI blog http:// yuiblog.com /blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http:// developer.yahoo.net /blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/ Feedback http:// developer.yahoo.com/yslow/feedback.html

YUI blog

http:// yuiblog.com /blog/category/performance/

YDN (Yahoo Developer Network)

http://developer.yahoo.com/performance/

YDN blog

http:// developer.yahoo.net /blog/archives/performance/

Mailing list (Yahoo! Group)

http://tech.groups.yahoo.com/group/exceptional-performance/

Feedback

http:// developer.yahoo.com/yslow/feedback.html

Thank you! [email_address] [email_address]

Credits http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner

http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph

http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test

http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner