WEB上でドット絵を拡大表示する
この記事は 2017年6月28日に最終更新されています。
設定なし
設定あり
少しでも小さなデータ量で済ますことを目的としています。
ややこしい手法は、動かない環境もあるかもしれません。最初から拡大した画像を用意すれば確実です。
ただ、大きな画像は読み込みが遅い環境があるかもしれない、ということもお忘れなく。これも「動かない環境」です。
ここでは、画像は小さな（等倍の）ドット絵のまま、引き伸ばして大きく表示する方法を示します。
もちろん、そのために必要な設定も、できるだけ小さなデータ量で。
目次
設定方法
2015年 11月 13日現在、CSS のみでほとんどのブラウザがドット絵の拡大に対応できます。
ただ、Windows 10 から採用されたマイクロソフトの新ブラウザ、Edge だけは Javascript が必要なようです。
CSS
まずは、ドット絵をくっきり表示させるための CSS です。
ただし、この設定は HTML5+CSS3 の標準ではありません。
とはいえ、主要ブラウザでは Edge 以外で動作します。
これ、Edge がダメなのではないですよ。勘違いしないように。標準がないので、みんな「独自実装」です。
だから、いつか急に動かなくなる危険もあります。
img {
-ms-interpolation-mode: nearest-neighbor; // IE
image-rendering: -webkit-crisp-edges; // Safari
image-rendering: -moz-crisp-edges; // Firefox
image-rendering: pixelated;
}
Javascript
現状では、Edge は以下のスクリプトで解決できます。
Edgeはあまり普及していませんから、当面無視する、という対応でも良いかもしれません。
<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>
2017年4月ごろに公開された、Windows10 Creators Update に伴う Edge の新バージョンから、スクリプトの指定方法が変わっています。
詳細な説明は記事の最後に書きますが、以前のこのページからプログラムをコピーしていた方は、修正お願いします。
CSS も Javascript も、ここに示したコードではすべての画像を対象にしています。
前提として、これらの画像は「引き伸ばされている」必要があります。
CSS や img の width や height で、元画像より大きなサイズを指定しておくのです。
そのうえで、上記の CSS や Javascript を使用してください。
CSS は 先頭の img を、javascript は中央あたりの $("img") を書き変えれば、特定の class を持つ img のみを対象にできます。
CSS の記述方法について
ネット上を調べると、「ドット絵を綺麗に拡大する」方法について、さまざまな…全く異なる…情報が見つかります。
ドット絵を綺麗に拡大する（長いので、以下「ドット絵の拡大」と書きます）方法は、CSS3 の策定中にコロコロと変更され…「時期尚早」と判断され、CSS4 に先送り。CSS3 からは削除されました。
これが、情報が書かれた時期によって、内容があまりにも違う原因です。
CSS3 はまだ草案の段階で、勧告に至っていません。つまり、まだ変更される可能性があります。ただし、ある程度の同意は得られた状態ですので、「独自仕様」として機能を前倒しで実装するのは許されています。
とはいえ、何度か出された「勧告候補」でも仕様がコロコロとかわり…現在、「ドット絵の拡大」に関する仕様は削除され、存在しません。
なので、一度は実装したブラウザでも取り消したり、ブラウザごとに依拠する「勧告候補」バージョンが違い、記述方法が違ったり…
最初に書いた CSS は、現状では IE / Firefox / Chrome / Opera と、たぶん Safari でも動作します。
Edge では動かない、ということを確認しています。その他のブラウザは未確認です。
現状、というのが2015年11月12日時点であることに注意してください。先にも書いたように、CSS の策定方針がコロコロ変わるのが問題で、この記事もすぐに時代遅れになる可能性があります。
optimizeSpeed
最初に、CSS3 の策定方法について書いておきます。
CSS3 は現在も策定中であり、決定はされていません。
策定中の最新版は、Editor's Draft として公開されています。
これは Draft、つまり提案に過ぎないため、公式な記録すら残っていません。常に最新版公開のみです。
策定中のバージョンは、ある程度まとまると「勧告候補」として公開されます。こちらは記録が残ります。
最初の勧告候補の日付は、2009年7月。
このバージョンでは、ドット絵の拡大の指定方法は盛り込まれていませんでした。
しかしどうやら、その後の Draft でドット絵の拡大について議論があったようです。
記録に残っていないため詳細がわからないのですが、ここで image-rendering プロパティが導入され、設定値として optimizeSpeed と optimizeQuality 、そして auto の３つの値が定められた様子です。
optimizeSpeed は速度優先。ドット間の補間などを行わず、ドットが目立つ方法を意味します。
optimizeQuality は品質優先。ドット間の補間を行い、ドットがぼやけるようにします。
auto は、状況に応じてブラウザが調整する、と言う意味です。
これ、Draft で提案されただけの模様で、その次の勧告候補では「optimeizeSpeed と optimizeQuality は非推奨」と明記されました。この２つの値はエラーにはしないが、auto と同じ扱いとなるよう求めています。
ネット上には、optimizeSpeed を指定することでドット絵を拡大できる、としているページもあるのですが、すでに非推奨の値ですので動作しないことになります。
optimize-contrast
２番目の勧告候補は 2011年2月。
ここで、公開文書としてははじめて、image-rendering プロパティが提示されました。
指定できる値は auto と optimize-contrast の２つです。
optimize-contrast は、「シャープなラインを維持し、色をスムージングしない」ように求めています。その主な利用目的として、ドット絵の表示も挙げられています。
シャープなラインを維持し…というのは微妙な言い回しですが、つまり EPX や 類似アルゴリズムを使用することを想定しているようです。
先に書いたように、optimizeSpeed と optimizeQuality は非推奨の値と明記されました。
おそらくは、「速度優先」と「品質優先」という言葉では、処理内容が不明瞭で非互換性につながるためでしょう。
実際、GPU を使用して高速に拡大を行うと、補間を伴う高品質でしか行えません。ドット絵のために低品質の拡大を行うと、CPU を使うことになり低速になります。
Safari の古いバージョンでは、 -webkit-optimize-contrast という設定を行いました。
この記述の根拠は、この公開文書にあるようです。