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

2 min read

状況

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

image-renderingについて

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

image-renderingのデモ

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

autocrisp-edgespixelated

auto

.auto {
  image-rendering: auto;
}

crisp-edges

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

pixelated

.pixelated {
  image-rendering: pixelated;
}

参考

avatar

hiro

Web Frontend Engineer / ex: Web Backend Engineer, Application Engineer