0

For devices with window.devicePixelRatio == 1

<img src="http://example.com/100x100.jpg" alt="image 100 by 100" width="100" height="100">

looks good: an image 100 by 100 pixels is used for the square of 100 by 100 - good.

For devices with window.devicePixelRatio == 2 (a better quality of the image can be used for the same dimensions) what value supposed to be for width and height attributes - 100 or 200?

<img width="100" height="100" src="http://example.com/200x200.jpg" alt="image 200x200 for 100px by 100px">

or

<img width="200" height="200" src="http://example.com/200x200.jpg" alt="image 200x200 for 100px by 100px">

Should the img width and height attribute values be also updated based on window.devicePixelRatio or they should NOT be changed?

I can't find any clear information on this simple and basic question.

Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • Take a look at [this question](https://stackoverflow.com/a/35880117/7683436). I beilieve it discusses your problem. Also, read [this medium article](https://elad.medium.com/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b) for more info. – Abdelrahman May 17 '23 at 16:26

0 Answers0