ドット絵、いいですよね。少ないピクセルで表現する魅力は今も変わらないはずです。
しかし、PCやスマホ等のデバイスの高解像度化が進むにつれ原寸大サイズのドット絵はとても小さくて見づらく、デバイスによっては無理やり拡大されてぼやけてしまう事もあり、ドット絵の魅力をしっかり伝えられない事も増えてきた気がします。

じゃあこっち側で拡大表示も用意しよう！
そう思って、HTMLで原寸のドット絵の <img> タグに2、3倍のサイズを指定して表示させようかなーと思ったのに… あれ？

※最新のPCのブラウザでmemo.sdn-project.netで閲覧している前提です。それ以外（Tumblrのタイムラインやスマホなど）で見ると表示がおかしいかもしれません。

ドッターの悩み、ドット絵がぼやけて拡大される？！

今回はこのドット絵を例に。
このドットをただ単に3倍表示にするために <img> タグに width="120" height="216" を加えてみます。

おかしいです。ドット絵がぼやけてしまいます。本当なら右側のように拡大されるはずです。
（左右のドット絵が同じように見えるのであれば、あなたのブラウザは古い可能性があります。安全性も考えて最新版にしましょう。）
何故このような表示になってしまうのか。これはブラウザ側の画像レンダリング処理に原因があります。

「あれ？ こんなの当たり前じゃん」という方、数年前のブラウザでは右側が当たり前だったのです。

ブラウザ側のお節介？

古いブラウザでは先ほどの右側のような表示は当たり前でした。しかし、今は違います。何故でしょう。理由は単純です。
「高解像度化が進む時代に適応するため」です。

MacBook ProなどのディスプレイはRetinaディスプレイという通常の4倍またはそれ以上の解像度（4Kテレビも同じ）を持っています。こういったディスプレイは通常の解像度のコンテンツを4倍の解像度で表示することによってとてもなめらかな表示（文字など）を可能にしています。
しかし、通常Webでたくさん使われている画像というのはラスタ画像、画像のサイズが決まっています。ただ単に画像を4倍表示するだけではエッジが強く違和感が残ってしまいます。この違和感を少しでも消すためにブラウザ側が取った対策、それがエッジをぼかす処理です。
違和感をなくすための対策が、逆にドット絵を違和感あるものにしてしまったのです。変な話です。

「じゃあ2、3倍、またはそれ以上のサイズのドット絵をこちら側で準備すればいいじゃない」なんて思ってしまうかもしれません。
が、たくさんある場合とても面倒です。ファイルがたくさんになってしまいます。とても面倒です。
なるべく、ひとつのドット絵だけでなんとかならないものか…

CSSで改善策

実は、完全ではありませんがCSSに改善策があります。
過去にCSSの仕様書にあったものの姿を消し、再びCSS4の草案にて姿を現したプロパティ image-rendering です。
このプロパティはどのようなものか、MDNにこのように書かれています。

image-rendering プロパティはユーザエージェントの画像描画方法についてのヒントを与えます。
image-rendering は拡大/縮小された画像 (およびその他の要素、下記参照) に対して適用されます。たとえば、本来のサイズが 100×100px である画像に対し、ページ製作者が 200×200px (あるいは 50×50px) の大きさを指定した場合、画像は指定されたアルゴリズムを使って新しい大きさに拡大 (ないし縮小) されます。拡大/縮小はユーザの操作によっても適用されるでしょう (ズーム)。

引用元：image-rendering - CSS | MDN

…えー、要するに画像のレンダリング方法を指定できる、ということです。
引用先のページではFirefox等のGeckoブラウザ向けの説明になっていますが、ある程度は値に様々な指定ができるのがわかります。

このプロパティは現在のところCSSで正式に採用されたものではありません。したがって、ブラウザ側の対応もいろいろです。それぞれのブラウザに合った値を設定してあげる事になります。
…で、極論として以下の設定をすればメジャーなブラウザでぼやけることなくドット絵を拡大することができます。（2015年5月現在）

…どうでしょうか。各ブラウザの最新版で見ると、おそらくそれだけがぼやけてないかと思います。
以下のブラウザで確認済みです。

Mozilla Firefox 36.0、Google Chrome 41.0、Internet Explorer 11、Opera 29.0、Safari 8.0

また、SleipnirやSRWare Iron等の派生ブラウザでは対応していない可能性もあります。

実際に使ってみる

解決策があるのはいいけど、こんないちいちブラウザ毎に設定するの面倒じゃんって思うかもしれませんが、CSSにこれを書けばいいのです。

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
}

そして、HTMLにてclass属性で指定してあげるだけです。

<img src="./rensoho-chan.png" width="120" height="216" alt="おっきい連装砲ちゃんだぞ！" class="pixelated">

こうすれば、簡単にできますね。
CSSの書き方次第でいろいろ応用できるかと思います。

ちなみに、これは背景画像にも適用できます。
他にも、JavaScriptで2倍、3倍… と表示させるようなスクリプトを組めば更にいい感じになります。

少しでもドッターさんに知ってもらいたい事です。

2015.05.01: Opera 29.0が対応した事を追記