Progressive image rendering

Render Conf 2017

Images on the web

To use or not to use images

Example of a background image on desktop
Same background image is mostly hidden on mobile

Optimise your images

really

Picture element and srcset

1 column 2 columns 3 columns

Illustration from WHATWG HTML spec

Combine regular images and lazy-loaded ones

IntersectionObserver

What to show while the image is loading

Alternatives

Examples of solid color

Examples of
Progressive Image Loading

Medium

How it's done

  1. Use <div> to render the image
  2. Request small thumbnail
  3. Draw thumbnail to <canvas/> and apply blur effect
  4. Request large image
  5. Render large image and hide <canvas/>

How do users perceive it?

or maybe not?

Source: wpexplorer.com/optimize-images-wordpress-guide

With the Progressive JPEG method [...] cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed.

— From Progressive image rendering: Good or evil?

Reliable?

Facebook - Inlining thumbnail image in payload

Source: The technology behind preview photos

Facebook - Inlining thumbnail image in payload

Unfortunately, the standard JPEG header is hundreds of bytes in size. In fact, the JPEG header alone is several times bigger than our entire 200-byte budget. However, excluding the JPEG header, the encoded data payload itself was approaching our 200 bytes.

Facebook - Inlining thumbnail image in payload

Header (mainly Quantization Table and Huffman Table) Compressed Data
Client (mobile app) GraphQL

Generating tiny thumbnails

JPG

  • 464 B
  • 532 B
  • 428 B
  • 409 B
  • 456 B
  • 692 B

WebP

  • 112 B
  • 154 B
  • 106 B
  • 96 B
  • 116 B
  • 202 B

Generating tiny thumbnails

JPG

  • 464 B
  • 532 B
  • 428 B
  • 409 B
  • 456 B
  • 692 B

WebP

  • 112 B
  • 154 B
  • 106 B
  • 96 B
  • 116 B
  • 202 B

Getting creative with SVGs

Source: polygon.com/a/ps4-review

How it works

More info: jakearchibald.com/2013/animated-line-drawing-svg

Drawing bitmap images

Canny Edge Detector

- We can tweak how many lines we want to generate. Eg prune short ones. Can be improved a lot.

Should we do this?

Just because you can it doesn't mean you should

Summary

  • Reduce requests
  • Choose the right format and optimise
  • Embrace responsive images
  • Try to lazy load
  • Innovate!

The Web is fun.

spotify.com/jobs

Thanks!