Many images, you choose
Giving away control
As a web designer we need to learn to give up control.
- We don’t control the browser size
- We don’t control the font-size
- We don’t control the interaction method
- We don’t control the download speed
- We don’t control if JavaScript will run
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.
<!-- 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.
<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>
.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.
<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>