htmlのimg画像がぼやける原因と対処法
画像がぼやけるのは作成サイズより表示サイズが大きくなっているためです。
レスポンシブルデザインやリキッドレイアウトが主流のため、作成サイズ通りに画像を表示しにくいです。
画像を使い回すなら大き目の画像を作りPCで等倍縮小させ、でなければ端末ごとに画像を準備しましょう。
htmlのimg画像がぼやける
WEBサイトを構築する際に気を付けなければならない事の一つに「鮮明な画像を見せる事」があります。
特定の環境では画像がぼやけて見える場合があり、それは閲覧ユーザーの満足度に影響します。
画像がぼやける原因とその解決方法をご紹介します。
様々な環境での対応が必要なWEBの世界
WEBページは紙媒体の広告と違って、閲覧しているユーザーの環境で見え方が違ってきます。
ユーザー全てに全く同じものが見えている訳では無いのですね。
画面自体もそれぞれ違うので、配置やレイアウトなどはユーザーごとに違ってきます。
だからこそテキストと画像だけは、明確でなければなりません。
画像の不明瞭さはユーザー離れにつながる
テキストがぼやける事はほとんどありませんが、画像は見せ方によってぼやけて見える事があります。
上記画像は、左側が鮮明な画像で右側がぼやけた画像の比較です。上の例はあまり差はない様に思われます。
場合によっては画像の不明瞭さから、そのページ自体をそれ以上見てくれなくなる可能性もあります。
ユーザーの満足度を低下させないためにも、画像がぼやけるパターンと仕組みを熟知して解消しておきましょう。
画像がぼやける原因1：サイズが違う
画像がぼやける原因として一番シンプルなのは、画像の作成サイズと表示サイズとが合っていない事です。
一番シンプルな原因ですよね。
作成サイズより大きく画像を表示する
100px×100pxの元画像
200px×200pxに広げた画像
例えば元サイズが100pxの横幅の画像をwidth="200"に拡大表示すると、表示時に引き伸ばされてしまいます。
これにより100pxの横幅が2倍に広げられてしまうので、その分画像がぼやけます。
CSSで制御した場合も
タグ上でwidthを指定する以外に、CSSで指定をしても同じような現象になります。
さらにレスポンシブルデザインでよく使われるwidth: 100%;も同様です。
CSS
.content img{ width: 100%; }
枠内100％の画像（左枠内）
これは表示枠内に目一杯画像を広げる命令ですから、元サイズが何であろうと枠内を全て画像で敷き詰めようとします。
元サイズが大きければ問題はありませんが、小さければその分引き伸ばしされる訳ですね。
※当然の事ながら上記はJPG・PNG・GIF画像でのお話です。SVG画像などベクター形式のものは多くしても荒れません。
解決方法：作成サイズと表示サイズを合わせる
理想は、常に作成サイズ通りで画像を表示させる事ですね。
作った時の縦横サイズと同じサイズで表示すれば、基本的に画像が荒れる事はありません。
しかし現在は環境的に、作成サイズと表示サイズが常に同じでは済まない場合もあります。
画像が縮小されるケースも多い
後述しますが、今はスマホ対応が必須の状況もあり、画像は常にサイズ変化が必要になります。
画像は元サイズよりも縮小して表示する場合が多いのですが、元サイズが拡大される事がない様にしましょう。
200px×200pxの画像を半分の100×100に縮小した画像
大きさは計画的に準備
画像は拡大させた時だけでなく、縮小した場合もぼやける事があります。
特に文字テキストなどを表示した画像は、縮小時もぼやけ具合が鮮明にわかります。
拡大縮小時の荒れを最小限に抑えるためにも、大きいサイズを用意する場合はpxが丁度2倍となる様な準備の仕方を心がけましょう。
画像がぼやける原因2：サイズが小数点以下の場合
現在一般的なWEBサイト構築では、レスポンシブルデザインやリキッドレイアウトが利用されています。
画像のモニター幅によって横幅が常に変動するレイアウトの事ですね。
画面幅によって横幅が変化して表示サイズに小数点以下が付くと、画像がぼやけて見えます。
小数点以下とは、表示中の実サイズが例えば「415.5px」などと表示されている場合ですね。
F12のデベロッパーツールで画像を確認
デベロッパーツールで画像を確認すると、実寸サイズがすぐにわかります。
上記の様に画像の実寸に小数点以下の数値が出ていると、画像が微妙にぼやけます。
写真だとその差はわかりにくいのですが、上記の様に文字を画像にしていると顕著に出ます。
リキッドレイアウトでの例
中でもリキッドレイアウトは、レスポンシブルデザインの様に端末ごとに横幅固定をしません。
常にモニター幅に応じて幅を「％指定」するのが特徴です。
％指定の割り振り
例えばとあるボックスサイズが親要素の49％になっていたとします。
左右の子要素ボックスが隣り合う余白などを考えると、どうしてもこのような中途半端な割り振りになりますよね。
そのボックス枠に対して中の画像は100％幅で表示させます。
掲載時の画像サイズに小数点が付く場合
横幅960pxの画像があった場合、その49％に縮小すると470.4pxになり、小数点以下の数値が出ていますよね。
実際に表示された画像の横幅サイズが「470.4px」と表示されています。
このように少数点以下になって表示されている画像はぼやけるのです。
上記は特にChromeブラウザで起こる現象で、それ以外のブラウザでは見られません。
解決方法
この様な小数点を出さないためにも、しっかり整数で割り切れる数値にするべきです。
つまり上記の例の場合960pxではなく、900pxなどにしておくのです。
900pxなら49％でも441pxになりますので、小数点以下が付かなければ画像は荒れません。
複数画像を使い分ける
この様にリキッドレイアウトの場合、一つの画像で使い回すのは難しい事がわかります。
960pxが入るレイアウト内に900pxの画像を使うのは、そもそもバランスが悪いですしね。
ですので960pxを使う場合と900px（49％の時に441pxとなる）を使う場合とで、分岐するのが良いでしょう。
％指定をしてブラウザの拡大縮小に身を委ねるのではなく、幅に応じて何種類かの画像を用意し、pictureタグで制御した方が良いと思います。
画像がぼやける原因3：スマホで見ると画像が荒れる
この原因が遭遇するケースとしては一番多いかも知れません。
PCではきれいに表示されているのに、スマホ端末で同じ画像を見ると荒れているケースです。
これにもちゃんとした理由があります。
Retinaディスプレイ
RetinaディスプレイとはiPhoneやMacなどアップル製品に使われている画面です。
Retinaディスプレイの特徴は、画面の解像度が2倍になっていて高画質で鮮明に見える事です。
Retinaディスプレイが通常のPCディスプレイの2倍の粒の細かさを持っているためです。
通常の1pxとRetinaディスプレイの1pxの違い
パソコンの2分の1の力で表現できる
2倍の粒の細かさにより何が起こるのか具体的に解説しましょう。
PC版とスマホ版のサイズの違い
気球の画像サイズは同じですが、スマホ版の方が半分程度のサイズに見えていますね。
この様に同じ画像をPCとRetinaディスプレイとで見比べると、Retinaディスプレイ画像の方が2分の1のサイズに小さく見えます。
2分の1サイズで見える＝性能が2倍
例えばRetinaディスプレイ（スマホ端末）の画面幅が320pxとなっている場合
パソコン上で横幅320px×240pxの画像は、Retinaディスプレイでは半分の、160px×120pxのサイズに見えるのです。
これは縦横共に2分の1の空間で表現できているという、表示能力の高さを示しています。
100％幅には2倍サイズが必要
逆に言えばRetinaディスプレイはパソコン時の二倍のピクセル数を要する程、粒が細かい事を示しています。
先ほど320pxの画像の例では、スマホで見ると半分の160pxで見えた訳ですよね。
スマホ画面枠の320pxを全て敷き詰めるためには、パソコンで2倍に相当する640pxの幅が必要だという事です。
画像320px（原寸サイズ）→スマホ160px（画面半分）
画像640px（2倍サイズ）→スマホ320px（画面一杯）
2倍に引き伸ばすとぼやける
ここで320pxの画像をそのままRetinaディスプレイに100％幅で使ってしまうと、2倍に引き伸ばされてしまいます。
なので画像がぼやけるのです。
解決方法
ズバリ！Retinaディスプレイ向けに縦横2倍（4倍）のサイズの画像を用意する事です。
320px×160pxサイズの画像であれば、縦横2倍の640px×320pxの画像を用意するのです。
これにより320pxのスマホ端末であれば2倍の640pxできれいに敷き詰める事ができ、画像は荒れません。
Retinaディスプレイの利点
この様に通常の2倍の解像度をRetinaディスプレイは持っています。
あえて640×640のピクセル量を使って320×320の画像を表現する訳ですから、画質の高いきれいな画像に見えるのです。
これがRetinaディスプレイの利点です。
スマホ版で画像があれるケース
PCでレイアウトを右袖左袖に分けた場合スマホ版で画像がぼやけやすいのは、「サイドコンテンツ」の方です。
例えば1200幅の大枠を左枠800px、右枠を400pxに分けていたとしましょう。
左枠のメインコンテンツ画像
コンテンツが入る左枠内で幅一杯に表示する場合、横幅800pxの画像を使いますよね。
800pxならスマホ画面でも2分の1の400px相当あり、100％表示してもある程度きちんと表示されます。
しかしサイドコンテンツ欄に相当する右枠400pxの中で、画像を設置する場合は注意が必要です。
右枠のサイドコンテンツ画像
枠が400pxだからといって400pxの画像を作ってしまうと、スマホ画面では半分の200px相当にしかなりません。
レスポンシブルデザインならスマホ表示時は左枠が「上」右枠が「下」に並ぶだけで、同じ画面幅になりますよね。
となるとサイドコンテンツ上の400pxの画像は、スマホ画面だと200pxしかなくなります。
左枠と同じように幅100％に指定していると、2倍に引き伸ばされてしまって画像がぼやけるのです。
PC版の狭い枠に惑わされない
ですのでレスポンシブルデザインでは小さい枠内に設置する画像に注意が必要です。
掲載サイズはPC版向けの400pxではなく、スマホ向けに2倍の800pxで前もって作成しておくべきなのです。
その上でPC版では2分の1の400pxに縮小（100％幅指定）して表示させておきましょう。
画像を使い回すか別々に用意するか
この様に前もって大き目に作っておけば両方の端末で使い回せる事がわかりましたね。
共通画像を使う場合はどちらかというと、常に大きく作ってPC版で縮小させておくのがセオリーでしょう。
等倍で縮小させるのであれば、それ程画像が荒れる事は無いはずです。
端末ごとに個別の画像を用意
しかし常に等倍縮小ができるレイアウトばかりではありません。
場合によっては画像の使い回しが向かない環境もあります。
その場合は、その端末ごとに最適なサイズの画像を別々に用意するなどの対応が必要です。
pictureタグなどでコントロールすれば、常に最適な画像を表示させることが可能ですからね。
ただし管理は多少複雑になるので、そのあたりは管理者の判断でしょう。
