Many images, you choose

A quick overview of the different ways to serve images in modern browsers for the best performance and look.

Go fullscreen: ⌃⌥F

Many images, you choose

Giving away control

As a web designer we need to learn to give up control.

And now we don’t control what image—if any—is displayed to our users.

Users (and browsers) know best

  • Our users know what kind of images they need
  • Their browsers know the connection speed, the screen density, the screen size, etc.

We don’t know nothin’—so let the browser choose the best image for the user’s situation.

Order of image choice…

  1. Don’t use images, use CSS if it’s possible—and reasonable
  2. Use an SVG if it’s possible—and reasonable
  3. Use double-size JPGs for simplicity
  4. Use <img srcset> for better performance
  5. Use <picture> for more control

Double-size JPGs

We’ve looked at this method already: determine the max viewable size of the image & double it

  • It’s simple & straightforward
  • It’s easy to implement with no extra code
  • It doesn’t increase download times

  • It drastically increases memory usage—slower and older devices have to unpack and render an image that’s much bigger than necessary

Exact image, different resolutions

For the exact same image with different resolutions use <img srcset="">—and let the browser choose the best image

  • Requires multiple image sources
  • Requires more code

  • Doesn’t increase download times
  • Uses memory the device can handle

Give the browser a bunch of information and let it choose which image is best to display.

HTML
<!-- This is written on multiple lines for clarity only -->

<img
  srcset="images/dino-l.jpg 2500w, images/dino-m.jpg 1000w, images/dino-s.jpg 320w"
  sizes="(min-width: 60em) 50vw, 100vw"
  src="images/dino-s.jpg"
  alt="A ginormous dinosaur">

Different sizes, different crops

When you want to present different images & different croppings at different resolutions use the <picture>

  • Requires multiple image sources
  • Requires more code

  • Doesn’t increase download times
  • Uses memory the device can handle
  • Gives designers a little more control

Give the browser a bunch of information, suggest when to use each image, and let it choose which image is best to display.

HTML
<picture class="img-flex">
  <source media="(min-width: 60em)" srcset="dino-l.png">
  <source media="(min-width: 38em)" srcset="dino-m.png">
  <img src="dino-s.png" alt="A ginormous dinosaur">
</picture>
CSS
.img-flex,
.img-flex img {
  display: block;
  width: 100%;
}

If you want to really complicate things you can specify different sizes & resolutions for the <picture> tag.

HTML
<picture class="img-flex">
  <source media="(min-width: 60em)" srcset="dino-l-2x.png 2x, dino-l.png 1x">
  <source media="(min-width: 38em)" srcset="dino-m-2x.png 2x, dino-m.png 1x">
  <img srcset="dino-s-2x.png 2x, dino-s.png 1x" src="dino-s.png" alt="A ginormous dinosaur">
</picture>
Start

Many images, you choose

A quick overview of the different ways to serve images in modern browsers for the best performance and look.