EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR

Ido Safruti, Akamai
ido@akamai.com

Faster ForwardTM

©2013 Akamai
Images make up 61% of Page Bytes

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

©2013 Akamai
Images make up 65% of Page Bytes on Mobile

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

©...
Image Bytes grew 31% in the last year

It’s not more images,

http://httparchive.org/trends.php#bytesImg&reqImg

It’s BIGG...
There is much to gain in image optimization
And yet…

Faster ForwardTM

©2013 Akamai
Common Image formats – hall of fame

Lossless:

GIF – 1987
PNG – 1996
Lossy:

JPEG – 1992

Faster ForwardTM

©2013 Akamai
Supporting a new image format is hard!

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

Faster...
2 new formats

WebP (2011)
JXR: JPEG eXtended Range (2009)
15+ years worth of technology
Lossless, Lossy,
supports alpha t...
support it). I was left with 2308 images. These images have a bias towards
graphics and UI elements with fewer photographi...
Byte savings and improved features are great but what I really care about is web
site performance. How much is using WebP ...
http://www.flickr.com/photos/patries71/1250553251/
Faster ForwardTM

©2013 Akamai
Perceived Performance

JPEG XR supports progressive images

WebP does not (currently)

Faster ForwardTM

©2013 Akamai
Faster ForwardTM

©2013 Akamai
Web Site Optimization With Browser-Specific Image Formats!

Nicholas Doyle

So, what browsers support WebP and what browser...
WebP + JPEG XR Coverage
Supported by:
- IE 10+

Chrome
Opera Mini, 1 Mobile, 0.7
Android
Opera, 0.3
Webkit, 5.4

- In theo...
Faster ForwardTM

©2013 Akamai
SUMMARY

Faster ForwardTM

©2013 Akamai
Summary

- There is much to gain by applying WebP/JXR
- One needs to apply this with care, only where appropriate!
- Suppo...
Thank You!
Questions?
EXTREME IMAGE OPTIMIZATIONS

Ido Safruti
ido@akamai.com

Faster ForwardTM

©2013 Akamai
Upcoming SlideShare
Loading in...5
×

Extreme Image Optimization: WebP & JPEG XR

1,747

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,747
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Optimizing images can really
  • Speed Index
  • Extreme Image Optimization: WebP & JPEG XR

    1. 1. EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR Ido Safruti, Akamai ido@akamai.com Faster ForwardTM ©2013 Akamai
    2. 2. Images make up 61% of Page Bytes http://httparchive.org/interesting.php#bytesperpage Faster ForwardTM ©2013 Akamai
    3. 3. Images make up 65% of Page Bytes on Mobile http://mobile.httparchive.org/interesting.php#bytesperpage Faster ForwardTM ©2013 Akamai
    4. 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. 5. There is much to gain in image optimization And yet… Faster ForwardTM ©2013 Akamai
    6. 6. Common Image formats – hall of fame Lossless: GIF – 1987 PNG – 1996 Lossy: JPEG – 1992 Faster ForwardTM ©2013 Akamai
    7. 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. 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. 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. 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. 11. http://www.flickr.com/photos/patries71/1250553251/ Faster ForwardTM ©2013 Akamai
    12. 12. Perceived Performance JPEG XR supports progressive images WebP does not (currently) Faster ForwardTM ©2013 Akamai
    13. 13. Faster ForwardTM ©2013 Akamai
    14. 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. 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. 16. Faster ForwardTM ©2013 Akamai
    17. 17. SUMMARY Faster ForwardTM ©2013 Akamai
    18. 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. 19. Thank You! Questions? EXTREME IMAGE OPTIMIZATIONS Ido Safruti ido@akamai.com Faster ForwardTM ©2013 Akamai
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×