Webサイトの表示速度を改善する方法のひとつが、画像圧縮です。

しかし、画像を圧縮するだけで、実際にどれほど表示速度が改善するのでしょうか？

本記事では、画像30枚とLCP画像を含むページを使い、圧縮前後の画像容量やページ読み込み時間、LCPの変化を独自に検証しました。

検証結果をもとに、画像圧縮の重要性や注意点、効率的に画像を最適化する方法を解説します。

画像圧縮で本当にサイトの表示速度は改善する？

結論からいうと、画像ファイルの容量を小さくすることで、Webページの表示速度が改善する可能性があります。

Webページを表示するとき、ブラウザはHTMLやCSS、JavaScriptだけでなく、ページ内に配置された画像もサーバーからダウンロードします。画像の容量が大きいほど、ユーザーの端末に届くまでに必要なデータ量が増えるため、特に通信速度が遅い環境では表示に時間がかかりやすくなります。

ただし、画像を圧縮すれば必ずLCPなどの指標が同じ割合で改善するわけではありません。画像がファーストビューにあるか、LCPの対象になっているか、サーバーやJavaScriptなど別の要因がボトルネックになっているかによって効果は変わります。

参考：画像圧縮とは？

画像容量が減るとダウンロード量が減り転送時間が短縮

画像を表示するためには、まず画像データをユーザーのブラウザまで転送する必要があります。

例えば、同じ画像でも以下のように容量が異なると、ダウンロードするデータ量も変わります。

例

圧縮によって2MBの画像を500KBまで削減できれば、ブラウザが受け取るデータ量を4分の1にできます。

特にスマートフォンなど通信環境によって速度が変わりやすい端末では、画像容量の削減が表示までの時間に影響することがあります。

ネットワーク帯域の消費を減らせる

Webページでは、画像以外にもHTML、CSS、JavaScript、フォントなどさまざまなデータが通信されています。

そのため、画像の容量が大きいページでは、画像だけで通信量の大部分を占めることがあります。

例えば、ページ全体のデータ量が以下のようになっているとします。

この場合、画像だけで約4MBあり、ページ全体のデータ量の大部分を占めています。

画像を4,000KBから2,000KBに削減できれば、ページ全体の転送量も約5.4MBから約3.4MBまで減らせます。

つまり画像圧縮は、単に「画像を軽くする」だけではなく、ページ全体でユーザーが受信するデータ量を減らす施策でもあります。

また、画像の転送量が減ることで、同じ通信環境でも他のリソースとネットワーク帯域を奪い合いにくくなるというメリットがあります。

画像圧縮で改善が期待できるケース

画像圧縮の効果が特に期待できるのは、次のようなページです。

• 高解像度の画像をそのまま掲載している
• 1枚あたり数MBある画像が複数存在する
• ページ内に大量の画像がある
• 実際の表示サイズより大きな画像を配信している
• JPGやPNGをそのまま配信している
• ファーストビューに大容量画像がある
• ECサイトやギャラリーなど画像を多用している
• スマートフォン向けの画像最適化ができていない

特に確認したいのが、LCP（Largest Contentful Paint）の対象となっている画像です。

ファーストビューにある大きな画像がLCP要素になっている場合、その画像のダウンロードや表示がLCPの時間に影響する可能性があります。

一方で、ページの表示速度がJavaScriptの実行時間やサーバーの応答時間などによって遅くなっている場合、画像だけを圧縮しても大きな改善につながらないことがあります。

そのため、画像圧縮を行う際は「とにかくすべての画像を圧縮する」のではなく、どの画像がページ速度に影響しているのかを確認したうえで最適化することが重要です。

【独自検証】画像圧縮前後で表示速度を比較

実際に画像圧縮の前後でのページ読み込みの変化を比較してみました。

実際に検証した動画がこちら

今回の検証条件

画像は30枚+LCP用の画像1枚で検証となります。

画像はそれぞれサイズが異なりますが、1M程度のものから20M程度の容量の画像を用意しています。

合計の画像容量が圧縮前は約127MBとなっています。（下記画像参照）

画像自体は画像圧縮前と全く同じ画像を使用していて、無料の圧縮ツールで30画像全てに圧縮をかけました。

軽い画像だと200KB程度のものから、重くても1.5MB程度まで圧縮されています。

圧縮前と比べると7〜10分の1程度まで圧縮されて、全体の画像容量は19MB程度となり全体で6分の1程度の容量まで圧縮できた計算となります。

※実際の圧縮後のファイルは下記画像を参照

判別しやすいように、圧縮前の画像は/images/のフォルダに格納し、圧縮後の画像は/images-comp/というフォルダに分けています。

圧縮前のHTMLでは/images/のフォルダの画像を読み込ませ、圧縮後のHTMLでは/images-comp/のフォルダの画像を読み込ませて比較してみました。

画像フォーマットや画像サイズ、遅延読み込みなどの変更は加えず、圧縮のみだけで比較しています。

画像の遅延読み込みも今回はなしで計測を行っています。

LCP計測用の画像も追加

こちらは30枚の画像とは別にLCP用の画像も、圧縮前、圧縮後と追加で用意しました。

下記画像の左が圧縮前、右が圧縮後となります。

LCP画像の詳細はこちら。

画像圧縮ページのビフォーアフターの改善結果

画像の容量に比例してページ容量も削減されました。

またLCPの読み込みも改善されたので、それぞれ詳しく解説していきます。

画像容量を85％削減するとページ読み込みが97秒改善

画像30枚、画像の容量も129MBとかなり容量は多いページでしたが、全ての画像を圧縮したことでページの読み込みも97秒も改善できました。

画像の読み込み容量が多いことで、ページの読み込み速度に確実に影響がでることがわかります。

画像数が多いページなどもしっかり最適化していくことで表示速度も改善も見えるということになります。

実際の閲覧しているユーザーとしても体感の変化があります。

こちらの画像はファーストビューの画像になりますが、右（画像圧縮後）は読み込み完了となっているのに対し、左（画像圧縮前）は読み込み途中となっています。

画像表示の差は明らかに出ていると言えます。

スクロール後も同様に右（画像圧縮後）が読み込み完了となっていますが、左（画像圧縮前）は読み込み途中となっています。

これですと利用しているユーザーにもストレスが加わるため、離脱の要因となってしまいます。

画像圧縮で容量を抑えるということは、ページ読み込み速度が速くなるというメリットもありますが、画像1つ1つの表示が速くなることでユーザービリティの向上にもなると言えます。

LCP画像も21秒改善

LCP画像も左（画像圧縮前）では29.94秒ほどかかっていた時間が、右（画像圧縮後）では8.12秒と21.82秒改善となりました。

LCP画像の表示が遅れるということは、ファーストビューの大半が表示されない面が大きいということになります。

これだとユーザーは表示を待たされストレスが貯まる状態となり、離脱にもつながる大きな要素です。

画像圧縮を行うときの注意点

圧縮しすぎて画質を落とさない

画像圧縮では、ファイル容量を小さくするほど表示速度の改善が期待できますが、圧縮しすぎると画質が大きく低下する場合があります。

特に人物写真や商品画像では、輪郭がぼやけたり、色の境界にノイズが発生したりすると、ユーザーに与える印象が悪くなります。

容量削減だけを目的にせず、実際のWebページ上で画像を確認しながら、画質とファイル容量のバランスを調整することが重要です。

画像の用途に応じて適切な圧縮率を設定しましょう。

表示サイズ以上の画像を配信しない

実際に表示するサイズよりも大きな画像を配信すると、必要以上のデータをユーザーにダウンロードさせることになります。

例えば、Webページ上では幅600pxで表示する画像を、幅3000pxのまま配信しているケースです。

この場合、画像を圧縮するだけでなく、表示サイズに合わせてリサイズすることで、さらなる容量削減が期待できます。

PCとスマートフォンで表示サイズが異なる場合は、srcsetやpicture要素を利用し、端末に適したサイズの画像を配信することも有効です。

LCP画像を遅延読み込みしない

ページのファーストビューに表示される画像がLCP（Largest Contentful Paint）の対象となっている場合、その画像をLazy Load（遅延読み込み）すると、表示が遅くなる可能性があります。

Lazy Loadは画面外の画像を必要になったタイミングで読み込むための仕組みで、ページ下部の画像には有効です。

一方、ユーザーがページを開いた直後に表示されるLCP画像は、優先的に読み込ませることが重要です。

画像の位置やLCPへの影響を確認したうえで、遅延読み込みの対象を判断しましょう。

元画像を上書きせずバックアップを残す

画像を圧縮するとファイル容量を削減できますが、一度強く圧縮した画像は元の画質に戻せない場合があります。

そのため、圧縮処理を行う際は元画像を直接上書きせず、オリジナルファイルを別途保存しておくことをおすすめします。

特に、将来的に印刷物や広告など別の用途で高画質な画像が必要になる可能性がある場合は注意が必要です。

「original」などのフォルダを作って元画像を保管し、Webサイトには最適化した画像を使用する運用にすると、画質を維持しながら安全に画像を最適化できます。

LandingHubなら画像圧縮だけでなく「画像配信」まで最適化できる

画像圧縮だけでは解決できない課題

画像圧縮によってファイル容量を削減できても、画像の管理や配信に関する課題がすべて解決するわけではありません。

主な課題は次の4つです。

• 圧縮作業の手間がかかる
• 新しい画像の圧縮作業漏れ
• デバイスごとの最適化
• 大量画像の管理

このような課題に対しては、画像をアップロードするたびに手作業で対応するのではなく、画像の最適化と配信を継続的に行える仕組みを整えることが重要です。

LandingHubで画像を自動で最適化・配信も可能

LandingHubでは、画像の最適化と配信を組み合わせることで、手作業による負担を抑えながら表示速度の改善を目指せます。

主な最適化の方法は以下のとおりです。

自動圧縮

画像のファイル容量を削減し、ユーザーがダウンロードするデータ量を抑えます。

画像を個別に圧縮する作業を減らし、効率的な運用につなげます。

WebP・AVIFへの変換

JPEGやPNGなどの画像を、WebPやAVIFといった次世代画像フォーマットに変換することで、画質を考慮しながらファイル容量の削減を目指します。

削減効果は元画像や変換設定によって異なります。

CDN配信

画像をユーザーに近い配信拠点から届けることで、通信経路による遅延を抑え、画像の読み込みを効率化します。

特に、地域の異なるユーザーがアクセスするサイトでは、配信経路の最適化が重要です。

キャッシュ制御

一度取得した画像などのリソースを適切にキャッシュすることで、再訪問時などに同じデータを再取得する負担を抑えられます。

キャッシュの設定や有効期間に応じて効果は変わります。

デバイスに応じた画像配信

PCとスマートフォンでは、画面サイズや必要な画像解像度が異なります。表示環境に適した画像を配信できれば、必要以上に大きな画像をダウンロードすることを防ぎ、通信量の削減につながります。

これらの施策は、それぞれ単独でも効果が期待できますが、画像の容量・形式・配信経路・キャッシュをまとめて最適化することで、より効率的な画像配信を目指せます。

LandingHubで画像最適化を仕組み化するメリット

LandingHubで画像最適化を仕組み化する最大のメリットは、一度限りの改善で終わらせず、継続的に運用できることです。

1. 手作業を減らせる

画像を公開するたびに圧縮や形式変換を行う作業を減らせるため、Web担当者はコンテンツ制作やサイト改善など、ほかの業務に時間を使いやすくなります。

2. 圧縮漏れを防ぎやすくなる

手作業では、画像の圧縮忘れや形式の統一漏れが発生することがあります。最適化を仕組み化することで、個々の担当者の作業に依存しにくい運用を目指せます。

3. サイト全体の画像を継続的に最適化できる

サイトに画像が追加されるたびに個別対応するのではなく、画像の最適化と配信を運用に組み込むことで、サイト全体のパフォーマンスを維持・改善しやすくなります。

特に、広告用のランディングページやSEOメディア、商品画像を多く扱うサイトでは、画像の最適化を継続できる仕組みが重要です。

画像圧縮は、表示速度改善の出発点です。 ファイル容量を削減するだけでなく、画像の形式や配信方法まで見直すことで、より効率的なWebサイト運用につながります。

LandingHubを活用し、画像の最適化から配信までを効率化することで、手作業の負担を抑えながら、Webサイトの表示速度改善に取り組めます。

LandingHubなら画像を劣化させずに軽量化が可能

更にLandingHubの特徴として、元々の画像を劣化させずに軽量化する技術があるため、画像クオリティを大事にしたいサイトにもストレスなく対応が可能です。

最適な圧縮サイズに調整することで、画質などの品質を落とさず画像も軽量化ができるため、サイトのクオリティを落とさず読み込み速度も速くできるので、ユーザーもストレスなくサイトを利用することができます。

画像圧縮による表示速度改善の検証結果まとめ

今回の独自検証では、画像圧縮により、画像容量を約85％削減でき、ページの読み込み完了時間とLCPの数値も改善が確認できました。

この結果から、大容量画像の圧縮は、ページ全体の転送量を減らし、表示速度を改善するうえで重要な施策だと分かります。

画像圧縮もページの表示速度に大きな影響を与える要素なので、しっかり対策が必要ですが作業も大変です。

LandingHubなら、画像の自動圧縮に加え、次世代フォーマットへの変換やCDN配信など、画像の最適化から配信までを効率化できるので、そういった改善ツールもうまく使いながらサイト全体の表示速度改善を目指しましょう。