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

Fake It 'Til You Make It - Prerendering Image C...

Fake It 'Til You Make It - Prerendering Image Contents For Fun & Profit

Images weigh heavy on our users: they evoke emotions and prompt actions, but they also make up 2/3rds of all website data. Of the median 1700kb of website data, 900kb is taken up by images.

Some of the key web performance metrics for successful conversions, such as Speed Index, Time To First Meaningful Interaction and Page Load Time suffer from our need for images. To ensure a good user experience, we have to optimize for perceived performance.

In this session, we will explore several image rendering techniques developed to render image contents as soon as possible so that perceived performance increases and the user experience is positive. These techniques will help us to engage users earlier, leading to lower bounce rates and higher conversions.

Tobias Baldauf

June 13, 2018
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. What You'll Learn Tonight 1. How to create optimized progressive

    JPEGs 2. How to use image placeholders, esp. SQIP 3
  2. The Scans File 0,1,2: 0-0, 0, 1 ; 0: 1-27,

    0, 0 ; 2: 1-63, 0, 0 ; 1: 1-63, 0, 0 ; 0: 28-63, 0, 0 ; 10
  3. Placeholder Images → Preview of image contents → Fewer reflows

    during page rendering → Great for lazyloading 15
  4. TakeAways → Take control of progressive JPEG rendering contents →

    Generate beautiful placeholder images and lazyload 19