HTML responsive images issues on high-resolution devices

Comments

1 comment

  • Avatar
    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

    0
    Comment actions Permalink

Please sign in to leave a comment.