WEB上でドット絵を拡大表示する
目次
crisp-edges
さて、３番目の勧告候補は、５か月後の2011年7月。
image-rendering の取る値は auto と crisp-edges に変わりました。
説明も少し変わり、「画像のエッジを維持し、色をスムージングしない」となっています。
値の名前の変更も含め、重要なのは「コントラスト」（つまり、色をスムージングしない）ではなく、エッジを維持することだ、と明示したかったのでしょう。
ここで、「画像のエッジを維持し」と明記されたのは、ドット絵をドット絵のまま拡大する、ということを想定していたように思えます。
つまり、EPX などのアルゴリズムを使わず、あえて低品質な画像拡大を行え、ということ。
しかし、エッジを維持する、という言葉は受け取る人によって異なるでしょう。元のドット絵の形が変わってはならない、と考えることもできますし、斜めに連続したドットを斜め線だと類推し、「はっきりとエッジを出した」画像を表示しようとする…つまり、EPX アルゴリズムを使用するほうがよい、と考えることもできます。
ここでも、optimizeSpeed と optimizeQuality は廃止で、auto と同じとなる、と明示されています。
しかし、optimize-contrast をどのように扱うかは示されていません。
FireFox が使用する -moz-crisp-edges や、Safari が使用する -webkit-crisp-edges はここに由来します。
また、古い Opera でも、 -o-crisp-edges を使いました。
そして姿を消した
４番目のバージョンは、３番目からわずか２か月後の 2011年 9月です。ここで、image-rendering プロパティは忽然と姿を消しました。
いったい、この２か月の間に何があったのでしょう？ 草案から消えてしまった、ということは、image-rendering プロパティを使用するのは不適切である、と言う意味になります。
４年たった 2015年 11月 12日時点でもまだ、勧告候補には image-rendering は入っていません。
もっとも、勧告候補の日付は 2012年 4月 17日。３年間新しい勧告候補は出ていない、ということになります。
この勧告候補は７番目に当たり、十分議論が尽くされてこれ以上の案が出ないのかもしれません。
古い Chrome では、勧告候補から消えたことを受けて、image-rendering のサポートをやめました。（それ以前は -webkit-crsp-edges が使えた）
また、Opera も Chrome のエンジンを利用するようになった時から、サポートしなくなりましたし、さらに後でマイクロソフトが作った新ブラウザ、Edge でもサポートしていません。
pixelated
image-rendering 自体が姿を消してからほぼ１年後、CSS4 草案の最初のバージョンが発表されました。そして、image-rendering はここで再び姿をあらわしました。
CSS4 に移行になった、ということは、議論が明らかに不足しており、互換性を保ったまま各ブラウザが実装することはできない、と判断されたことを意味します。
（ここまでに書いたことを読んでいただければ、ドット絵の扱いのややこしさが理解していただけるでしょう。)
CSS3 すらまだ勧告に至らない状態で、CSS4 は実装しないように求められています。
実際、chrome や safari が使用している webkit ライブラリでは、image-rendering は CSS4 向けの機能として、特別な方法でコンパイルしなくては使えないように変更されています。
さて、CSS4 の image-rendering では、auto と crisp-edges に加え、「pixealted」が指定できるようになっています。
crisp-edges との違いは２つ。明示的に「ニアレストネイバー法か、それに類するアルゴリズムを使用する」と書かれたこと、縮小時には auto と同じ動作とする、と明記されたことです。
縮小時！ そうです。今までの議論はすべて「ドット絵の拡大」で、縮小のことが全く考慮されていませんでした。
複数ドットを混ぜた色で表現すれば、「コントラストの維持」ではなくなります。かといって、ドットを間引けば「エッジの維持」ではなくなります。crisp-edges で、いったいどうやって縮小しろと言うのでしょう？
ここら辺の議論不足も、CSS3 から姿を消した理由のようです。
「ドット絵を拡大したい」と言う用途では、pixelated 指定が本命であるように思います。
復活
その後も「草案」は更新され続けていたようです。
現在、一度は CSS4 に、と持ち越された image-rendering が、草案の上では復活しています。
どうやら、2014年 9月 26日版から復活を遂げたようです。
内容としては、先に CSS4 の草案として書いた、 auto / crisp-edges / pixelated の３つが定められています。
ただし、これはまだ草案であり、勧告候補にはなっていません。つまり、今でも公式には image-rendering は存在しません。
にもかかわらず、Chrome / Opera は、再び image-rendering の対応を行いました。
しかも、-webkit のような接頭語は不要で、pixelated とそのまま書けます！
ただ、あくまでもまだ「草案」にすぎないことを忘れてはなりません。草案段階で実装するのは、「独自実装」の扱いです。独自実装では接頭語をつけるのがルールなので、pixelated 対応はかなり行儀の悪い行為です。
とはいえ、今は便利なので使わせてもらいましょう…
JavaScript について
Edge は CSS を理解しませんが、JavaScript で同等の動作が可能です。
というのも、ドット絵の拡大は、CSS の機能としては削除されましたが、JavaScript の機能としては「標準」として残っているためです。
今後、同じように CSS でドット絵の拡大ができないブラウザが現れた場合、Javascript の調整で解決できる可能性があります。
設置方法
というわけで、冒頭に書いたプログラムの使い方。
プログラムの動作前提として、jQuery が必要です。1.7.2 と 2.0.2 で動作確認しました。多分一般的なバージョンなら動きます。
以下のコードを、head 内に記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
さて、冒頭のプログラムをもう一度引用しておきましょう。
<script type="text/javascript"><!--
if(navigator.userAgent.indexOf("Edge")>0)
$(window).load(function(w,h,c,x,y){w="width";h="height";
$("img")
.map(function(v,d){c=$("<canvas>")[0];x=c[w]=d[w];y=c[h]=d[h];
v=c.getContext("2d");
v.imageSmoothingEnabled=v.msImageSmoothingEnabled=0;v.drawImage(d,0,0,x,y);
$(c).replaceAll(d)})})
--></script>
上のコード全体を、HTML の中に書いてください。head 内でも body 内でも、どこでも構いません。
ページ内の全ての画像を読み込み終わったタイミングで動作しますので、HTML の一番最後に書くのがおすすめです。
中央あたりに $("img") と書いてある行があります。ここは、環境に合わせて書き変えてください。
記述方法は CSS に準じます。つまり、 class="dot" を対象とする場合、$(".dot") とします。