ぴぽやフレンズについて
ぴぽや - ゲームグラフィック素材販売 -

ブラウザ上でドット絵をカクっとキレイに拡大表示できたメモ

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

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

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

CSSにはこちらを追加。
上記サイトの記事のまんまですがw


.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" >
20180105sample001.gif

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

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

この記事へのコメント

非公開にする :

トラックバック

URL :

プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!

TwitterYoutubeチャンネルtwitchチャンネル
Fantia-ぴぽやフレンズCi-en ぴぽやフレンズ

▼運営サイト
・ぴぽやショップ
 有料素材の販売
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki

ご感想・ご連絡


最新記事一覧
2018/07/16 『感情&状態アイコンアニメ素材』発売!
2018/07/07 戦闘エフェクトアニメ 時間魔法 6セット
2018/07/03 戦闘エフェクトアニメ HEXシールド 3セット
2018/07/01 ぴぽやフレンズ(Fantia,Ci-en) 6月の活動報告
2018/06/30 2018年6月 DLsite.comで発売されたゲーム向け素材紹介
カテゴリ
最新コメント
リンク

リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしでも構いません。

RSS
広告
おすすめ有料素材
同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite.com

タイルセット
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
普通シティ 現代日本都市タイルセット
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03

エネミーイラスト
イラスト素材集-baroque-
イラスト素材集-異界のアリス-
RPG制作に使えるデフォルメ素材集~モンスター娘編~ Vol.3

キャラチップ
ぴぽやキャラチップ素材集 乗り物10種
どうぶつキャラクターチップセット3

キャラ立ち絵
中世ファンタジーRPG風2Dキャラクターパック【キャラクター画像素材】
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
物理攻撃エフェクト素材集1 71点収録
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ぴぽや感情&状態アイコンアニメ素材集
ファンタジーゲーム向けアイコン素材1

ゲーム制作ソフト
SMILE GAME BUILDER
SRPG Studio
ティラノビルダー PRO