3

When opening the following code snippet on a small browser window, a first picture appears. When said window's size augments, the latter transitions to a second picture. However, when downsizing the window again, we are stuck with picture 2.

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

How can I get browsers to switch back to picture 1 in such a situation?

j08691
  • 204,283
  • 31
  • 260
  • 272
Gabriel R
  • 97
  • 6

1 Answers1

2

It's a feature on srcset/sizes for img tag, as you can read in here

An alternative would be use picture in this case:

<picture>
  <source media="(min-width: 800px)" srcset="https://picsum.photos/800/400?image=0">
  <source media="(min-width: 700px)" srcset="https://picsum.photos/700/350?image=1">
  <source media="(min-width: 600px)" srcset="https://picsum.photos/600/300?image=2">
  <source media="(min-width: 500px)" srcset="https://picsum.photos/500/250?image=3">
  <source media="(min-width: 400px)" srcset="https://picsum.photos/400/200?image=4">
  <source media="(min-width: 300px)" srcset="https://picsum.photos/300/150?image=5">
  <source media="(min-width: 200px)" srcset="https://picsum.photos/200/100?image=6">
  <source media="(min-width: 150px)" srcset="https://picsum.photos/150/75?image=7">
  <source media="(min-width: 100px)" srcset="https://picsum.photos/100/50?image=8">
  <img src="https://picsum.photos/800/400?image=0" alt="">
</picture>

Picture is a responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format

Azametzin
  • 5,223
  • 12
  • 28
  • 46