velocity 2013: extreme image optimization
DESCRIPTION
In last 4 years, two new image formats were added to the web technology arsenal -- WebP & JPEG XR. These image formats are far superior to their predecessors, but unfortunately are only supported by very specific browsers, and aren't always easy to generate. Akamai has recently added support for these image formats, and learned a lot in the process. In this short talk, Ido will explain more about these formats and share some of our experience working with them.TRANSCRIPT
©2013 AkamaiFaster ForwardTM
EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR
Ido Safruti, Akamai
©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
Thank You! Questions?