CSSでドット絵を拡大表示してみた

publish: 12/18/2016
css ドット絵 スダ スダ スダ シュウゴ

この記事は「スダ Advent Calendar 2016」の21日目の記事です。

ﾎﾞﾛﾝｯ

はいっこんばんは！良吉です！
とうとうわしの番が来た訳ですが、記事を書いちゃうのかい？書いちゃうよ？

あっ…ドット絵を拡大したい…!!

今回はドット絵の拡大表示に関するメモです。
皆様は日常生活の中でふいに「ドット絵を拡大したい…!!」と思った時にどんな方法を使いますか？

  • ドット絵エディタでサクッと拡大
  • Photoshop等の画像編集ソフトを使用し、ニアレストネイバー法で拡大

等が思いつきやすい方法かなーと思います。
上記の拡大方法は手軽ではありますが、ビットマップ画像を拡大するので等倍の画像よりもファイルサイズが大きくなってしまいます。
そこで今回は、CSSプロパティの「image-rendering」を使って等倍の画像を拡大する方法をご紹介します。

image-renderingのブラウザ対応状況・ドット絵を拡大させたい時の記述方法

CSSプロパティの中でもマイナーと思われる「image-rendering」。画像の拡大縮小時の処理方法を指定できます。Can I useで確認してみるとIEは「-ms-interpolation-mode」を使用することで部分的に対応、Opera MiniとEdgeは非対応となっています（2016年12月時点）。
※EdgeについてはJavascriptで対応可能です
また、対応しているブラウザについても記述方法がバラバラで少し面倒です。

  • 基本的な書き方　image-rendering: pixelated;
  • Firefox　image-rendering: -moz-crisp-edges;
  • IE　-ms-interpolation-mode: nearest-neighbor;

そろそろドット絵を拡大してみよう！

ではまず、適当なドット絵を用意してみましょう。今回は下記の画像を使用します。
※等倍で表示しています
ksad-memory
次にHTMLとCSS、時にはJSを使用して画像を拡大してみます。
今回はimage-rendering未設定の画像と設定済みの画像のサンプルをご用意しました。

拡大されたドット絵に差があるのがお分かり頂けるかと思います。

参考にさせて頂いたサイト・記事

あとがき

ちょっと雑すぎるので後日書き直します…本当に申し訳ない（＞＜）