CSS image-rendering

The CSS image-rendering property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.

When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled.

Syntax

Which means that it can be any of those five values.

In other words, it can be any of the following:

Possible Values

Below is an explanation of the values that are accepted by the image-rendering property.

auto

The scaling algorithm is UA dependent.

smooth

The image should be scaled with an algorithm that maximizes the appearance of the image. This is intended for images such as photos.

high-quality

Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality will likely be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.

Note that this doesn't prevent the image from being degraded if system resources are constrained. It simply allows you to express a preference that such images should receive extra scaling resources relative to those images with auto specified.

Therefore, you should only reserve high-quality for your most important images.

crisp-edges

The image will be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art or line drawings.

pixelated

The image will be scaled with the "nearest neighbor" or similar algorithm, to preserve a "pixelated" look as the image changes in size.

Also note that the image-rendering property previously accepted optimizeSpeed and optimizeQuality as values, but these have now been deprecated. If you do provide them, the user agent will treat them as pixelated and smooth respectively.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

CSS Specifications

The image-rendering property is defined in CSS Images Module Level 3 (W3C Candidate Recommendation, 10 October 2019)

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.