Many images, you choose · Web Dev 3

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…

Don’t use images, use CSS if it’s possible—and reasonable
Use an SVG if it’s possible—and reasonable
Use double-size JPGs for simplicity
Use <img srcset> for better performance
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">

HTML: Line C

First tell the browser about what images are available: the srcset attribute is a list of images & their width in pixels.

This srcset attribute says:

There’s a 2500px wide image named “dino-l.jpg”
There’s a 1000px wide image named “dino-m.jpg”
And here’s a 320px wide image named “dino-s.jpg”

Always put the biggest first—the browser will stop when it finds an image the fits best—so we always show the best available image.

HTML: Line D

Second tell the browser what sizes this image will be displayed at, using media queries.

This sizes attribute says:

When the browser is wider than 60em, the image will be displayed at half with window’s width
The rest of the time it will be displayed at full window width

Start with the largest screen size and work backwards—opposite to how we write CSS.

HTML: Line E

Still provide the basic src attribute for browsers that don’t support srcset and they’ll still show an image.

But make sure this is always the smallest image possible.

HTML: Line F

Don’t forget a descriptive alt attribute!

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%;
}

HTML: Line B

Start with the largest image possible, providing the media query where it should be shown and the image name.

HTML: Line C

Add any other sizes that you’ve got, decreasing in size as you go down the code.

The first one that matches will be chosen, so we want the biggest matching one to display.

HTML: Line D

Finish off with a standard <img> tag. This is the fallback, the smallest image, and provides the alternative text for the whole <picture> element.

CSS: Line B

When dealing with the picture tag we must also style the <img> tag inside for property scaling.

If you use Modulifier’s .img-flex class, this is already built in.

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>

Giving away control

Users (and browsers) know best

Order of image choice…

Double-size JPGs

Exact image, different resolutions

Different sizes, different crops

Videos & tutorials