[03/11/2021]

What is going on with the pixels?

Depending on what monitor you're using, you may have seen weird things happening to this website's pixel art.

Here's a comparison of what the pixel art actually looks like, and how some monitors display it. The images with their pixels distorted (or "shimmered") are on the left, with their original counterparts at their right:

Eugh.

In short, this happens because some modern monitor's pixel density is so high (the pixels are very small, so there are many pixels per inch) that if they had to display pixels at their actual size, images and text would look very small. To fix this, they implement a general level of zoom over all applications. For example, let's say Windows 10 applies a 125% zoom, which it does by default on 1080p 15.6-inch screens. That means that each pixel gets scaled by 1.25. However, there is no such thing as a "pixel and a quarter": pixels are discrete units in your screen, always measuring the same.

So depending on the image scaling algorithm used, pixels will either get blurred or shimmered, making them look worse in the higher resolution screen at 125% zoom than in the lower resolution screen at 100% zoom. Among other scaling (interpolation) algorithms, there's nearest neighbor, which is used to preserve crisp edges at the expense of shimmering; and bilinear or bicubic maintain proportions while blurrying the image. These artifacts are not that noticeable in photographs, but are visible in pixel art and text. Retro games in new monitors suffer a lot from this.

The pixel icons in this website use the css property image-rendering: crisp-edges; and image-rendering: pixelated;, which tell the browser to render the image with the nearest neighbor algorithm. For some other images I've preferred to leave them to the default blur scaling, such as the ones in the dream diary section, since they are bigger.

How to fix it

There is no easy fix to this issue. If we didn't apply any zoom, applications would look very small. What about zooming by 200% (multiplying by 2)? Since 2 is an integer (whole number), there are no "half pixels" we need to worry about (this is called integer scaling, useful for some retro games)... Except now your applications look unusably big.

Ideally, the solution would be manufacturers being aware of this issue, and not using marketing terms to sell you more pixels without considering if they are actually usable. As Cassidy James points out in the article What is HiDPI and Why Does it Matter?:

Higher resolution is not always better. In an effort to upsell from their lower-resolution displays, some manufacturers are jumping on the 4K bandwaggon without considering the phyiscal size and how pixel doubling works.

But alas, you're already stuck with this computer. So here are some things you can try out if this bothers you:

• Scale Windows at 100%, which may be too small for you. Open the settings, and under "System", select "Screen" at the left. Under "Change the size of the text, applications and other elements" (or something like that... I translated that from the Spanish version), try out how you like 100% scaling.
• A solution for just this website would be to visit some dream from the dream diary section, and press ctrl - to make your browser zoom out until you see crisp-clear pixels in the image. However, this will also make the text smaller.
• Check out the "partial solutions" section at the end of this article about integer scaling.

I could have also used pixel art scaled at 200%. I didn't want to because I think it defeats the whole purpose of pixel art, and the size of pixels of the images would not match with the size of the 1-pixel borders of the sections, which I disliked.

Why should we care?

The strategy these displays follow does not only imply an unreasonable loss of quality, it is also wasteful. Not only the increased amount of pixels means more electricity, but it also means it is more computationally intensive: the computer needs to constantly calculate the aforementioned interpolation algorithms to scale the images. That consumes power. The previous article about integer scaling talks about this in more detail.