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

1. EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR
Ido Safruti, Akamai
ido@akamai.com
Faster ForwardTM
©2013 Akamai

2. Images make up 61% of Page Bytes
http://httparchive.org/interesting.php#bytesperpage
Faster ForwardTM
©2013 Akamai

3. Images make up 65% of Page Bytes on Mobile
http://mobile.httparchive.org/interesting.php#bytesperpage
Faster ForwardTM
©2013 Akamai

4. Image Bytes grew 31% in the last year
It’s not more images,
http://httparchive.org/trends.php#bytesImg&reqImg
It’s BIGGER images
Faster ForwardTM
©2013 Akamai

5. There is much to gain in image optimization
And yet…
Faster ForwardTM
©2013 Akamai

6. Common Image formats – hall of fame
Lossless:
GIF – 1987
PNG – 1996
Lossy:
JPEG – 1992
Faster ForwardTM
©2013 Akamai

7. Supporting a new image format is hard!
Ilya Grigorik:
Deploying new image
formats on the Web is
HARD (but doable)
Faster ForwardTM
©2013 Akamai

8. 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!
Faster ForwardTM
©2013 Akamai

9. support it). I was left with 2308 images. These images have a bias towards
graphics and UI elements with fewer photographic images; this bias represents
Improvement most JPEG
typical images on over web sites. I recompressed the images using all three
formats at DSSIM values of 0.15, 0.10 and 0.05. These DSSIM values produce
images with a perceptual quality suitable for the web. From these file I observed
the following results:
Sample of 2308 Images from top 100 sites’ homepage
DSSIM
0.15
Average
improvement over
JPEG filesize
0.10
0.05
WebP
%56.57
%51.58
%40.11
JPEG XR
%26.74
%29.10
%27.67
These are great averages. I will mention that there was a decent amount of
Similar improvement measured for lossless over PNG
variance; WebP and JPEG XR were almost always smaller than JPEG but there
were cases where JPEG images were smaller. WebP’s stronger compression over
* Varies per image some images may be larger than JPEG
JPEG XR can likely be attributed to the fact that it –always uses 4:2:0 chroma
subsampling for lossy compression whereas JPEG XR may, in addition, use 4:2:2
or 4:4:4 chroma subsampling instead depending on the quality parameter given to Akamai
Faster Forward
©2013
TM

10. Byte savings and improved features are great but what I really care about is web
site performance. How much is using WebP or JPEG XR going to speed up my
site? Web Site Performance test case:
I used www.gilt.com as a
Faster ForwardTM
©2013 Akamai

11. http://www.flickr.com/photos/patries71/1250553251/
Faster ForwardTM
©2013 Akamai

12. Perceived Performance
JPEG XR supports progressive images
WebP does not (currently)
Faster ForwardTM
©2013 Akamai

13. Faster ForwardTM
©2013 Akamai

14. Web Site Optimization With Browser-Specific Image Formats!
Nicholas Doyle
So, what browsers support WebP and what browsers support JPEG XR? While
investigating these two formats I discovered that getting a straight answer to this
question is harder than it would seem. I’ve seen lots of tables showing varying
levels of support but I don’t think I’ve found one that is actually correct. Here is
what I have discovered anecdotally for major desktop browsers:
WebP
JPEG XR
Chrome
>= 23
NO
Firefox
NO
NO
Internet Explorer
NO
>= 10
Safari
NO
NO
Opera
>= 12.1
NO
For JPEG XR support, the answer is mostly clear; it’s supported only in Internet
Explorer. If you look around, though, most people are saying that Internet Explorer
9 has JPEG XR support; this is only partially true and not at all true for actually
useful scenarios. The problem with Internet Explorer 9 is that, while it can show
JPEG XR 9, Opera 11.10
Officially: Chrome 9, IE images, it doesn’t show them correctly. Every JPEG XR image I’ve seen
in Internet Explorer 9 displays with a dark halo around its edges; this anomaly isn’t
present viewing the same images in Internet Explorer 10. This makes using JPEG
XR images effectively useless for most scenarios in Internet Explorer 9.
Faster ForwardTM
©2013 Akamai

15. WebP + JPEG XR Coverage
Supported by:
- IE 10+
Chrome
Opera Mini, 1 Mobile, 0.7
Android
Opera, 0.3
Webkit, 5.4
- In theory IE 9 too
-
Chrome 23+
- In theory 9+
-
IE 8, 10.2
Android 4+
Opera 12+
Opera Mobile 11.1+
WebP –or– JPEG XR
Supported on ~ 50%
of clients
IE, 40.2
IE 10, 9.7
IE 9, 13.2
IE 7, 6.2
Other, 0.9
Chrome, 19.5
Faster ForwardTM
©2013 Akamai

16. Faster ForwardTM
©2013 Akamai

17. SUMMARY
Faster ForwardTM
©2013 Akamai

18. 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)
Faster ForwardTM
©2013 Akamai

19. Thank You!
Questions?
EXTREME IMAGE OPTIMIZATIONS
Ido Safruti
ido@akamai.com
Faster ForwardTM
©2013 Akamai