1. css
  2. /properties
  3. /image-rendering

image-rendering

Definition

The image-rendering property in CSS specifies how images should be scaled and rendered when they are displayed. It affects the quality and sharpness of images, especially when they are scaled up or down.

Examples

Setting image-rendering to auto to allow the browser to choose the most appropriate rendering method:

img {
  image-rendering: auto;
}

Setting image-rendering to pixelated to create a retro, pixelated effect:

img {
  image-rendering: pixelated;
}

Setting image-rendering to crisp-edges to create a sharper, more defined image:

img {
  image-rendering: crisp-edges;
}

Values

ValueDescription
autoThe browser chooses the most appropriate rendering method. This is the default value.
crisp-edgesEdges of the image are rendered sharply and clearly. This can create a pixelated effect.
pixelatedThe image is rendered with a pixelated effect, which can be useful for creating a retro look.
optimizeSpeedThe image is rendered quickly, but with lower quality.
optimizeQualityThe image is rendered with the best possible quality, but may be slower.
inheritThe value of the image-rendering property is inherited from the parent element.

Best Practices

  • Use image-rendering: auto for most images, as this allows the browser to choose the most appropriate rendering method for the image.
  • Use image-rendering: crisp-edges for images that need to be displayed with sharp, clear edges, such as logos or icons.
  • Use image-rendering: pixelated to create a retro, pixelated effect in images.
  • Avoid using image-rendering: optimizeSpeed, as this can result in lower-quality images. Use image-rendering: optimizeQuality instead to get the best possible image quality.
  • Test your images with different image-rendering settings to ensure that they look good and are rendered correctly on different devices and in different browsers.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes