Images are a fundamental resource in any application: web, mobile, or desktop. In my experience, whenever possible, I prefer to use visual metaphors instead of text. A “play” icon, for example, communicates much faster than the word "Play", and it also avoids issues when the application needs to be translated into multiple languages:
Rather than using phrases or words indicating the same action, which for our example could be "Reproducir" in Spanish or "Play" in English; and this is to name just a few languages. Now imagine if we want to translate the application into multiple languages and translate the same phrases or words many times; we save a lot of time just by indicating the metaphor.
This idea of making better use of images connects directly to the topic of this article: how to control image rendering in CSS to achieve a pixelated effect, something especially useful when scaling small images or looking for a specific visual style.
Pixelated images with CSS
Returning to the main topic of this post; Google Chrome in its latest versions (starting from version 41, you can check the support for other browsers on MDN image-rendering ) incorporated a new option for image rendering (more information at Pixelated Image Rendering Sample ) through the image-rendering property in conjunction with its pixelated value, which allows displaying pixelated images:
.img {
image-rendering: pixelated;
}It is an uncommon property or not something developers normally use since sometimes it seems to matter little, but here it is, and it's called image-rendering as you can see in the CSS code above.
What is pixelated rendering in CSS?
When an image is scaled (increasing or decreasing its size with width and height), the browser applies smoothing algorithms by default so it doesn't look "bad." The problem is that this smoothing blurs the pixels, which is completely undesired in certain cases.
This is where the property comes into play:
image-rendering: pixelated;With this value, we tell the browser to respect the original pixels of the image, showing well-defined blocks instead of a blurry rescaling.
It is not a property that most developers use daily, but when you need it, it makes a huge difference.
The image-rendering property and its values
image-rendering allows you to control how an image is interpolated when resized. The most relevant values are:
- auto: This is the default value. The browser decides the algorithm that "looks best," usually smoothing the image.
- pixelated: Prioritizes large, defined pixels. Ideal for pixel art, small images, QR codes, or grid-based graphics.
- crisp-edges: Attempts to preserve contrast and edges without as much smoothing, although the result depends heavily on the browser.
In practice, pixelated is the clearest and most consistent value when you are looking for a real pixelated effect.
How to apply pixelated images with CSS?
The application is as simple as adding a CSS class to the image:
.img { image-rendering: pixelated;}From there, the effect is appreciated when you modify the actual size of the image.
Example of pixelated images with CSS
Borrowing the example presented in the previous link, which uses the following image whose natural size (without distorting its size with width and/or height) is 2x2 pixels:
Now, if we increase the size using CSS (width and height) to about 300x300 pixels, we will see the difference:
Pixel art vs default browser rendering
(Natural image size 2x2 pixels)
This is a bit of a radical example or gone to extremes to clearly understand the difference (a picture is worth a thousand words), as we will rarely use an image of these dimensions (2x2 pixels) to increase it to the previous dimensions (300x300 pixels); let's see a slightly more realistic example with the following image:
If we scale it to 300×300:
- Without image-rendering: pixelated → the image looks blurry.
- With image-rendering: pixelated → each pixel becomes a perfectly defined block.
And by changing its natural size from 200 pixels down to 50 pixels, see its effects and consider its use according to the effect you want to achieve in the images:
pixelated vs default browser rendering
(Natural image size 200x200 pixels)
pixelated vs default browser rendering
Natural image size 100x100 pixels
pixelated vs default browser rendering
Natural image size 50x50 pixels
When we can show pixelated images
Previously we saw how to show pixelated images; now, what is this property useful for? Like almost everything, imagination is the limit, but a possible use would be if we have an image of small dimensions.
Therefore, it is very light and fast to load as a promotional image (and then we can load the final image via AJAX or another technology), so that the user has an indication of what is being shown, and depending on the type of image, you can decide how you want this small-proportioned image to look.
Another possible scenario is game development; if when passing some specific dimension you want to indicate how it should look.
A final scenario is QR codes; being images composed of squares, we can have an excellent visualization of them by increasing their size, that is, when they are rescaled, as we saw in a similar example at the beginning of this post:
Image 120px high and wide with image-rendering: pixelated
Image 120px high and wide without image-rendering: pixelated
Other values of the image-rendering property
This property ultimately allows us to indicate to the browser certain key aspects of the image when it is going to be rescaled, generally how we want it to look based on the options we have; for this reason, this property can take other values besides just pixelated as we saw earlier, values as we can see below:
auto: This is the default value and tells the algorithm to maximize the appearance of the image.crisp-edges: This property allows the image being scaled to preserve contrast and thus prevent blurring in the image rendering.
Practical use cases
- Quick and light placeholders
- A very interesting use is to show a very small and light image as a preview while the final version loads (via AJAX or another technique). The user immediately perceives what will be shown, even if it is in a pixelated way, and the initial load is much faster.
- Games and pixel art
- If you are developing games or interfaces with a retro aesthetic, image-rendering: pixelated is practically mandatory. It allows scaling sprites without losing their essence, which is key in this type of project.
- QR codes and other grid-based graphics
- Another case where I have seen it work especially well is with QR codes. Being composed of squares, pixelated scaling maintains a clean and legible visualization, even when greatly increasing the size of the image.
Without this property, smoothing can introduce blurs that affect the reading of the code.
Browser compatibility
Support for image-rendering: pixelated is quite good in modern browsers. Chrome incorporated it starting from relatively old versions, and today it is available in most common environments.
Even so, it is always advisable to check updated compatibility in the MDN documentation if the project has very specific requirements.
Frequently asked questions about pixelated images in CSS
Does image-rendering: pixelated work when reducing images?
Yes, although the effect is more noticeable when scaling up. When reducing, it helps maintain a "harder" style without smoothing.
- Is pixelated the same as crisp-edges?
- Not exactly. pixelated forces visible blocks; crisp-edges attempts to preserve edges, but the result can vary more depending on the browser.
- Does it work for any type of image?
- It works best with simple images, pixel art, technical graphics, or QR codes. In large photographs, the effect may not be desirable.
Conclusion
image-rendering: pixelated is one of those CSS3 properties that go unnoticed, but when they fit the problem you have, they are pure gold. It allows you to control exactly how images are scaled, avoids unnecessary smoothing, and opens the door to very specific visual styles.
In my experience, it's not about using it always, but about knowing when to use it: placeholders, games, small images, or grid-based graphics. If it fits your case, the result is immediate and very effective.