1

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 ?

AndrewWang
  • 81
  • 1
  • 8

1 Answers1

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

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • isn't it working the opposite way ? Screen's pixel density is 2x so it chooses the 2x image as src ? – AndrewWang Jan 02 '20 at 07:10
  • That's what it does, but it's not the opposite. Your declared 2x image is 1000x1000 pixels. So it will get rendered as half this number of CSS `px`. Note "`px`" here is the CSS unit, not a "pixel". On a screen with x2 pixel density, 4 pixels will be used to render a single "`px`" at default zoom. If you wish your x1 and x2 images to render the same size (in `px`), then your x2 must have twice the number of pixels of x1. – Kaiido Jan 02 '20 at 07:15
  • Got it, but why wouldn't normal do the same thing under 2x screen, it's quite confusing...... – AndrewWang Jan 02 '20 at 08:47
  • Because that would be a nightmare to maintain? Imagine all websites which expect a given size fro their images get their layout all messed up on different monitors density? The `src` attribute has been defined as `x1` to avoid breaking the web. – Kaiido Jan 02 '20 at 08:58