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
orinitial
, 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
- Initial Value
auto
- Applies To
- All elements
- Inherited?
- Yes
- Animatable
- Discrete (see example)
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.