今まであまり気にしていなかったが、スマートフォンの画面をチャプチャーした画像を眺めていたら、イメージ部分がどれもぼやけている。
ちょうど２倍に拡大してアラが目立つような感じだ。
高精細なディスプレイを持つスマートフォンでは、実際に画像が粗く見えてしまい、見苦しいらしい。
対処法としては、画像イメージは２倍の大きさに制作し、タテヨコの幅指定で半分に縮小表示しておくのが、お約束との事。
CSS内でトップ・タイトル・ロゴを背景画像に指定しています。
background: url(logo.png) no-repeat;
トップのロゴ「Si沢田内科医院」のみ２倍の大きさの画像を作り、CSSの記述で半分の大きさに指定して表示させてみました。
イメージ（logo.png）を２倍のサイズ600×108ピクセルで作り直し、CSSの記述には、以下のbackground-sizeで縮小後の大きさ300×54を指定。
background: url(logo.png) no-repeat;
background-size: 300px 54px;
・・・確かに綺麗に表示されるようになりました。
・・・しかし、全ての画像を作り直すのも面倒です。
・・・気が向くまで、棚上げにしときましょう・・・。＾＾