©2013 Akamai Faster Forward TM EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR Ido Safruti, Akamai [email protected]
Extreme Image Optimization: WebP & JPEG XR
Dec 25, 2014
Velocity Europe 2013 Keynote presentation:
Abstract:
In the 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. In this short talk, Ido will explain more about these formats and share some of our experience working with and supporting them.
http://velocityconf.com/velocityeu2013/public/schedule/detail/33052
Abstract:
In the 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. In this short talk, Ido will explain more about these formats and share some of our experience working with and supporting them.
http://velocityconf.com/velocityeu2013/public/schedule/detail/33052
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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?
Related Documents
