Your SlideShare is downloading. ×
Extreme Image Optimization: WebP & JPEG XR
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Extreme Image Optimization: WebP & JPEG XR

1,523
views

Published on

Velocity Europe 2013 Keynote presentation: …

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,523
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Optimizing images can really
  • Speed Index
  • Transcript

    • 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