弊サイトでは画像サイズを850pxで運用していましたが、これを1536pxに変更します。その理由を示します。
写真1. 夕方ラッシュ時のダイナミックな様子も表現できる
画像サイズ拡大の理由まとめ
画像サイズ拡大の理由をまとめると、以下の通りです。
- 850pxでは画像を拡大した際に画像の粗さが目立つため、画像サイズを拡大する必要を感じていた
- 1536pxを超えるとファイルが1つ増えるため、上限を1536pxとした
- 画像を縮小する際に工夫することにより、ファイルサイズは約1割のアップに留めた
詳細は以下に示します。
画像サイズと表示速度の関係
あなたが弊サイトの記事を読むとき、以下の通信が行われています。
- 弊サイトのサーバー(ロリポップちゃん)からあなたのデバイスにデータが送られる
- 送られたデータと、データの表示に対する規則(レイアウトなどの命令)を基に高尚な記事が表示される
Webサイトの表示技術についてはもっと細かく語ると、かなり長くなるのでしょうが(そして私もよく知らない！)、大まかにはこの理解で合っているはずです。
段階1でデータが送られますが、表示速度はデータ量に依存します。通信速度は上限がありますから、データ量が多いほど表示に時間がかかります。
データ量はどのように決められるのでしょうか。一般に文字だけであればデータ量は少なく、動画だとデータ量が多いといわれています。そして画像であればその中間です(弊サイトで動画をほとんど導入していないのは通信速度に配慮したためでもあります)。
では、画像のデータは画像サイズによらず一定なのでしょうか。答えは「否」です。一般に、画像サイズが大きいほどデータ量は多いです(画像サイズと画質を両立させようとして新しい拡張子が開発されたりしているのですが)。弊サイトでは画像を高速で表示することにこだわり(画像を高速に表示する方法(WebPの導入))、画像サイズをある程度小さいものにしていました。
この思想を2023年5月に一部変更し、画像サイズを640pxから800pxに変更(2023年中に850pxに再拡大)しました。このときはウィンドウサイズに合わせたため、それでじゅうぶんと解釈していました。
850pxの限界
しかし、850pxという画像サイズには限界があります。
写真2. 850pxの画像(458KB)
850pxの画像を示しました(写真2)。これでじゅうぶんに見えますが、実際にこの写真を400%に拡大し、京王のロゴマーク付近を示しました。
写真3. 850pxの画像を拡大した様子
実際に拡大しました。京王8000系電車の前側の曲線部分やKEIOのロゴマーク付近がいわゆる「ガビガビ」になっていることがわかります。
写真4. オリジナル画像の様子(2560px)
WordPressの仕様か、サーバーの仕様なのかオリジナル画像の5184pxより小さな画像で表示されています。ともかく、元の画像です(写真4)。
写真5. オリジナル画像を400%に拡大した様子
元の画像を400％に拡大しました(写真5)。
写真6. オリジナル画像の拡大
オリジナル画像を(記事にアップロードせずに)そのまま拡大しました(写真6)。
写真3→写真5→写真6の順に画像の見えかたが改善されていることがわかります。ただし、画像サイズと引き換えに通信速度は犠牲になります。今回は、その妥協点を改めて探ったわけです。
縮小革命を使っての画像比較
従来は縮小専用というフリーソフトで画像をパソコン上で縮小していました。そのため、画像サイズ上限が1280pxでした。しかし、縮小革命というフリーソフトではさらに大きなサイズに縮小することが可能です。そこで、縮小革命を入れると同時に多くの設定を変更し、画像サイズを検討しました。
写真7. 1920pxの400%
最初の候補は1920pxです(写真7)。ただし、1771KBと重く、通信速度が大きく制限されます。この画像ならだいぶ鮮明です。これが上限でしょう。
写真8. 1536pxの400%
次の候補は、1536px(1024pxの1.5倍)です。WordPressの特性上、1536pxのファイルが自動で作成されるので、これが候補の1つとして適切と判断しました(1537px以上だと画像ファイルの数が増えてしまう)。画像の鮮明さはそこまで失われていませんが、画像サイズが1157KBもあり、これだと表示速度が犠牲になってしまいます。
この1536pxのままで圧縮率を変更しました。
写真9. 1536pxの圧縮率99%
これでもそこまで品質は犠牲になりません(写真9)。761KBとそれなりに軽量化されています。
写真10. 1536pxの圧縮率98%
圧縮率を98%に減らしました(写真10)。これでもそこまで違和感はありません。660KBと軽量化されていますが、それでも元の458KBより重いデータです。
写真11. 1536pxの圧縮率95%
もう少し圧縮しました(写真11)。515KBと、元の10%増し程度の容量であり、画像の鮮明度と引き換えにこの程度の容量増加は許容できると感じました。
では、画像サイズをもう少し小さくしつつ、圧縮しない設定だとどうでしょうか。
写真12. 1280pxの拡大
1280pxの様子です(写真12)。826KBと写真11より容量は増えているにも関わらず、画像の鮮明度は下がっているように感じます。
写真13. 1024pxの拡大
1024pxの様子です(写真13)。551KBと画像サイズは写真11より大きいです。これらから、画像サイズは1536pxが適切と判断しました。
従来の仕様と1536px(95%圧縮)を横に並べます。
1536px(95%)
850px
写真群1. 今後の基準と従来の運用の比較
じゅうぶんな画像サイズではないでしょうか。なお、弊サイトのレイアウトでは850px以上は同様ですので、サイトを閲覧するうえでのレイアウト上の変更はありません。単により鮮明に見えるようになるだけです。
なお、X上でアンケートをつのったところ、1024pxと1280pxという回答がそれぞれありましたので、850pxはやや時代遅れと感じたのも事実です。世間標準に合わせる意味でも、850pxから1536pxに変更いたします。
参考：元の画像
元の画像を示します。
写真14. オリジナル画像(5184×3888、5.20MB、約5324KB)
写真15. 候補1(1920×1140、100%、1.73MB、約1771KB)
写真16. 候補2(1536×1152、100%、1.13MB、約1157KB)
写真17. 候補3(1536×1152、99%、761KB)
写真18. 候補4(1536×1152、98%、660KB)
写真19. 候補5(1536×1152、95%、515KB)
写真20. 候補6(1280×960、100%、826KB)
写真21. 候補7(1024×768、100%、551KB)
写真22. 従来の縮小画像(850×637、458KB)
従来の仕様と1536px(95%圧縮)を横に並べます。
1536px(95%)
850px
写真群1. 今後の基準と従来の運用の比較
画像サイズ変更の検討の最後に
今回、サイト運営において、画像サイズを変更しました。昔に決めた画像サイズは当時の通信環境を踏まえたものです。しかし、年々通信環境は改善されるでしょう。それを踏まえ、鮮明な画像を提供するほうが重要と考え、今回の変更に至りました。
また、Webp導入により、一部Webブラウザでは200KB程度の画像サイズを実現していることも、今回の決定の1つの理由です。