【サイト作成】スマホで画像がぼやける時の対応

スマホでみるとタイトル画像やアイコンボタンがにじんで見えるなぁと思っていたのですが、気のせいかなぁという程度に思ってました。気のせいでなくて実際ににじんでいます。スクリーンショットをとって実際にパソコンでみるとにじんでました。

スマホの画面は最近はほどんどが、Retinaディスプレイやそれに類する高精細になっているために上記のようにぼやけてみえるというのがこの現象のようです。

対策としては、２倍の大きさの画像を用意して縮小表示させればよいという感じになるようです。

・imgタグの対応
・background-imageの対応(CSS)

当サイトでは上記の２つを使っていたのでこれについて書いておきます。

imgタグの対応

<img src="sample128x64.jpg" width="64″ height="32">

イメージタグの場合は簡単で、画像は縦横それぞれ２倍大きさを持ったものを用意して、サイズ指定で調整します。

background-imageの対応(CSS)

方法その１

#back-to-top{
  background-image:url(sample128x64.jpg);
  background-repeat:no-repeat;
  width:64px;height:32px;
  background-size:64px 32px;
}

スタイル（CSS)でbackgroundなどで画像を指定して表示さえてる場合は、background-sizeというのを併用するとOKのようです。画像は縦横それぞれ２倍の大きさのものを用意して、 background-sizeでサイズ指定することで対応で起案す。

ただし、IE8以下はbackground-sizeを未サポートなのでIE8も対応する場合は何らかの対応が必要（記事後半に記述）。

方法その２

@media only screen and (-webkit-min-device-pixel-ratio: 2){
 #back-to-top{
   background-image:url(sample128x64.jpg);
   background-repeat:no-repeat;
   width:64px;height:32px;
   background-size:64px 32px;
 }
}

今回は使用しませんでしたが、メディアクエリーで、高精細ディスプレイかどうかを判別して適応する方法もあるようです。

参考： 2013年08月29日：jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (2/2) - ＠IT

device-pixel-ratioは、もともとアップルがRetinaディスプレイを開発した際に、WebKitを独自に拡張したものであってW3Cの標準規格ではないが、後にAndroidやChrome、Firefox、Operaも対応した。
現在は、実装状況がまちまちな上に、今後も高解像度な端末が発売される事が考えられるので、デバイス・ピクセル比だけをキーにスマホ判別させるのは現状では難しい。jsまたはサーバサイドに頼った方が無難。
2014/09/16：HTML - Media Queriesの指定について - Qiita

IE8以下の対応

IE8以下は、background-sizeを未サポートなのでそれに依存している場合は対策をする必要がある

方法　その１

<!--[if lte IE 8]>
<style>
#back-to-top{
  background-image:url(sample64x32.jpg);
  background-repeat:no-repeat;
  width:64px;height:32px;
}
</style>
<![endif]-->

たとえば、IE8の場合だけ上記のようにHTMLファイルのほうに追記して、スタイルを上書きするなどが考えられる。または、IE8だけに適用させるCSSハックを使用すれば、スタイルシートに直接書くことも可能だと思う。

方法　その２

#back-to-top{
  background-image:url(sample128x64.jpg);
  background-repeat:no-repeat;
  width:64px;height:32px;
  background-size:64px 32px;

  background-image:url(sample64x32.jpg)\9; /*IE8だけ読み込ませる*/
}

・[CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス

CSSハックを使う方法ですね。
最終行だけは、IE8しか読まれないという具合になります。
background-imageがIE8だけ上書きされるということで、対応するということですね。