ウェブサイトの画像に圧縮が必要な理由 | Bulk Image Compressor
Webサイトの読み込みに数秒以上かかる場合、人々は離脱します。それは意見ではありません。Google自身の調査によると、ページ読み込みが1秒から3秒になると直帰率が32%増加します。そして、画像はほとんどの場合、ページの読み込みが遅い最大の理由です。
ほとんどのWebサイトは、必要以上に大きな画像を配信しています。カメラやストックフォトサイトから取得した1枚のヒーロー画像は、簡単に5MB以上になることがあります。まともなブロードバンド接続でも、そのファイルだけで読み込みに数秒かかります。モバイル3G接続では、1枚の画像だけで約15秒かかります。それが5〜6枚もあるページを想像してみてください。
あなたの画像は実際どれくらい大きいのか？
簡単に現実を確認してみましょう。ブラウザの開発者ツール（F12）を開き、Networkタブに移動してページをリロードし、「Img」でフィルタします。サイズを見てください。おそらく1MBを超える画像が少なくともいくつか見つかるでしょう。
参考までに、典型的な非圧縮画像のサイズは次のとおりです：
- ヒーローバナーとして使用されるデジタル一眼レフ写真：4〜8MB
- スマートフォンからの商品写真：2〜5MB
- フル解像度でダウンロードされたストック写真：3〜10MB
- PNGとして保存されたインフォグラフィックまたはイラスト：1〜4MB
適切な圧縮後、これらの同じ画像は品質の目に見える低下なしに100KB〜300KBになります。それは90%以上のファイルサイズ削減です。
ページ速度とCore Web Vitals
GoogleはCore Web Vitalsをランキングシグナルとして使用しており、画像は3つのメトリクスのうち2つに直接影響します。
Largest Contentful Paint（LCP） は、最も大きな表示要素が読み込まれるまでの時間を測定します。ほとんどのページでは、その最大の要素は画像です。ヒーロー画像が5MBの場合、LCPはひどいものになります。Googleは2.5秒を超えるとLCPスコアが不良と見なします。圧縮された画像は、LCPをそのしきい値以下に抑えます。
Cumulative Layout Shift（CLS） は視覚的な安定性を測定します。寸法が定義されていない画像は、読み込み時にレイアウトシフトを引き起こします。これはどちらかと言うとHTML属性の問題ですが、ゆっくり読み込まれる大きな画像は問題を悪化させます。なぜなら、ページがプレースホルダースペースの周りにコンテンツをレンダリングし、それが最終的な画像サイズと一致しない可能性があるからです。
現在のスコアはGoogle PageSpeed Insightsで確認できます。ホームページといくつかの内部ページを実行してみてください。パフォーマンススコアが90未満の場合、画像が問題の大きな原因である可能性が高いです。
SEOとの関連
ページ速度は確認されたGoogleのランキング要因です。デスクトップでは2010年から、モバイルでは2018年からそうです。2021年のCore Web Vitalsの導入により、さらに直接的なものになりました。
しかし、影響は速度シグナルだけにとどまりません。遅いページはGooglebotによるクロール頻度が低下します。Googleは各サイトに「クロール予算」を割り当てており、ページが遅いと、ボットはより多くのコンテンツをインデックスする代わりに、応答を待つことに予算を費やします。数百〜数千ページの大規模サイトでは、これは非常に重要です。
ユーザー行動を通じた間接的な効果もあります。人々が遅いページから離脱すると、Googleはそれを認識します。高い直帰率と低い滞在時間は、時間の経過とともにランキングに影響を与える可能性のあるネガティブなエンゲージメントシグナルを送信します。
ユーザー体験と直帰率
人々はオンラインではせっかちです。Portentの調査によると、読み込み時間が1秒増えるごとにコンバージョン率が平均4.42%低下することがわかりました。Eコマースサイトの読み込みに2秒ではなく5秒かかる場合、売上の意味のある割合を失っている可能性があります。
モバイルユーザーはさらにせっかちです。すべてのWebトラフィックの過半数はモバイルデバイスからのものであり、モバイル接続は通常デスクトップよりも低速です。画像は、スマートフォンが携帯電話ネットワークを使用しても十分に速く読み込めるように十分に小さくなければなりません。
認識要因もあります。高速なサイトはよりプロフェッショナルで信頼できると感じられます。遅いサイトは、たとえ最終的にすべてが読み込まれても、壊れているように感じられます。第一印象はミリ秒単位で形成されます。
帯域幅コストは積み上がる
共有ホスティングやベーシックプランの場合、帯域幅について考えないかもしれません。しかし、実際のトラフィックがあるサイトでは、帯域幅にはお金がかかります。
計算してみましょう。平均的なページに3MBの画像があり、月間10万ページビューがあるとします。それは月間300GBの画像データ転送です。圧縮後、同じページに400KBの画像がある場合、転送量は40GBに減少します。これはホスティングコストとCDN料金の大幅な削減です。
トラフィックの多いサイト、メディア企業、大規模な商品カタログを持つEコマースストアでは、この差は月間数百〜数千ドルの節約になります。
Webサイト画像をバッチ圧縮する方法
PhotoshopやGIMPで画像を1枚ずつ圧縮することもできますが、数十〜数百枚の画像がある場合、それは現実的ではありません。バッチ圧縮が最適な方法です。
Bulk Image Compressorを使用すると、すべてのWebサイト画像を一度にドラッグして一緒に圧縮できます。実用的なワークフローは次のとおりです：
-
現在の画像をエクスポートする。 すでにサイト上にある場合はダウンロードします。新しいサイトを構築している場合は、使用する予定のすべての画像を集めます。
-
フォーマットを選択する。 写真にはJPEGまたはWebPが最適です。透過性のあるグラフィックにはPNGまたはWebPを使用します。どのフォーマットを選ぶべきかわからない場合は、Webパフォーマンスのための画像フォーマットガイドをご覧ください。
-
品質レベルを設定する。 ほとんどのWebサイト画像では、75〜85%の品質設定がファイルサイズと画質の適切なバランスを提供します。サムネイルや背景画像ではさらに低くできます。このトレードオフの詳細については、品質を損なわずにファイルサイズを削減する方法の記事をご覧ください。
-
圧縮してダウンロードする。 ツールはすべてをブラウザ内で処理するため、画像がコンピューターから出ることはありません。サーバー上のオリジナルを圧縮バージョンに置き換えます。
-
寸法も設定する。 800px幅のコンテナに4000px幅の画像を配信しないでください。圧縮前または圧縮中に、画像を表示サイズに合わせてリサイズします。これだけでファイルサイズを劇的に削減できます。
簡単な比較例
実際のWebサイトでの圧縮の効果は次のとおりです：
| 画像 | 圧縮前 | 圧縮後 | 削減率 |
|---|---|---|---|
| ヒーローバナー（JPEG） | 4.2MB | 210KB | 95% |
| チーム写真（JPEG） | 3.1MB | 185KB | 94% |
| ロゴ（PNG） | 890KB | 95KB | 89% |
| ブログサムネイル（JPEG） | 1.8MB | 120KB | 93% |
| 合計 | 10MB | 610KB | 94% |
これが、1秒で読み込まれるページと8秒かかるページの違いです。
新しいコンテンツも忘れずに
既存の画像を圧縮するのは一度きりの修正ですが、継続的なコンテンツのプロセスも必要です。あなたやチームが新しいブログ記事、商品ページ、ランディングページを追加するたびに、それらの画像は公開前に圧縮されるべきです。
画像圧縮をコンテンツ公開ワークフローの一部にしましょう。数分かかるだけで、サイトの速度とSEOへの影響は現実的で測定可能です。
あなたのWebサイトの画像は、おそらく単独で最大のパフォーマンス改善です。ツールは無料で、プロセスは高速で、結果はページ速度スコアに即座に現れます。
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor