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