UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form.
/* Safari seems to support, but seems deprecated and does the same thing as the others. */
About those three possible values:
auto: default value that uses the browser’s standard algorithm to maximize the appearance of an image.
crisp-edges: the contrast, colors and edges of the image will be preserved without any smoothing or blurring. According to the spec this was specifically intended for pixel art. This value applies to images scaled up or down.
pixelated: as the image changes size the browser will preserve its pixelated style by using nearest-neighbour scaling. This value only applies to images that are scaled up.
This property can be applied to background images,
canvas elements as well inline images. It’s important to note however that testing these values at this time is particularly confusing because of the lack of consistent browser support.
Here’s a very small inline image that’s made up of four colored pixels:
If we change the width of this inline image to
300px then in Chrome (41) we’ll find the browser has attempted to optimize the image as best it can:
To preserve its original pixelated look we can use the following
pixelated value, like so:
This results in the browser choosing an alternative algorithm with which to process the image. In this example Chrome will remove the default aliasing:
Unfortunately, after a lot of testing, it seems that browsers interpret the crisp-edges and pixelated values in very confusing ways at the moment so it’s important to note once again that this specification is in its very early days. For instance, Chrome appears to render
pixelated images in the same way that Firefox and Safari will render images with
QR code example
Another use case of this property might be for QR codes where you want to increase its size without distorting it by using the standard anti-aliasing. Make sure to check this example in full-screen mode to see the image stretch:
In the Pen below it’s possible to toggle between these values and see the discrepancies between browsers:
crisp-edges currently requires vendor prefixes (
-moz-crisp-edges) to get the best support possible.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
At the time of this update, Firefox 61 supports
crisp-edges but not
pixelated and Chrome 68 supports
pixelated but not