image-rendering: smooth
image-rendering: smoothは、画像をスケーリングする際にバイリニアやバイキュビック補間を使用して滑らかな色のグラデーションを維持するCSS宣言です。写真やグラデーションを含む画像の拡大時にピクセルが目立たないよう処理されます。pixelatedとは対照的に、自然な見た目を優先する場面で使用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.image-rendering.smooth 実験的 | | | 93 | | | |
基本構文
CSS
.photo {
image-rendering: smooth;
}
.pixel-art {
image-rendering: pixelated;
}ライブデモ
実務での使いどころ
-
写真の滑らかな拡大表示
写真やグラデーション画像を拡大する際に、ピクセルが目立たない滑らかなスケーリングを適用します。
注意点
- Firefoxのみのサポートであり、他のブラウザではデフォルトの補間アルゴリズムが同様の動作をする場合があります。
アクセシビリティ
- 画像の拡大品質の向上はロービジョンユーザーがズーム機能を使用する際の視認性改善に寄与します。