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 ?
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