Download - Extreme Image Optimization: WebP & JPEG XR

©2013 AkamaiFaster ForwardTM

EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR

Ido Safruti, Akamai

[email protected]


Images make up 61% of Page Bytes

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

http://httparchive.org/interesting.php%23bytesperpage



Images make up 65% of Page Bytes on Mobile

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






Image Bytes grew 31% in the last year

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

It’s BIGGER images

http://httparchive.org/trends.php%23bytesImg&reqImg

http://httparchive.org/trends.php%23bytesImg&reqImg


There is much to gain in image optimization

And yet…


Common Image formats – hall of fame

Lossless:

GIF – 1987

PNG – 1996

Lossy:

JPEG – 1992


Supporting a new image format is hard!

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

http://www.igvita.com/2012/12/18/deploying-new-image-formats-on-the-web/




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!


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


Web Site Performance


Its not the Size That Matters,

It’s How You Use It

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





Perceived Performance

JPEG XR supports progressive images

WebP does not (currently)


Officially: Chrome 9, IE 9, Opera 11.10


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

http://caniuse.com/webp


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




SUMMARY


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)


EXTREME IMAGE OPTIMIZATIONS

Ido Safruti

[email protected]

Thank You! Questions?