にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2022/05/13. 20:49:29.

Webに掲載する画像のファイルサイズは小さければ小さいほど望ましい

WebのユーザビリティとかWeb製作とか(ましてやSEOとか)をあまり知らない場合、例えば「UP可能な画像ファイルの上限が5MB」みたいな制約条件を見たときに、「なら、制限サイズをちょっと下回るサイズくらいで投稿するのがいいのかな?」というような考え方をしてしまうという話を(教育現場で)聞いたので、ちょっと解説しておきたいなと思いました。

結論から述べますが、自分のWebサイトだろうとTwitterに投稿する画像だろうと何だろうと、Web上に掲載するのなら、画像のファイルサイズは小さければ小さいほど正義です。
なぜなら、ファイルサイズが小さければ小さいほど、読み込み速度が速くなるからです。

もはや言うまでもない当たり前のことだという認識だったので、わざわざ語ろうと思ったことが最近はなかったのですけども。(昔々、まだ回線速度がすごく低速だった頃には、言われるまでもなく皆が気にしていて、いろんな工夫がされていたとは思うのですが。)

以下は、その話です。

画像のファイルサイズは極限まで小さくするのが鉄則

例えば、Twitterって、投稿可能な画像のファイルサイズの上限が1枚につき5MBに設定されているそうです。
で、イラストや漫画を描く方々のオリジナル画像データサイズは(たぶん)5MBなど軽く超えていますよね。掲載時(投稿時)にはそれをJPEGなりPNGなりの汎用画像形式に変換する必要があるわけですが、どれくらいのファイルサイズにまで減らせば良いかと考えたときに、「5MBが上限なら、5MBをちょっと下回るくらいにすればいいか」的な考え方をするの人も居るのだそうな。
まさかそんな考え方をされているとは……、と意外で驚きました。

どんな場所に掲載する場合でも、画像のファイルサイズは極限まで小さくするのが鉄則です。
先にも言いましたが、
その理由は、ファイルサイズが小さい方が表示が速いからです!

せっかく描いた(作った)画像なのですから、読み込み速度は遅いよりも速い方が良いですよね!?
なので、ファイルサイズを小さくしない理由がありません。
画像のファイルサイズは可能な限り(できる限界まで)小さくしましょう。

もちろん、画像の品質を犠牲にしてまで小さくせよと言っているわけでは全然ありません。
画像を見せることが目的なのですから、自分が納得するレベルの品質は必要です。その「自分が納得できるレベル」の範囲内で、ファイルサイズが最も小さくなるよう調整(出力)しましょう、という話です。

※注: 画像の面積(ピクセル数)を減らせと言っているわけでもありません。ピクセル数は望みのサイズのままで良いので、ファイルサイズを減らせるだけ減らしましょう。とはいえ、オリジナルのピクセル数が凄まじく大きすぎる場合には面積も削減した方が良いと思いますが。その話はここでの本題と少しズレるので詳しくは書きませんが、例えばiPad Pro 12.9だと解像度は2048×2732で、PC用ディスプレイで比較的大きなサイズ(WQHD)でも2560×1440ですから、それより大きい面積で用意しても表示できる環境がほとんどありません。(2022年時点では、AppleのRetinaディスプレイの最大解像度は6016×3384らしいですけども。60万円くらいするらしいです。^^;)

画像をWebに掲載する際に気にしたい2点

Webに掲載する用途なら、とにかく

  • 素早く表示される」という点と、
  • 閲覧者の通信量(料)を無駄にしない」という点

の2点に気をつける必要があります。
なぜなら、

  • なかなか表示されない画像をじっと待ってくれるほど人々は辛抱強くないし、
  • 通信量に上限がある回線のユーザは、無駄なパケット(通信量)を消費したくない

からです。

皆が皆、容量無制限で高速な光回線でアクセスしてくるわけではない点に注意しましょう。
特に、スマートフォン等のモバイル端末は、『月間通信容量に上限のある契約』(従量制回線)で使われている場合もよくあり、月末等で通信容量の残量が厳しいユーザは、巨大な画像の読み込みを避けたいと思っている可能性もあります。そういう場合、ちょっと重たそうな画像だなと思ったら、見るのをやめてしまうでしょう。(もちろん、よほど興味がある画像なら話は別ですが。)

閲覧者は『せっかち』だと思っておく

ウェブサイトを閲覧する人々は、そんなに何秒も待ってはくれません。

例えば、「読み込みに3秒以上かかるとアクセス者の53%が閲覧を止めてしまう」というデータもあります。
この手の「閲覧者は何秒待たされると閲覧をやめて去ってしまうか」という話は昔から今までたくさんの実験とデータが様々な場所で取られていますから、ググればいろいろ見つかります。参考までに下記に3つ紹介しておきますが、探せば本当に多数あります。(探せばもっと新しい(最近の)データもあるとは思いますが、今回の本題はそこではないので、軽くググって見つけた記事だけを紹介しておきます。)

もちろん、最初からあなたの画像(イラストや漫画など)を求めて見に来てくれた人々は、多少時間が掛かっても待ってくれるでしょう。あなたの絵を見るのが目的だからです。でも、TwitterのTLのように「偶然流れてきただけ」の場合や、Webページのリンクを踏んで「たまたまアクセスしただけ」の場合のように、そこまで深い興味があるわけでもない状態の人々は、読み込みに時間のかかるコンテンツをじーっと待ってはくれません。

特に、あなたの作る画像がECサイトで扱う目的等の「商品画像」ならなおさらです。なかなか画像が表示されないとUX(ユーザ体験)が悪くなってしまい、その販売店に対して良いイメージを持ちにくくなってしまいます。良いイメージのしない販売店(Webサイト)で何かを買おうと思う人は少ないでしょう。

できるだけたくさんの人に見て欲しいならサクッと一瞬で表示されるのが理想

で、例えば「5MBの画像が読み込み完了するまでに何秒かかるか」は、閲覧者が使っている回線の速度次第です(光回線ならほとんどどんな画像でも一瞬でしょうけども)。
なので、画像のファイルサイズだけから「表示に何秒かかる」とは判断できません。
だから、「可能な限り(限界まで)小さくしておく」という対策しかありません。

Twitterの場合もそうですが、最初に小さく加工されたサムネイルが表示されるなら、サムネイルは(おそらく)素早く表示されるでしょう。なので、そのサムネイルだけで興味を引けたり魅力が伝わったりするなら、読み込みに多少時間が掛かってもその1枚は見てもらえるかもしれません。
でも、漫画のように何ページ(=複数の画像)も続く場合、1枚目の画像が重たければ重たいほど、次の画像を見てもらえない可能性が増加してしまうでしょう。
しかし、クリック(タップ)した瞬間に表示されるくらい軽ければ、待ち時間なくサクサク閲覧できますし、通信量(料)の心配もなさそうに感じられますから、終わりまで見てもらえる可能性を高められるでしょう。

人は、よほど興味がない限り「重たくてなかなか表示されない」ようなコンテンツの表示完了を待ちません。
なので、『できるだけたくさんの人に読まれたい(見られたい)』と思うのなら、画像は極限まで軽くして、多くの環境でサクッと一瞬で表示されるレベルにしておく方が望ましいでしょう。

例えば「月間通信容量を使い切って、1Mbpsとか200kbpsとかに速度制限されている環境」で読み込まれたときに、コンテンツが全部表示されるまでに何秒かかるだろうか? ……のような点を考えられると良いですね。

どこまで減らせば良い? →「これ以上は無理!」と思う手前まで

画像の縦横ピクセル数を弄らない場合、
PNG形式やGIF形式では、色数を減らす以外に小さくする余地がないのであまり迷うことはなさそうですが、JPEG形式では品質を犠牲にすることで圧縮率をいくらでも変えられるので、どこまで下げれば良いのかに迷うという話を聞きました。
それはもう、「これ以上は下げられない」と自分で感じる限界の直前までです。

何度も言いますが、ファイルサイズは読み込み速度に直結するのですから、Webでは『容量が小さければ小さいほど望ましい』が正義です。
なので、Webに掲載する画像も(あくまでも「製作者が納得する範囲内で」ではありますが)「限界までファイルサイズを小さくする」のが基本です。

とにかく「ファイルサイズを小さくできる余地があるなら、その余地がなくなる限界まで下げる」のが鉄則だと考えましょう。

圧縮率(品質)を自分で調整できるJPEG形式の場合は、「これ以上は品質を下げられない!」と思える直前のレベルまで下げましょう。
「この品質なら充分見せられる」と思える範囲内での下限にするということです。

そうすれば、可能な限り速く表示され、通信量の無駄もなくなるので、閲覧者側にとってもメリットがありますし、その結果「より見てもらいやすくなる」のなら製作者(公開者)側にもメリットがあるでしょう。Win-Winになります。

というわけで、画像は極限までファイルサイズを小さくするのが正義、という話でした。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---