image-rendering

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;
}

/* キーワード値 */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* グローバル値 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

<div>
  <img
    class="auto"
    alt="緑の葉を背景にした白と黄色の花の小さな写真。画像は表示されるサイズより約 33% 縮小されています。この拡大処理が発生し、画像がぼやけて現れ、オブジェクト間の輪郭が明らかに柔らかくなっています。"
    src="blumen.jpg" />
  <img
    class="smooth"
    alt="前回の画像と同じ写真で、同時に同じだけ拡大処理されています。image-rendering プロパティの smooth 値に対応するブラウザーは、画像を最大化表示で display させます。"
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="前回の画像と同じ写真で、同時に同じだけ拡大処理されています。 image-rendering プロパティの pixelated 値に対応しているブラウザーは、画像をとてもピクセル化された状態で表示させます。個々のピクセルがはっきりと現れ、縁がはるかに鮮明になって現れます。"
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="前回の画像と同じ写真で、同時に同じだけ拡大処理されています。 image-rendering プロパティの crisp-edges 値に対応しているブラウザーは、画像をとてもピクセル化された状態で表示させます。この例では、 pixelated バージョンと crisp-edges バージョンでは、ほとんど認識できる差がほとんどありません。"
    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;
}