image-rendering
image-rendering は CSS のプロパティで、画像を変倍するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 13 | 79 | 3.6 | 6 | 18 | 6 | |
auto | 13 | 79 | 3.6 | 6 | 18 | 6 |
pixelated | 41 | 79 | 93 | 10 | 41 | 10 |
基本構文
CSS
.pixel-art {
image-rendering: pixelated;
}
.photo {
image-rendering: auto;
}ライブデモ
実務での使いどころ
-
ピクセルアートのシャープ表示
ドット絵やレトロゲームのグラフィックを拡大しても、ピクセルのエッジがぼやけないシャープな表示を維持します。
注意点
- pixelatedは写真などの連続階調画像には不適切で、ブロック状のアーティファクトが目立ちます。
アクセシビリティ
- QRコードにimage-rendering: pixelatedを適用する場合、代替テキストでQRコードの内容を説明してください。