例えばこういう場合・・・

• ドット絵をきれいに表示できない
• 小さい画像を拡大表示するとぼける

これはCSSから簡単に解決できます。

自分自身もその方法を知らなかったので、
CSSにて小さい画像をぼかさず拡大表示する方法を紹介。

ほんの数行のCSS追加でなんとかなります。

小さい画像(ドット絵)を表示するとぼける・・

まず遭遇した問題について。

自分は次のような問題にぶち当たりました。

▼ 表示したい16x16の画像（原寸大）

▼ こういうimgタグで拡大表示

▼ するとこんなぼやけた表示に...

ブラウザが勝手に補整してしまうんですよね。

だから何かぼけ～とした拡大表示になります。

こういうのは小さな画像を表示したり、アバターとかのピクセル画像などを表示する時に困ります。僕自身はこの問題に、とあるアプリを作っていて遭遇しました。ぼやけてると見た目的にかなり悪くなります (-_-;)

でもこの問題、少し工夫すれば解決可能です。

CSSからimage-renderingプロパティを設定

そのやり方は image-rendering を使うこと

▼ MDNでの詳しい解説

CSS の image-rendering プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

ユーザーエージェントは、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (または 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

引用元　：　https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering

この説明の通り・・・

「画像を拡大縮小するアルゴリズム」

こんな便利なのがあると知りませんでした。

そしてこれが取れる値は次の３種類です。

• auto
  完全にブラウザ依存。デフォルトではこの値なので、ドット絵など表示しようとするとぼやけてしまう。普通の画像表示ならこれで十分。
• crisp-edges
  画像はコントラストとエッジを保つ用に拡大縮小される。ブラウザゲームなどのピクセル表示に向いてるらしい。ただChromeではサポートされていない・・・？
• pixelated
  １つ１つのドットの大きさを保ったまま拡大縮小を行う。ドット絵を綺麗に表示したいなら、この値を設定するのがベスト

※ 実験段階の smooth と high-quality は除外

一番いいのは pixelated を使うことです。

実際に次のコードを書いてみました。

▼ ドット絵表示するimg要素

▼ 綺麗にドット絵表示できた！

まさにドット絵をそのまま拡大した感じです。

こういう見た目にしたかったんですよね～

別に普通の画像を表示するなら image-rendering なんて意識しないんですが、小さかったりドット絵だったりを表示するのには便利そうです。特定の分野では大活躍しそうな気がします。

ドット絵拡大ののまとめ

まとめるほどでもないですが・・・

とりあえずドット絵とかの小さな画像を綺麗に表示する場合、 image-rendering: pixelated;  を指定してあげればいいという話です。そうすればドット単位で拡大され、余計な補整がかかりません。

以上、ドット絵の拡大についてでした。ではまた。