Page 1 of 1

Optimizing web for large high-res displays (4K and beyond)

Posted: Sun May 27, 2018 11:49 am
by fips
After buying a 32-inch 4K display a couple of months ago, I started to notice that all my photos at PHOTOS.4FIPS.COM were slightly blurry when viewed in the web browser. One of the reasons I had created a dedicated photo gallery in the first place was to have absolute control over how the photos are being displayed (I was mainly after 1:1 pixel mapping and perceptually lossless compression), so this new finding was quite annoying for me.

So I started to look around to learn how the actual web rendering works on 4K displays, and figured out that in my case (32-inch 4K) all web content was scaled up to 150% in an attempt to mitigate the increased pixel density and to preserve relative size of the content (to my knowledge this is common to all browsers).

Although the above strategy works great for fonts and vector graphics (like SVG), it is a complete disaster for raster images. For example a 100 x 100 pixel image now stretches to 150 x 150 pixels when drawn and becomes blurry on larger displays (this is not a huge issue on small high-res displays, like on mobile phones though). You can conveniently learn the current scaling factor of your device (window.devicePixelRatio) via MYDEVICE.IO. Typically, you will find 1.5x or 2x scaling for larger high-res displays, and 3x for smaller mobile ones. Pretty messy I would say.

Luckily there is a quite simple HTML way of fixing this via the srcset attribute of the img tag. This allows to specify alternative versions of the image for different scaling (pixel ratios):

Code: Select all

<img src="image.jpg" srcset="image@150.jpg 1.5x, image@200.jpg 2x">
This has worked quite well for me at PHOTOS.4FIPS.COM. The next step on the high-res journey would be to convert all the hand-drawn icons I have there to SVG, this might be actually fun.