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
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