Skip to main content

HTML responsive images issues on high-resolution devices

Anastasios Tsoufis
Hallo,
 
I would like to ask how can I use cloudinary to cope with the issue where despite the appropriate `<img srcset="" sizes="" />` tag, high resolution mobile devices receive images that are inappropriately sized for their (band)width?

The relevant html ticket with examples is here:
 
0

Comments

1 comment

Date Votes
  • Stephen Doyle

    Hi Anastasios,

    I replied to the support request you sent to us directly also, but for the benefit of others that find this:

    In general, the solution to the issue you've raised is to use a srcset + media query to give the browser several choices for which image to use, or use our javascript responsive function to replace w_auto in the image URLs with the width of the image tag (and if you like, dpr_auto with the device pixel ratio of the user's screen).

    The general rule when you let the browser choose an image with a srcset is that it will choose the smallest image which is larger than the physical/'virtual' space it has allocated for that image in the document, after accounting for the device's device-pixel-ratio.

    If you're not seeing this when testing, a possible reason is that if the browser has a cache of an image larger than it would usually choose, it will use that cached image from disk instead of making a new request for the smaller / closer-sized image.

    If that doesn't explain it either, check if the specific browser that you're testing with has any caveats about support for srcsets, if it processes media queries differently than you expected, etc

    Thanks,

    Stephen

    1

Post is closed for comments.

Didn't find what you were looking for?

New post