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.

Transcript

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

   View Slide

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

   View Slide

3. What You'll Learn Tonight
   1. How to create optimized progressive JPEGs
   2. How to use image placeholders, esp. SQIP
   3
   

   View Slide

4. The Problem:
   Sequential Image Rendering
   4
   

   View Slide

5. Remedy #1:
   Progressive JPEGs
   5
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
    

    View Slide

11. Remedy #3:
    Optimized Progressive JPEGs on HTTP2
    11
    

    View Slide

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
    

    View Slide

13. Downsides
    → Blocky initial impression
    → Only works for images that support progressive
    en-/decoding
    13
    

    View Slide

14. Remedy #4:
    Placeholder Images
    14
    

    View Slide

15. Placeholder Images
    → Preview of image contents
    → Fewer reflows during page rendering
    → Great for lazyloading
    15
    

    View Slide

16. LQIP 4
    4 https://is.gd/lqips
    16
    

    View Slide

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

    View Slide

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

    View Slide

19. TakeAways
    → Take control of progressive JPEG rendering
    contents
    → Generate beautiful placeholder images and
    lazyload
    19
    

    View Slide

20. THANK YOU!
    20
    

    View Slide

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

    View Slide