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

Like this? Share it with your network

Share

Extreme Image Optimization: WebP & JPEG XR

  • 1,762 views
Uploaded 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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,762
On Slideshare
1,761
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 1

https://twitter.com 1

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