画像
image-rendering
image-rendering は、画像を拡大・縮小して描くときに、なめらかさとくっきりさのどちらを優先するかをブラウザに伝えます。ドット絵や QR コードをぼかさずに拡大したいときに使います。
構文
auto | smooth | high-quality | pixelated | crisp-edgesプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background-image: url(/pixel-sample.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
image-rendering: pixelated;
}コントロール
image-renderingpixelated
解説
値の意味
auto：ブラウザ任せです。初期値で、ふつうは色を混ぜてなめらかに拡大するので、小さな画像を大きくするとぼやけます。smooth：写真のように、なめらかさを優先します。対応しているのは Firefox だけです。pixelated：ドットの形を保ちます。縦横それぞれ、元の大きさの整数倍のうちいちばん近い大きさまでは隣のピクセルをそのまま広げ（ニアレストネイバー）、残りの端数だけなめらかに拡大します。crisp-edges：輪郭とコントラストを保ち、色を混ぜたりぼかしたりしません。線画向けで、どう描くかはブラウザが決めます。Chrome・Edge は 148 から対応しています。
このページのプレビューでは、12×12 のドット絵を background-size: contain で箱いっぱいに拡大しています。
どの画像に効くか
その要素の画像すべてに効きます。<img> や <canvas> の中身のほか、背景画像やリストの記号の画像にも効きます。継承するので、親に書くと中の画像にもまとめて効きます。
気をつけること
- 元の大きさのまま描くときは、どの値でも見た目は変わりません。拡大・縮小されるときだけ違いが出ます。
- 仕様には、
smoothと同じで画質をより優先するhigh-qualityもありますが、今はどのブラウザも対応していないので、このページでは扱いません。