スマホ用とパソコン用の画像を分けて表示し、サイトのロゴ画像などがボヤけないようにする方法。
2017年現在スマホの機種によるが、 viewport で width=device-width を指定してサイトを表示した場合、横（短辺）の画面サイズは 320px くらいが最小で、400px 前後のサイズが多い。 ただ、画面解像度は HD や FHD などで、実際には 720px や 1080px ある。
例えば、横 720px（ドット）ある画面を viewport によって半分の 360px にして表示しているとする。 ただ、実際ドット（画素）が720個あることは変わらない。 viewport で横 360px のサイトのロゴ画像を横いっぱいに表示した場合、ドットが足りず引き伸ばして表示されるため画像がボヤける。 この例では画像がボヤけず表示されるには 720px の画像が必要になる。
しかし width:720px で画像を表示すると 360px を超えてしまう。 ではどうすれば良いのか、以下に方法を記す。
img 要素には HTML5 から追加された srcset 属性があり、PHP などで制御しなくても HTML だけで表示する画像を変えられる。 例えば以下のように記述できる。
<head> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" /> </head> <img src="logo_300.png" width="300" height="30" srcset="logo_600.png 2x" alt="ロゴ" />
この例は、300×30px の logo_300.png と、縦横2倍の 600×60px の logo_600.png を用意している。 このタグが書かれたページを見ると、基本的にはパソコンは logo_300.png、スマホなど画素密度が高い端末は logo_600.png が表示される。 logo_600.png は width="300" height="30" で表示され、また、十分な画素を持つためボヤけない。
さらに sizes 属性を使って画像の表示サイズを指定することもでき、画面サイズに合わせて可変にすることもできる。 ただ、写真などをレスポンシブデザインで単純に可変表示したい場合は、CSS の width と max-width を併せて使う方法が簡単かもしれない。 srcset と sizes 属性については img - HTML | MDN に説明がある。
例えば、上記の 600×60px の logo_600.png を以下のように 300×30px で表示するように記述する。
<head> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" /> </head> <img src="logo_600.png" width="300" height="30" alt="ロゴ" />
これを iOS の Safari や Android の Chrome で見てみるとボヤけない。 つまり十分な画素を持つ画像を縮小して表示しておけば良いということになる。
ただ残念なことに、パソコンで見るとブラウザによっては縮小した画像が汚く見える場合がある。 私が Windows PC で確認した中では Firefox が最も綺麗で、IE や Chrome は画像によって汚かったり少しボヤけていたりまちまちで、比較的綺麗に表示される場合もある。 この辺りは描画エンジンの違いによるものだろう。 とりあえず srcset を使わず、なるべく簡単にスマホでも綺麗に表示するには良い方法だろう。 ただ、サイトのロゴ画像については汚いと印象が悪いので、srcset を使った方が良いだろう。
