20時53分21秒 [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点に気をつける必要があります。
なぜなら、
からです。
皆が皆、容量無制限で高速な光回線でアクセスしてくるわけではない点に注意しましょう。
特に、スマートフォン等のモバイル端末は、『月間通信容量に上限のある契約』(従量制回線)で使われている場合もよくあり、月末等で通信容量の残量が厳しいユーザは、巨大な画像の読み込みを避けたいと思っている可能性もあります。そういう場合、ちょっと重たそうな画像だなと思ったら、見るのをやめてしまうでしょう。(もちろん、よほど興味がある画像なら話は別ですが。)
ウェブサイトを閲覧する人々は、そんなに何秒も待ってはくれません。
例えば、「読み込みに3秒以上かかるとアクセス者の53％が閲覧を止めてしまう」というデータもあります。
この手の「閲覧者は何秒待たされると閲覧をやめて去ってしまうか」という話は昔から今までたくさんの実験とデータが様々な場所で取られていますから、ググればいろいろ見つかります。参考までに下記に3つ紹介しておきますが、探せば本当に多数あります。（探せばもっと新しい(最近の)データもあるとは思いますが、今回の本題はそこではないので、軽くググって見つけた記事だけを紹介しておきます。）
もちろん、最初からあなたの画像（イラストや漫画など）を求めて見に来てくれた人々は、多少時間が掛かっても待ってくれるでしょう。あなたの絵を見るのが目的だからです。でも、TwitterのTLのように「偶然流れてきただけ」の場合や、Webページのリンクを踏んで「たまたまアクセスしただけ」の場合のように、そこまで深い興味があるわけでもない状態の人々は、読み込みに時間のかかるコンテンツをじーっと待ってはくれません。
特に、あなたの作る画像がECサイトで扱う目的等の「商品画像」ならなおさらです。なかなか画像が表示されないとUX(ユーザ体験)が悪くなってしまい、その販売店に対して良いイメージを持ちにくくなってしまいます。良いイメージのしない販売店(Webサイト)で何かを買おうと思う人は少ないでしょう。
で、例えば「5MBの画像が読み込み完了するまでに何秒かかるか」は、閲覧者が使っている回線の速度次第です（光回線ならほとんどどんな画像でも一瞬でしょうけども）。
なので、画像のファイルサイズだけから「表示に何秒かかる」とは判断できません。
だから、「可能な限り（限界まで）小さくしておく」という対策しかありません。
Twitterの場合もそうですが、最初に小さく加工されたサムネイルが表示されるなら、サムネイルは(おそらく)素早く表示されるでしょう。なので、そのサムネイルだけで興味を引けたり魅力が伝わったりするなら、読み込みに多少時間が掛かってもその1枚は見てもらえるかもしれません。
でも、漫画のように何ページ(＝複数の画像)も続く場合、1枚目の画像が重たければ重たいほど、次の画像を見てもらえない可能性が増加してしまうでしょう。
しかし、クリック(タップ)した瞬間に表示されるくらい軽ければ、待ち時間なくサクサク閲覧できますし、通信量(料)の心配もなさそうに感じられますから、終わりまで見てもらえる可能性を高められるでしょう。
人は、よほど興味がない限り「重たくてなかなか表示されない」ようなコンテンツの表示完了を待ちません。
なので、『できるだけたくさんの人に読まれたい(見られたい)』と思うのなら、画像は極限まで軽くして、多くの環境でサクッと一瞬で表示されるレベルにしておく方が望ましいでしょう。
例えば「月間通信容量を使い切って、1Mbpsとか200kbpsとかに速度制限されている環境」で読み込まれたときに、コンテンツが全部表示されるまでに何秒かかるだろうか？ ……のような点を考えられると良いですね。
画像の縦横ピクセル数を弄らない場合、
PNG形式やGIF形式では、色数を減らす以外に小さくする余地がないのであまり迷うことはなさそうですが、JPEG形式では品質を犠牲にすることで圧縮率をいくらでも変えられるので、どこまで下げれば良いのかに迷うという話を聞きました。
それはもう、「これ以上は下げられない」と自分で感じる限界の直前までです。
何度も言いますが、ファイルサイズは読み込み速度に直結するのですから、Webでは『容量が小さければ小さいほど望ましい』が正義です。
なので、Webに掲載する画像も（あくまでも「製作者が納得する範囲内で」ではありますが）「限界までファイルサイズを小さくする」のが基本です。
とにかく「ファイルサイズを小さくできる余地があるなら、その余地がなくなる限界まで下げる」のが鉄則だと考えましょう。
圧縮率(品質)を自分で調整できるJPEG形式の場合は、「これ以上は品質を下げられない！」と思える直前のレベルまで下げましょう。
「この品質なら充分見せられる」と思える範囲内での下限にするということです。
そうすれば、可能な限り速く表示され、通信量の無駄もなくなるので、閲覧者側にとってもメリットがありますし、その結果「より見てもらいやすくなる」のなら製作者(公開者)側にもメリットがあるでしょう。Win-Winになります。
というわけで、画像は極限までファイルサイズを小さくするのが正義、という話でした。
この日記へのコメントはお気軽に！ コメント数:0件
コメント数： 0件
