[CSS] `image-rendering`でドット絵をボケないように表示する

2022/03/08

2 min read

状況

ドット絵が指定された<img>のサイズを拡大もしくは縮小した場合、ぼやけてしまう。

値	説明
`auto` (default)	拡大縮小のアルゴリズムはユーザーエージェントに依存。
`crisp-edges`	画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小される。画像の処理過程で色の円滑化やぼかしは導入されない。この値はブラウザーゲームようなピクセルアート画像を想定。
`pixelated`	画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示される。縮小する時は `auto` と同じになる。

ちなみに<img>要素に対してimage-renderingを適用するだけではなく、background-imageで読み込んだ画像に対してもimage-renderingは適用できる。

`auto`	`crisp-edges`	`pixelated`

.auto {
  image-rendering: auto;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

.pixelated {
  image-rendering: pixelated;
}