WEB上でドット絵を拡大表示する

この記事は 2017年6月28日に最終更新されています。

dogcow
設定なし
dogcow
設定あり



サンプルはAppleのマスコット、Dogcow の Clarus君です。Moof!


少しでも小さなデータ量で済ますことを目的としています。


ややこしい手法は、動かない環境もあるかもしれません。最初から拡大した画像を用意すれば確実です。

ただ、大きな画像は読み込みが遅い環境があるかもしれない、ということもお忘れなく。これも「動かない環境」です。


ここでは、画像は小さな(等倍の)ドット絵のまま、引き伸ばして大きく表示する方法を示します。

もちろん、そのために必要な設定も、できるだけ小さなデータ量で。


目次

設定方法

CSSJavascript

CSS の記述方法について

optimizeSpeedoptimize-contrastcrisp-edgesそして姿を消したpixelated復活

JavaScript について

設置方法技術解説ライセンス


設定方法

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.6.28 追記

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 の3つの値が定められた様子です。


optimizeSpeed は速度優先。ドット間の補間などを行わず、ドットが目立つ方法を意味します。

optimizeQuality は品質優先。ドット間の補間を行い、ドットがぼやけるようにします。

auto は、状況に応じてブラウザが調整する、と言う意味です。


これ、Draft で提案されただけの模様で、その次の勧告候補では「optimeizeSpeed と optimizeQuality は非推奨」と明記されました。この2つの値はエラーにはしないが、auto と同じ扱いとなるよう求めています。

ネット上には、optimizeSpeed を指定することでドット絵を拡大できる、としているページもあるのですが、すでに非推奨の値ですので動作しないことになります。


optimize-contrast

2番目の勧告候補は 2011年2月。

ここで、公開文書としてははじめて、image-rendering プロパティが提示されました。


指定できる値は auto と optimize-contrast の2つです。

optimize-contrast は、「シャープなラインを維持し、色をスムージングしない」ように求めています。その主な利用目的として、ドット絵の表示も挙げられています。

シャープなラインを維持し…というのは微妙な言い回しですが、つまり EPX や 類似アルゴリズムを使用することを想定しているようです。


先に書いたように、optimizeSpeed と optimizeQuality は非推奨の値と明記されました。

おそらくは、「速度優先」と「品質優先」という言葉では、処理内容が不明瞭で非互換性につながるためでしょう。

実際、GPU を使用して高速に拡大を行うと、補間を伴う高品質でしか行えません。ドット絵のために低品質の拡大を行うと、CPU を使うことになり低速になります。


Safari の古いバージョンでは、 -webkit-optimize-contrast という設定を行いました。

この記述の根拠は、この公開文書にあるようです。


次ページ: crisp-edges


1 2 3 次ページ

(ページ作成 2013-06-09)
(最終更新 2017-06-28)
第2版 …他の版 初版

戻る
トップページへ

-- share --

6007

-- follow --




- Reverse Link -