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

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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

June 13, 2018
Tweet

Transcript

  1. Fake It 'Til You Make It Prerendering Image Contents For

    Fun & Profit 1
  2. Tobias Baldauf @tbaldauf mail@tobias.is 2

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

    JPEGs 2. How to use image placeholders, esp. SQIP 3
  4. The Problem: Sequential Image Rendering 4

  5. Remedy #1: Progressive JPEGs 5

  6. mozjpeg -quality 75 -outfile output.jpg input.jpg 1 1 see https://is.gd/mozjpeg

    6
  7. Remedy #2: Optimized Progressive JPEGs 2 2 see https://is.gd/opjpegs and

    https://is.gd/jpegscans 7
  8. mozjpeg -scans scans.txt -outfile output.jpg input.jpg 8

  9. mozjpeg -scans scans.txt -outfile output.jpg input.jpg 9

  10. 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
  11. Remedy #3: Optimized Progressive JPEGs on HTTP2 11

  12. Automate it! 3 3 Example: https://cloudinary.example.com/f_auto,q_auto,fl_progressive:semi/photo.jpg Also see https://is.gd/cloudinary 12

  13. Downsides → Blocky initial impression → Only works for images

    that support progressive en-/decoding 13
  14. Remedy #4: Placeholder Images 14

  15. Placeholder Images → Preview of image contents → Fewer reflows

    during page rendering → Great for lazyloading 15
  16. LQIP 4 4 https://is.gd/lqips 16

  17. SQIP 5 5 https://is.gd/sqip_intro and https://is.gd/sqip_code 17

  18. SQIP + LazyLoading = <3 6 6 https://is.gd/sqip_lazyload and https://is.gd/int_ob

    18
  19. TakeAways → Take control of progressive JPEG rendering contents →

    Generate beautiful placeholder images and lazyload 19
  20. THANK YOU! 20

  21. Tobias Baldauf @tbaldauf mail@tobias.is 21