ドット絵にまつわるエトセトラ

ドット絵をHTML上で綺麗に拡大する

毎回ドット絵を拡大してウェブ上で公開したいときにはPhotoshopの「画像解像度」→「ニアレストネイバー法」で任意の大きさに拡大して保存した画像をhtmlに挿入していました。
以下の方法ではHTMLの画像サイズ指定でハードな輪郭を保持したまま画像を拡大することができます。

CSSの記述(以下の記述ではimg全てに適用されます)

img {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
vertical-align: text-bottom;
}

Edge用のJSの記述(以下の記述ではimg全てに適用されます)

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.msImageSmoothingEnabled=0;
v.drawImage(d,0,0,x,y);$(c).replaceAll(d)})})

以上の方法は魔法使いの森さんの「WEB上でドット絵を拡大表示する」より抜粋させていただいております。 詳しくはリンク先を参照ください。

CSSのbackground指定のドット絵の拡大

Javadcriptでがちゃがちゃ動かしたいとなると、htmlにimgとしてドット絵を置くだけではなく、htmlの要素に対しCSSのbackgroundで拡大したドット絵を指定したい時もあるかと思います。以下検証してみました。

#hogehoge{
background-image: url(hogehoge.gif);
-moz-background-size:100% auto;
background-size:100% auto; 
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}

CSS上で拡大するので基本的にbackground-sizeが動作する環境を前提とします。対応ブラウザ一覧

元の画像サイズ：h16px x w17px

width: 85px; height: 80px;
-moz-background-size:100%;
background-size:100%;

元の画像サイズ：h16px x w17px

width: 85px; height: 80px;
-moz-background-size:85px 80px;
background-size:85px 80px; 

結論としては、firefoxとChromeのみで動作するとなりました。 firefoxで左記の記述を削除した場合には、拡大指定した画像がぼやけて見えるので、効いているは効いています。 他のブラウザがほとんど壊滅でした。

※その他詳細のブラウザは細かく検証できていません。