Article page

by
  • Comment:0
  • Trackback:0

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`)
そしてもうひとつ
画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても
(後者は「ついで」的にですが)


スマホで画像がぼやける原因


結論から言うと

「スマートフォンは高解像度ディスプレイなので 元画像のサイズが小さすぎる」

これが原因です
私のテンプレート 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は透過を保ったまま容量だけ削減されます

例) クリックで拡大

元画像 (301KB/ 1280✕720)




容量削減 (141KB/ 1280✕720)



サイズはそのまま 容量は約半分になっていますが
肉眼でその差はほとんどわからないと思います


まとめ


・ スマートフォンでの表示を考慮して 画像はスマホでの掲載サイズ(表示サイズ)の「倍」を設定 (300pxで表示するなら元画最小600px)
・ 画像の容量は必ず削減する

この2点を頭に置いておくと画像に関するストレスが軽減されると思います (●'ω')
最後に 縮尺掲載の仕方は以下の通りです

<img src="画像アドレス" alt="代替テキスト" style="width: 表示横サイズpx; height: auto;">
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い