Pixelated Graphics and Pixel perfection

Of course, our devices display pictures using pixels (commonly used ones at least) but that's not what I mean. Sometimes we need to display big, sharp and visible pixels. Here are some ways to do that on the web

This forces our browser to use the nearest neighbor scaling algorithm, perfect one for displaying pixel art or low resolution images. It also works well for displaying computer graphics on mobile devices, instead of letting the device use the default scaling algorithm, better suited for photos.

simple KDE dialog — First image has the `pixelated` scaling set, and second one is using the default scaling.

First image has the `pixelated` scaling set, and second one is using the default scaling.

Sometimes we don't have access to a low resolution image, but for some reason, artistic or otherwise, we want to make it look pixelated. This can be achieved with a simple svg filter! Here is a step by step illustration:

Photo by DohleSchnackfass

You can even animate it! Though smooth animation can be pretty slow on old computers. Photo by AlfvanBeem

I am a big fan of vectors, but making vectors pixelated isn't as simple. There is an option to render them without antialiasing - shape-rendering="crispEdges" but the pixels are still pretty small, especially on high density displays. The same filter used before on bitmap images won't work, you can't as easily sample pixels from a vector graphic.

First character uses shape-rendering="crispEdges", the second one has the same filter as above applied.

Well, the vector on the right is pixelated, but the antialiasing is still showing. You can use a discrete table lookup on the alpha value to make sure all pixels are either fully filled or transparent.

Different lookup tables produce different results.

What about text? In CSS there is the font-smoothing property, but it does not work everywhere and can break with some fonts. You can try using bitmap fonts, but on high density displays it will still look like a standard vector font. Fortunately, we can still use the SVG filters on HTML elements and text!

Regular text.

Text with alpha table lookup.

Text with the pixel filter.

Text with both!

Text with different filters applied.