スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀)
そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)
スマホで画像がぼやける原因
結論から言うと スマートフォンは高解像度ディスプレイ(高dpi)なので元画像のサイズが小さすぎる ためです。
私のテンプレート All_about_us の説明文を例に取りますと…
All_about_usのサイドメニュー部分は横300pxしかありませんが、背景に設定する画像は横600px以上 つまりサイドメニュー横幅の 2倍 のサイズを推奨しています。
これ何故かと云いますと、最近のスマートフォンはiPhoneのretina(レテイナ)に代表されるように 高解像度ディスプレイが当たり前に搭載されています。
px(ピクセル)が一体どんなもので高解像度ディスプレイがどういった構造になっているか、というのはとても専門的なお話しなのでここでは割愛しまして、端的に説明すると
画像を横300pxで綺麗に表示させるためには 元画像は横600px必要。
倍は必要です。つまりは 大きめの画像を縮尺で掲載しないと解像度がついていけないよ ということです。
掲載する場所が300pxなので画像表示の負荷を考慮して元画像も300pxで…ということをしてしまうと 結果スマホで画像がぼやける、と。そういうことでございます。
髪の毛のあたり見て頂きますと上の画像がぼやけているのがわかるかと思います。
画像容量は削減しましょう
なんとなくダブルスタンダードな感じがしますよね。画像は倍サイズで掲載しろって言ってみたり容量削減しろって言ってみたり。
画像の容量削減 = サイズ縮小
と思いがちですが実際はそれだけではなく「縦横サイズと画質を極力維持した上で容量だけを削減する」というのは可能ですから是非行って頂きたいんです。
特に先にも述べた スマートフォン ですが、スマホで撮影した写真というのはとっても大容量で平均1〜2MBもの容量を有しています。そして縦横サイズ自体もとても大きいです。
ブログに掲載できる大きさには限界がありますのでせいぜい長辺1000px〜1500pxがいいところ。
たまに横1800pxあるいは2000pxなんていう特大サイズの画像を掲載されて、それを 横スクロールバー を操って見てもらう、というページに行き当たりますが、正直たぶん見る人少ないです。
私なら99.9%スルーします(笑)
画像を見るためだけの横スクロールバーってすごく鬱陶しいんですよ。
そして画像というのはどんなにそれが美麗であっても その一部しか目で一度に捉えられないとすると、印象がそれこそぼやけてしまいます。
多くの人にとって全体像が見られないとなにがなんだかわからないんですね。
例えば美術館に赴いて みなさん額縁から少し距離とったりしませんか。または映画館で席を予約する際最前列を避けて少し後ろの席を取ろうとしませんか。
それは 絵や画面全体を目で捉えたいから ですよね。
ページをローディングしたら画像が一枚づつベロベロ〜…という状態は 容量が大きすぎて読み込みに苦労している 合図ですから適切な処理を行われることをおすすめします。
おすすめサイト ↓
Tiny PNG
サイト名に「png」とありますが扱える画像拡張子は「png」と「jpg(jpeg)」の2種です。サイズの縮小はかかりません
そして 透過pngは透過を保ったまま容量だけ削減されます。
サイズはそのままで容量は約半分になっていますが、肉眼でその差はほとんどわからないと思います。
まとめ
- スマートフォンでの表示を考慮して 画像はスマホでの掲載サイズ(表示サイズ)の「倍」を設定 (300pxで表示するなら元画最小600px)
- 画像の容量は必ず削減する
この2点を頭に置いておくと画像に関するストレスが軽減されると思います。 最後に 縮尺掲載の仕方は以下の通りです。
<img src="画像アドレス" alt="代替テキスト" style="width: 表示横サイズpx; height: auto;">
