掲載する写真のファイル容量に注意する
ページを更新するとき、文章だけでは味気ないので写真も入れますよね。
見栄えがしないという理由でなくとも、まず見てもらい文章で補足したいとか、イラストで解説したいとか、そういう理由の方が強いかもしれませんね。
そんなとき、撮影した写真や作成したイラストをページへ掲載するわけですが、どんなものを掲載しようかという事にはとても気をつかいます。ですがファイル容量はどうでしょう。1つの画像が横幅4,000px、ファイル容量は3MBとかになっていませんか？
縦横のサイズが大きな写真をページに載せれば、拡大して細かく見る事ができます。
写真のイズを大きくすると、ファイルサイズもあわせて大きくなってしまいますね。
そうなると、1つの画像を表示するまでに時間がかかってしまいます。
1つだけでも時間がかかるのに、そんな写真が何点も掲載されていたら、それだけ全ての表示が終わるまでにとても時間がかかることが想像できると思います。
ファイルサイズを小さくするメリット
ファイルサイズを小さくすることで、ページを読み込んだ時、全てが完全に表示されるまでの時間が短縮されます。
この、「ページが完全に表示されるまでの時間」というのが重要で、この時間があまりにもかかりすぎてしまうと「戻る」ボタンを押して戻ってしまい、見てくれないという事になりやすくなってしまうんです。
これが意外と重大で、ページの表示に時間がかかりすぎてしまうと、そのページから離れてしまう確率（離脱率）が跳ね上がってしまうんです！！せっかく作ったのにこれではもったいないですね。
ファイルサイズを小さくすると、こうした事態を少なくし、きちんとページを見てもらえるというメリットがあります。
またJavaScriptを使って画像を拡大するような処理をしている場合、画像の読み込みに時間がかかりすぎていることによって、拡大のエフェクトが適用されないという事もあります。
また最初にページを表示した時、写真の高さが揃わず、不恰好なまま表示され、しばらくしてからきちんと整列する・・・といった見た目上カッコ悪いような動きをしてしまうこともあります。
画像の読み込み前はその画像の大きさがどのくらいなのか、ブラウザにはわかりません。なので完全に読み込まれてからJavaScriptによる処理による処理が行われます。こうした読み込みの順番によって表示が一瞬おかしく見えたり、時間差ができてしまいます。
こうした見た目にも影響するので、それが解消されるというメリットもありますね。
そもそも大きな写真を表示しきれる画面があるの？
写真を直リンクにしてブラウザ上で表示させれば、拡大してオリジナルのサイズで見る事ができますが、画像拡大のスクリプトを使う場合にはブラウザの枠に対して最大となるようにしか拡大されません。
一般的に売られている、利用している方のブラウザの横幅は4,000pxもありません。最大でも1,980pxくらいかと思いますので、オリジナルのサイズで見てもらえない可能性が非常に高い事がわかりますね。
綺麗に見てもらいたいから大きくしても、その画像を表示しきれる画面がなければ意味がありません。
4Kのモニターで表示させることを前提とするなら、横幅4,000pxの写真を掲載してもいいかもしれませんが、一般的ではありませんね。時期尚早な感じがします。
一般的な画像の大きさとは
一般的なものでは横幅800px、縦600px、ファイルサイズは300KBくらいでしょうか。
縦横が大きくても、もっとファイル容量を小さく圧縮できる場合もありますし、逆に縦横が小さいのにファイル容量が1MBを超えてしまう場合もあります。縦横はあくまでも画像の見た目上の大きさです。そのファイルの容量と比例するという訳ではありません。
画像の縦横の大きさよりも、ファイル容量を気にするようにしてください。
1ページ内に1MB超えの写真が10数点もあれば、それだけで10MB以上の読み込みが発生することになります。
それだけ表示に時間がかかるという事です。
1ページ全体で多くても2MB位が妥当でしょう。
この値を目安にして、1ページに入れる画像のファイル容量を気にしてみてください。
また、掲載後に自分で表示してみて、どう感じるかを確認したり、第三者に見てもらって感想を聞くのもいい方法かもしれませんね。
まとめ
画像の多用はページのファイル容量を大きく上げてしまいます。それだけページの表示に時間がかかるようになるということです。
ページの表示に時間がかかると、どんどん離脱率が上がってしまいます。
ある調査によると、操作開始から2秒遅れただけで離脱率が50%も上がったという報告があります。皆さん意外と短気ですね・・・
2秒かかるだけでも50%も上がるのに、4秒とか6秒もかかるともっと離れて行く人が増えてしまいそうです。
ページの表示にかかる時間を短縮し、より多くの人に快適に見てもらえるように整える為にも、ファイルの容量には注意が必要です。
これは、写真の縦横サイズを大きくして、より細かく見てもらう以前の問題です。
ページがきちんと表示されなければ、写真も見てもらえません。その点に十分注意して、画像の掲載をするようにしてみてくださいね。
