extreme image optimization: webp & jpeg xr
Post on 25-Dec-2014
1.325 Views
Preview:
DESCRIPTION
TRANSCRIPT
©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?
top related