ゲーム制作記とゲーム制作に役立つ画像素材や情報記事を公開しています

お仕事でドット絵素材など納品する時に、画像素材を一覧できる下の画像のようなhtmlファイルも同梱していて、JavaScriptで拡大表示できるボタンもつけているのですが、ドット絵の場合拡大表示されるとぼやけて(だいぶ前のIE系だと問題なかった気がする)しまって、どうにかならないかなぁ。と思っていたことが、つい最近解決したのでメモです。

↓の表示は2倍に拡大している状態です。


簡潔にいうとこちらの記事を参考にCSSを書き換えて、画像を表示するタグにCSSを適用する属性を追加してやるだけです。
ドット絵の拡大表示と各ブラウザの対応 | SDN Memo
http://memo.sdn-project.net/post/113148316679/pixelated

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) */
}

画像を表示するimgタグには以下のように「class="pixelated"」を追加。
「width=""」と「height=""」を拡大したい値にするか、「style="zoom:2.0;"」などを追加すればOK。

<img src="image.gif" alt="テスト画像" width="64" height="64" class="pixelated">

ちなみにFC2blogの記事上でも、管理画面でCSSの編集ができるので上の手順でCSSに追加して、画像を表示する際にタグを調整すれば同じことが出来ます。
ドット絵画像をblog記事に拡大して掲載したい場合に、画像編集ソフトでドットがぼやけないように拡大する手間が減りますね。
同じように他のblogサービスなどでも出来るんじゃないかなと。

このblogでもさっそくCSSに追加してみたので、以下のように表示されるようになりました。

実寸表示
htmlタグ　<img src="画像ファイルパス省略" alt="20180105sample001.gif" border="0" width="64" height="64" >


2倍に普通に拡大表示　 ぼやけてますね；
htmlタグ　<img src="画像ファイルパス省略" alt="20180105sample001.gif" border="0" style="zoom:2.0;" >


2倍にCSSの設定を有効で拡大表示　カクっとキレイ！
htmlタグ　<img src="画像ファイルパス省略" alt="20180105sample001.gif" border="0" style="zoom:2.0;" class="pixelated" >

関連記事

• ブラウザ上でドット絵をカクっとキレイに拡大表示できたメモ 2018/01/05
• ぴぽやの野望 2013/06/25
• マウスのお掃除　きっかけはウディタ！？ 2011/10/24
• エフェクト作成中。 2011/05/13
• オプーナ　オリジナル・サウンドトラック 2011/01/21

カテゴリ ： 雑記 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】