CSS | 画像をぼやかさずドット単位でくっきり表示させる方法
CSSのでimage-renderingプロパティを利用して、ドット絵やピクセルアートなどのアンチエイリアスを無効にしてぼやかさずにドット単位でくっきり表示する方法を紹介しています。
主にドット絵のような小さいなサイズの画像を拡大表示した際に、ぼやけてしまう場合の対策として利用します。
画像をぼやかさずに、くっきり表示させる方法
CSSのimage-renderingプロパティは画像を拡大縮小させた時に実行するアルゴリズムを設定します。
ドット絵やピクセルアートなどを、ぼやかさずにドット単位でくっきり表示するには「pixelated」を指定します。
See the Pen CSS image-rendering pixelated by yochans (@yochans) on CodePen.
サンプルでは16x16pxの小さな画像を拡大して表示しています。
左側がimage-renderingプロパティは未指定の状態、右側がimage-renderingプロパティに「pixelated」を指定した状態になります。
.pixel {
image-rendering: pixelated;
}