Extreme Image Optimization: WebP & JPEG XR

©2013 AkamaiFaster ForwardTM

EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR

Ido Safruti, Akamai

ido@akamai.com

©2013 AkamaiFaster ForwardTM

Images make up 61% of Page Bytes

http://httparchive.org/interesting.php#bytesperpage

©2013 AkamaiFaster ForwardTM

Images make up 65% of Page Bytes on Mobile

http://mobile.httparchive.org/interesting.php#bytesperpage

©2013 AkamaiFaster ForwardTM

Image Bytes grew 31% in the last year

http://httparchive.org/trends.php#bytesImg&reqImg It’s not more images,

It’s BIGGER images

©2013 AkamaiFaster ForwardTM

There is much to gain in image optimization

And yet…

©2013 AkamaiFaster ForwardTM

Common Image formats – hall of fame

Lossless:

GIF – 1987

PNG – 1996

Lossy:

JPEG – 1992

©2013 AkamaiFaster ForwardTM

Supporting a new image format is hard!

Ilya Grigorik:Deploying new image formats on the Web is HARD (but doable)

©2013 AkamaiFaster ForwardTM

2 new formats

WebP (2011)

JXR: JPEG eXtended Range (2009)

15+ years worth of technology

Lossless, Lossy,

supports alpha transparency both with lossless and lossy

Supported by Akamai today!

©2013 AkamaiFaster ForwardTM

Improvement over JPEG

Sample of 2308 Images from top 100 sites’ homepage

* Varies per image – some images may be larger than JPEG

Similar improvement measured for lossless over PNG

©2013 AkamaiFaster ForwardTM

Web Site Performance

©2013 AkamaiFaster ForwardTM

Its not the Size That Matters,

It’s How You Use It

http://www.flickr.com/photos/patries71/1250553251/

©2013 AkamaiFaster ForwardTM

Perceived Performance

JPEG XR supports progressive images

WebP does not (currently)

©2013 AkamaiFaster ForwardTM

©2013 AkamaiFaster ForwardTM

Officially: Chrome 9, IE 9, Opera 11.10

©2013 AkamaiFaster ForwardTM

WebP + JPEG XR Coverage

Supported by:- IE 10+

- In theory IE 9 too

- Chrome 23+- In theory 9+

- Android 4+- Opera 12+- Opera Mobile 11.1+

WebP –or– JPEG XR Supported on ~ 50% of clients

Chrome; 19.5

Android Webkit; 5.4

Opera Mini; 1Chrome Mobile; 0.7

Opera; 0.3

IE 9; 13.2258

IE 8; 10.1706

IE 10; 9.6882

IE 7; 6.1908 Other; 0.9246

©2013 AkamaiFaster ForwardTM

Dealing with interoperability ...

Link sharing

Save As

http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/

April 22, 2013

©2013 AkamaiFaster ForwardTM

SUMMARY

©2013 AkamaiFaster ForwardTM

Summary

- There is much to gain by applying WebP/JXR- One needs to apply this with care, only where appropriate!

- Supported browsers- When optimization is better

- Interoperability comes in many flavors – prepare for them- Size isn’t the only thing that matters: progressive gives a

better perceived performance

- More in the performance calendar (Dec 2013)

©2013 AkamaiFaster ForwardTM

EXTREME IMAGE OPTIMIZATIONS

Ido Safruti

ido@akamai.com

Thank You! Questions?