Image Optimization: 7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]

About the presenter Yahoo! performance team member YSlow architect, dev lead Book author, open-source contributor Blog: http:// phpied.com

Yahoo! performance team member

YSlow architect, dev lead

Book author, open-source contributor

Blog: http:// phpied.com

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% some say 50%+ amazon.com is 71% 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%

some say 50%+

amazon.com is 71%

huge potential

GIF vs. PNG8 vs. truecolor PNG PNG8 is like GIF, only: Usually smaller Supports alpha transparency (in IE < 7 gracefully degrading to GIF-like boolean transparency) No animations

PNG8 is like GIF, only:

Usually smaller

Supports alpha transparency (in IE < 7 gracefully degrading to GIF-like boolean transparency)

No animations

All we are saying is: “Give PiNG a chance!” JPEG is for photos GIF for animations PNG for everything else: icons, backgrounds, graphs…

JPEG is for photos

GIF for animations

PNG for everything else: icons, backgrounds, graphs…

Mistake #1: Using GIF when PNG is smaller Solution: Convert GIFs to PNG Lossless operation Top 10 sites save 20.42%

Solution:

Convert GIFs to PNG

Lossless operation

Top 10 sites save 20.42%

Mistake #2: Not crushing PNGs Remove unneded PNG “chunks” Example lossless solution: > pngcrush -rem alla -brute -reduce src.png dest.png Top 10 sites save 16.05%

Remove unneded PNG “chunks”

Example lossless solution:

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

Top 10 sites save 16.05%

Mistake #3: Not stripping JPEG metadata Comments, EXIF (camera info)… Example lossless solution: > jpegtran -copy none -optimize src.jpg dest.jpg Top 10 sites would save 11.85%

Comments, EXIF (camera info)…

Example lossless solution:

> jpegtran -copy none -optimize src.jpg dest.jpg

Top 10 sites would save 11.85%

Mistake #4: Using truecolor PNG instead of PNG8 256 colors vs. thousands or millions? Human eye is not that sensitive Solves the transparency problem in IE < 7 Warning: lossy > pngquant 256 image.png

256 colors vs. thousands or millions?

Human eye is not that sensitive

Solves the transparency problem in IE < 7

Warning: lossy

> pngquant 256 image.png

Mistake #5: Using AlphaImageLoader AlphaImageLoaders fixes transparency issue with truecolor PNGs in IE < 7 Problems: blocks rendering, freezes the browser, costs memory, per element (not per image), IE-proprietary

AlphaImageLoaders fixes transparency issue with truecolor PNGs in IE < 7

Problems: blocks rendering, freezes the browser, costs memory, per element (not per image), IE-proprietary

Mistake #5: solution Best: avoid, use PNG8 Fallback: use underscore hack _filter , so IE7+ users are not penalized Yahoo! Search saved 50-100ms for IE5&6 users

Best: avoid, use PNG8

Fallback: use underscore hack _filter , so IE7+ users are not penalized

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

Mistake #6: serving dynamically generated images “as is” generated GIF > generated PNG > crushed PNG server resources on every request solution: 1 st request: generate, write, crush 2 nd request: serve cached 5-30% savings

generated GIF > generated PNG > crushed PNG

server resources on every request

solution:

1 st request: generate, write, crush

2 nd request: serve cached

5-30% savings

Mistake #7: Not combining images HTTP requests are expensive Use CSS sprites …

HTTP requests are expensive

Use CSS sprites

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

55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)

Demo…

Thank you!

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

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

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