$30 off During Our Annual Pro Sale. View Details »

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.

Tobias Baldauf

June 13, 2018
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

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

    View Slide

  2. Tobias Baldauf
    @tbaldauf
    [email protected]
    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
    [email protected]
    21

    View Slide