[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;
}

参考

Related Articles

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考