CSS - image-rendering

概要

属性名	image-rendering
値	auto \| smooth \| high-quality \| pixelated \| crisp-edges
初期値	auto
適用可能要素	すべての要素
継承	する
サポート	https://caniuse.com/?search=image-rendering

説明

画像を拡大・縮小表示する際のアルゴリズムを指定します。

値	説明
auto	ブラウザにまかせたアルゴリズムが選択されます。
smooth	画像の外観性を最大限に保つように拡大・縮小されます。双一次補間などの色のスムージングアルゴリズムが利用されるかもしれません。画像が写真の場合に有用です。
high-quality	可能な限りの高品質性を保って拡大・縮小されます。
pixelated	ピクセルの表示を保ったまま拡大・縮小します。
crisp-edges	画像のコントラストとエッジを保つように拡大・縮小されます。ピクセルアートなどに有用です。

使用例

CSS

img {
 width: 5rem;
}
.auto {
 image-rendering: auto;
}
.crisp-edges {
 image-rendering: crisp-edges;
}
.pixelated {
 image-rendering: pixelated;
}

HTML

<img alt="test" class="auto" src="example.gif">
<img alt="test" class="crisp-edges" src="example.gif">
<img alt="test" class="pixelated" src="example.gif">

表示

test test test

リンク

初版:2022年7月31日、最終更新:2022年7月31日

https://www.tohoho-web.com/css/prop/image-rendering.htm