0

I am trying to make show a different image size according to the device's viewport. In my specific case, I want to show an small image for viewports narrower than 600px and a bigger image for viewports larger than 600px.

Here is the code I came up with but doesn't seem to work:

<IMG srcset="small.png 400w, big.png 700w" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">

I have tested it with different devices and with Chrome developer tools, but no matter the size of the viewport, I always get the big image shown (the one named big.png).

Here is a live example of it: https://www.virtualsheetmusic.com/test-img.html

Any ideas?

Fabrizio Ferrari
  • 869
  • 2
  • 12
  • 25
  • Be careful with the chrome developer tools, unless youre setting your DPR to 1 it most likely will use a higher DPR and automatically load things in double (or even triple) resoluation. – Fabian S. Oct 28 '21 at 13:40
  • ok, but what if I want to show the small image no matter the resolution? Is that possible? And if so, how? Thanks. – Fabrizio Ferrari Oct 28 '21 at 13:45
  • Your definition is correct, however while using srcset and sizes you cant actually force anything. What youre doing is providing the browser with different images (srcset) and tell it how big your image actually shows on the page (sizes). Everything else is up to the browser. For example if you already loaded the bigger image, the browser wont load the smaller image as it already has a suitable one and does not load another one which is smaller resolution. – Fabian S. Oct 28 '21 at 13:47
  • Actually when testing your example with chrome devtools and DPR 1 it does work correctly loading the small.png up until 600px width and then loads the big.png once youre on at least 601px width. – Fabian S. Oct 28 '21 at 13:48
  • Ive added a detailed answer on how i believe to properly test your code. – Fabian S. Oct 28 '21 at 13:56
  • Thank you guys! So... is there any other way to "force" the browser to use the smaller image instead, based on the viewport size no matter the resolution? – Fabrizio Ferrari Oct 28 '21 at 14:00

1 Answers1

1

Your code works perfectly fine.

I think youre maybe testing wrong. Check for the DPR Setting in your devtools:

enable DPR setting

Make sure its set to "1":

DPR Setting set

Once using that settings youll see everything works fine:

<=600px

600px

601px upwards:

601px

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
  • Thank you, that clarifies the part of my problem I had. But in any case, is it possible to "force" the browser to use the smaller image no matter the device's screen resolution? – Fabrizio Ferrari Oct 28 '21 at 13:59
  • Well why would you deliver two images to let the browser decide which is the best if youre planning to force it to always use the smaller? I mean yes you absolutely can, drop the `srcset` and `sizes ` attributes and just add the smaller image as only `src` attribute – Fabian S. Oct 28 '21 at 14:00
  • Maybe using a `picture` tag with multiple `source` tags which use mediaqueries will solve what youre after? see https://stackoverflow.com/questions/56073781/load-images-using-the-picture-tag maybe – Fabian S. Oct 28 '21 at 14:03
  • Ok, I see. I'll experiment with and see what I'll come up with. Thank you again very much to all! – Fabrizio Ferrari Oct 28 '21 at 14:09