Velocity 2013: Extreme Image Optimization


Published on

In 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. Akamai has recently added support for these image formats, and learned a lot in the process. In this short talk, Ido will explain more about these formats and share some of our experience working with them.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Optimizing images can really
  • Speed Index
  • Velocity 2013: Extreme Image Optimization

    1. 1. EXTREME IMAGE OPTIMIZATIONS: WEBP AND JPEG XR Ido Safruti, Akamai Faster ForwardTM ©2013 Akamai
    2. 2. Images make up 61% of Page Bytes Faster ForwardTM ©2013 Akamai
    3. 3. Images make up 65% of Page Bytes on Mobile Faster ForwardTM ©2013 Akamai
    4. 4. Image Bytes grew 31% in the last year It’s not more images, 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 as a Faster ForwardTM ©2013 Akamai
    11. 11. 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 Faster ForwardTM ©2013 Akamai