Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Your Hero Images Need You! Save the Day with HT...

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - Akamai Edge Conference 2016

Images are a crucial component of all websites: they evoke emotions and prompt actions. They also form 64% of website data & have the highest correlation to page load time. While modern image compression techniques can alleviate some of the negative impact of image loading, key web performance metrics such as Speed Index and Time To Interact suffer from our need for images.

With HTTP2, we have a powerful tool at our disposal to address these issues for image loading. We will explore the details of HTTP2’s multiplexing in depth and how we can leverage it to address image loading. As our images need to be optimized to maximize the benefits of image delivery over HTTP2, we will learn how to take granular control of the encoding process for progressive or interlaced images. This will directly influence the Speed Index and our users emotional response time to page visuals. To further optimize for high performance images, we will look at compatible image compression techniques.

Using HTTP2-powered high performance images will increase the perceived performance of your page, reduce load times and drive conversions.

--------------------------------------

The version of this talk was given at Akamai Edge Conference 2016 in San Francisco on 20161018.

Tobias Baldauf

October 18, 2016
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. Default Scan Layers Thanks to Frédéric Kayser for creating 'jsk':

    http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 26 / 75 — © AKAMAI-EDGE 2016
  2. Site A displays 7.4x faster than Site B more info

    at https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 47 / 75 — © AKAMAI-EDGE 2016
  3. // Prioritize a progressive JPEG's metadata and scan levels //

    with minimal 'calm' => maximum priority <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!0"> // Create a cumulative cascade of 'calm' // for a progressive JPEG's metadata and scan levels // Each new value is added to the sum, lowering priority per scan layer <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!100,50,20"> 65 / 75 — © AKAMAI-EDGE 2016