If the browser downscales a large image, will it display the same amount of detail on different screen resolutions?

This question relates to web development.

I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:

Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?

Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).

EDIT: I managed to test this on Chrome and it looks like it will display the images at screen resolution (not css).

I created a 4x1 pixel png image:

I added this image to an html page and sized it with a width:2px; height:1px;. For good measure, I also added a blue div with width:2px; height:1px; bellow it.

I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.

This is how it displayed:

Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution. So, to partially answer my question, a 2px image tag can display 4px worth of data.

The question remaining is: Is this browser-dependent or do all browsers work like this?

https://stackoverflow.com/questions/67341916/if-the-browser-downscales-a-large-image-will-it-display-the-same-amount-of-deta May 01, 2021 at 08:37AM