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