Image display size reduce to half when using srcset on hi dpr screens

Question

Running into an issue is that I have img tags structured as below

<img srcset="https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG?w=1000 1x,https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG 2x" src="https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG">

and on Mac which have DPR as 2x, Chrome will display the img in only half of its height and width

the original image is 1000x1000, and on chrome it only shows 500x500

with css it's easy to fix, but I'm curious why is it happening ?

Answer 1

Your original image is 1000x1000 pixels.
In the srcset declaration, you tell the browser its pixel density should be multiplied x2.

This means it should render the image using 2 original pixels per single CSS px.

=> 500x500px