image-rendering CSS property

image-rendering: auto;

image-rendering: smooth;

image-rendering: crisp-edges;

image-rendering: pixelated;

<section id="default-example">
 <img
 class="transition-all"
 id="example-element"
 src="/shared-assets/images/examples/lizard.png" />
</section>

#example-element {
 height: 480px;
 object-fit: cover;
}

/* Keyword values */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Hinweis: Die Werte optimizeQuality und optimizeSpeed, die in einem frühen Entwurf vorhanden sind (und von ihrem SVG-Gegenstück image-rendering stammen), sind als Synonyme für die Werte smooth bzw. pixelated definiert.

Hinweis: Das CSS images-Modul definiert einen high-quality-Wert für die image-rendering-Eigenschaft, um eine Präferenz für qualitativ hochwertigere Skalierung zu bieten, jedoch wird dies in keinem Browser unterstützt.

<div>
 <img
 class="auto"
 alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
 src="blumen.jpg" />
 <img
 class="smooth"
 alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the smooth value for the image-rendering property display the image with the maximize appearance."
 src="blumen.jpg" />
 <img
 class="pixelated"
 alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
 src="blumen.jpg" />
 <img
 class="crisp-edges"
 alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
 src="blumen.jpg" />
</div>

img {
 height: 200px;
}

.auto {
 image-rendering: auto;
}
.smooth {
 image-rendering: smooth;
}
.pixelated {
 image-rendering: pixelated;
}
.crisp-edges {
 image-rendering: crisp-edges;
}

Help improve MDN