Why img with srcset requests more than one version of the image

I have the following tag and check the network panel, I see that it does not work as I expected. I don't know if this is normal behavior for local or good testing or if something is wrong with my code:

<img sizes="
  (min-width: 300px) 300px,
  (min-width: 450px) 600px,
  (min-width: 1000px) 1200px,
  ((max-width: 450px) and (min-resolution: 2dppx)) 600px"
srcset="
  /uploaded/coso_300.jpg 300w,
  /uploaded/coso_600.jpg 600w,
  /uploaded/coso_1200.jpg 1200w,
  /uploaded/coso_2000.jpg 2000w"
src="/uploaded/coso.jpg" >

Files are selected in a widescreen window of 320 pixels in the following order:

  • coso_600.jpg> coso.jpg(I expected coso_300.jpg)

600 pixels wide:

  • same as before (I expected coso_300.jpg)

with a width of 1300 pixels:

  • coso_300.jpg> coso.jpg> coso_600.jpg(I expected coso_1200.jpg)

on a screen with a width of 2500 pixels:

  • same (i expected coso_2000.jpg)
+4
source share
1 answer

<picture>. . HTML-

<picture>
  <source 
    media="(min-width: 300px)"
    srcset="coso_300.jpg">
  <source 
    media="(min-width: 600px)"
    srcset="coso_600.jpg">
  <source 
    media="(min-width: 1200px)"
    srcset="coso_1200.jpg">
  <source 
    media="(min-width: 2000px)"
    srcset="coso_2000.jpg">
  <img 
    src="/uploaded/coso.jpg" 
    alt="Image">
</picture>
+1

Source: https://habr.com/ru/post/1673200/


All Articles