image-rendering

The 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.

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

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.

Example

Here's a very small inline image that's made up of four colored pixels:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==">

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:

img {
  image-rendering: pixelated;
}

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 crisp-edges.

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:

See the Pen Image-rendering demo by Robin Rendle (@robinrendle) on CodePen.

Toggle example

In the Pen below it’s possible to toggle between these values and see the discrepancies between browsers:

See the Pen Image rendering demo by Robin Rendle (@robinrendle) on CodePen.

Other resources

Browser support

crisp-edges currently requires vendor prefixes to get the best support possible.

Chrome Safari Firefox Opera IE Android iOS
‡ 41+ * 7.1+ * 35+ 28+ Nope Nope * 7.1+

‡ Supports pixelated but not crisp-edges
* Supports crisp-edges but not pixelated

Comments

  1. User Avatar
    Colby
    Permalink to comment#

    You say ” In this example Chrome will remove the default anti-aliasing:” But wouldn’t it be called ‘aliasing’. Aliasing technically is a blending of two different things together on the edges of those things right? So the browser performs ALIASING on images that are scaled up right? Just a a little confused. Thanks

    • User Avatar
      Lasse
      Permalink to comment#

      You’ve got it backwards. Aliasing is what happens when a signal is digitized and values close to each other become the same value because the digital resolution simply doesn’t allow anything to exist “between” the pixels or sample points. Anti-aliasing is what’s done to combat this.

      https://en.wikipedia.org/wiki/Aliasing

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag