NO IMAGE

スマホ用の画像は倍の大きさで作るべし

20120909_1今まであまり気にしていなかったが、スマートフォンの画面をチャプチャーした画像を眺めていたら、イメージ部分がどれもぼやけている。

ちょうど2倍に拡大してアラが目立つような感じだ。

高精細なディスプレイを持つスマートフォンでは、実際に画像が粗く見えてしまい、見苦しいらしい。

対処法としては、画像イメージは2倍の大きさに制作し、タテヨコの幅指定で半分に縮小表示しておくのが、お約束との事。

CSS内でトップ・タイトル・ロゴを背景画像に指定しています。

background: url(logo.png) no-repeat;



20120909_2トップのロゴ「Si沢田内科医院」のみ2倍の大きさの画像を作り、CSSの記述で半分の大きさに指定して表示させてみました。

イメージ(logo.png)を2倍のサイズ600×108ピクセルで作り直し、CSSの記述には、以下のbackground-sizeで縮小後の大きさ300×54を指定。

background: url(logo.png) no-repeat;
background-size: 300px 54px;

・・・確かに綺麗に表示されるようになりました。

・・・しかし、全ての画像を作り直すのも面倒です。

・・・気が向くまで、棚上げにしときましょう・・・。^^