CSS pixels and resolution of content in a browser

My 4k monitor has a resolution of 3840px x 2160px. In Chrome it shows a CSS resolution of 2560 x 1440.
If I play, for instance, a 4K video on YouTube, because it is being displayed in a browser does that mean I will only see it at 2560 x 1440 pixels resolution? Or do CSS pixels only refer to the pixels used in CSS layout?

Probably the best bet is to check out this article which outlines what CSS resolution vs device resolution vs density resolution means.

They do a great job.

2 Likes

Thank you for that. That (and the following article) is quite a read. So I see that what content you are served can be determined, to some extent, by the CSS of the site. But I may be being thick here - I still don’t understand if it is possible for a browser to display a 3840px x 2160px video at that resolution on my screen or whether it will only get shown at 2560 x 1440?
Is the answer, “yes, it can be, if the site is coded in a certain way”?

No you cant change the 2560 x 1440 max size. Your 4K monitor maps 1.5 of it’s device pixels to 1 css pixel. 1.5 x 2560 = 3840. That means you get a sharper picture.

My phone for example (which I’m typing on) is 720 device pixels but only displays at 360px. That means 2 device pixels are mapped to 1 px.

You can’t change the density. You work with the 2560 etc but double density images and videos will be sharper.

At least that’s how I think it works :slight_smile:

1 Like

I’m being thick here. Not quite sure what you mean by this bit? Are you saying that even though a 3840 pixel width image/video will be downscaled to 2560 pixels it will appear sharper than a 2560 pixel width image/video?

Basically yes.

If you have an image that is 640px natively and you set its display size to 320px then on double density screens you get 2 image pixels mapped to one pixel giving a sharper image.

I think this article explains it better. :slight_smile:

http://www.espn.com/adspecs/guidelines/en/double-density.html

1 Like

You can change the display resolution (in CSS pixels) via right click on desktop (Windows 10 at least).

2 Likes

I can’t see that option on my laptop

I’m afraid I’m having difficulty here (and with that article). Isn’t that just downsizing? If four (2x2) of the pixels of the 640px image are only represented by one pixel on the display how can it be sharper? (I’m not contradicting you, I am just trying to understand - I think my brain is not getting something).

In the one css pixel you get 2 of your device pixels showing, that means double the quality. It is not mapped down one to one as that would be blurred.

e.g. From here.

Screen Shot 2021-11-24 at 13.01.47

Those 3 images are all 10 CSS pixels wide but the higher density device can map more device pixels into the one pixel space giving a sharper picture. A CSS pixel is an abstract unit that is a device independent pixel. It is one css pixel but it may be mapped to more than one of the device’s own pixel density.

1 Like

Aha! Clunk! Sound of penny dropping. Thank you so much for your patience. The diagram did it.

1 Like

Then while out shopping I realised what I had been failing to understand. I think I would have understood sooner if CSS pixels had been called something different. My understanding is now as follows:

  1. A CSS pixel is a unit of measurement, that is defined in software (?browser, ?OS). It can used in CSS to define sizes of things like text and padding and the size that a picture is to be displayed.

  2. But. A 1 x 1 CSS pixel on a high density device can involve more than one screen hardware pixel.

  3. And the final piece of the puzzle is that a 1 x 1 CSS pixel area can display more than one pixel of an image, in the same way that 1vh x 1vh can display more than one pixel of an image.

Have I got that right?

2 Likes

That sounds about right :slight_smile:

It is quite a complex subject so many of us are confused by it.

1 Like

Kind of you to say :grinning:
So If I play a 4k video on YouTube in full screen, depending on how the page has been written I could be watching it in 3840px x 2160px?

Assuming your video is recorded at 4k it will display at 2560 css pixels but will look sharp

That’s as I understand it but I may be wrong as it’s not really something I’ve looked deeply into.

Sorry, I wasn’t very clear - I meant if played in full screen mode, it will show each of the 3840px x 2160px (not CSS pixels but dots of the video).

Refer to those 3 little images above where it says 10px. Imagine that 10px says 2580 then your video should be displayed inside that 2580 as the high density version on the right.

Each css pixel will show more detail as it maps more device pixels into each css pixel. Effectively the finer detail is preserved.

2 Likes