Loading images progressively

Previously on

Web Performance Logo

Who am I?

  • A web developer

To use or not to use images

Optimising images

Best image format

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 content is loading

Example

Alternatives

Examples of solid color

Examples of
Progressive Image Loading

Medium

How it's done

  1. Render div
  2. Load small thumbnail
  3. Draw image 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?

When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, 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?

What effect does it have on RSS Readers and bots?

Facebook

The technology behind preview photos

Facebook

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

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

How it works

Drawing bitmap images

Canny Edge Detector

Drawing bitmap images

Source: jmperezperez.com/contour
- 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

The Web is fun.

Thanks!