CSSで小さい画像・ドット絵をボケずに拡大させる

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

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

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

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

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

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

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

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

▼ 表示したい16x16の画像(原寸大)

この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

この説明の通り・・・

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

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

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

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

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

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

 

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

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

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

image-renderingプロパティを使ったらドット絵を綺麗に表示出でき!このように1つ1つのドットごとに拡大される

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

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

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

ドット絵拡大ののまとめ

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

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

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

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください