要点
最適化されていない画像は、ページ全体の重さの最大 75% を占めます。圧縮すれば、見た目の劣化なしに読み込み時間を半分に短縮できます。
さらに詳しく知るには、こちらに質問
画像の圧縮は、ほとんどのウェブサイトにとって最も効果の大きい最適化です。HTTP Archive によると、画像は平均的なウェブページの総バイト数の 40% 以上を占めます。EC サイトやポートフォリオのように画像が多いサイトでは、その割合は 75% を超えます。不要な 1 キロバイトはそのままページの読み込み時間を遅らせ、Core Web Vitals のスコアを悪化させ、Google の検索結果での順位を下げます。
Google は、2018 年からモバイルで、2021 年からは Core Web Vitals を通じて、表示速度を直接のランキング要因にしています。メインコンテンツがどれだけ速く表示されるかを測る Largest Contentful Paint(LCP)は、画像のファイルサイズに大きく左右されます。LCP が 2.5 秒未満のサイトは、それより遅い競合よりも明らかに上位に表示されます。web.dev の調査では、LCP の基準を満たせないときの対策として最も多いのが画像の軽量化でした。
画像圧縮の仕組み
画像圧縮は、冗長なデータを取り除いてファイルサイズを小さくします。方法は 2 つあります。非可逆圧縮と可逆圧縮です。
非可逆圧縮は、人の目では判別しにくいデータを削除します。品質 70% から 85% の範囲では、元の画像と圧縮後の画像の見た目の違いはほとんど分かりませんが、ファイルサイズは 60% から 80% 小さくなります。ピクセル単位の忠実さよりもファイルサイズが重要なウェブ用の画像では、ここが最適な設定です。
可逆圧縮は、画像データを一切削除せずにファイルサイズを小さくします。削減率は小さく、通常は 10% から 30% ですが、画像は元のファイルとビット単位で同一のままです。技術図面、スクリーンショット、医療画像など、細部がすべて重要な画像に向いています。
Sorank の無料の画像圧縮ツールは、見た目の品質を保ちながらファイルサイズを最大限に削減する、高度な非可逆圧縮アルゴリズムを使っています。品質スライダーで、目的に合った最適なバランスを自分で決められます。
画像サイズが SEO の順位に影響する理由
Google は Core Web Vitals の 3 つの指標、LCP、First Input Delay(FID)、Cumulative Layout Shift(CLS)を測定しています。大きな画像は LCP を直接悪化させます。ブラウザーは画面に表示する前に画像ファイル全体をダウンロードしなければならないからです。圧縮していない 3 MB のヒーロー画像は、モバイル回線では読み込みに 5 秒から 10 秒かかり、LCP は 2.5 秒の基準を大きく超えてしまいます。
LCP 以外にも、重い画像はページ全体の容量を増やし、モバイル利用者の通信量と通信費に影響します。Google のモバイルファーストインデックスでは、モバイルでの体験が順位を決めます。大きな画像のせいでモバイルページの表示が遅ければ、パソコンでの順位も下がります。
表示速度は直帰率にも影響します。Google の調査によると、ページの読み込み時間が 1 秒から 3 秒に伸びると直帰の確率は 32% 上がり、1 秒から 5 秒では 90% まで跳ね上がります。画像を 1 枚圧縮するたびに、訪問者がコンテンツを見る前に離脱する可能性を確実に下げられます。
適切な画像形式の選び方
WebP は、2026 年のウェブ用画像として最も推奨される形式です。同等の画質で JPEG より 25% から 35% 小さく、非可逆圧縮と可逆圧縮の両方に対応します。Chrome、Firefox、Safari、Edge をはじめ、最新のブラウザーはすべて WebP に対応しています。
JPEG は、写真や色数の多い複雑な画像の標準であり続けています。圧縮率は優秀ですが、透過には対応していません。幅広い互換性が欠かせない場合や、とても古いブラウザーの利用者がいる場合は JPEG を使ってください。
PNG は、透過、輪郭の鮮明さ、正確な色再現が必要な画像に適しています。ロゴ、アイコン、スクリーンショットは PNG でよく圧縮できます。ただし写真のような内容では、PNG のファイルは JPEG や WebP より大きくなるのが普通です。
AVIF は最も新しい形式で、WebP よりさらに高い圧縮率が得られます。対応は広がっていますが、まだすべての環境ではありません。削減量を最大にするために、WebP を代替として用意したうえで AVIF を追加する形で検討してください。
大規模サイトのための一括圧縮
EC サイト、ブログ、メディアでは、画像が数百枚から数千枚に及ぶことも珍しくありません。1 枚ずつ圧縮するのは現実的ではありません。本ツールは一括処理に対応しており、複数の画像をまとめて圧縮し、1 つのアーカイブでダウンロードできます。
既存のサイトでは、アクセスの多いページの画像から優先して圧縮してください。Google PageSpeed Insights を使えば、画像に関するスコアが最も悪いページを特定できます。上位 20 ページを圧縮するだけでも、順位の改善をはっきり感じられます。
新しい画像をサイトに追加するときは、圧縮を作業の一部にしてください。公開する前に、元の画像を本ツールにアップロードします。こうしておけば、最適化されていない画像が積み重なって時間とともに表示速度が落ちることを防げます。
画像圧縮のベストプラクティス
圧縮する前に、必ず表示サイズに合わせて画像をリサイズしてください。4000x3000 ピクセルの写真を 800x600 で表示すると、決して見られないピクセルのために通信量を浪費します。先にリサイズし、そのうえで圧縮すれば、ファイルサイズを最小にできます。
srcset 属性でレスポンシブ画像を使い、画面幅ごとに異なるサイズを配信しましょう。モバイルの利用者には小さい画像を、パソコンの利用者にはフル解像度の画像を届けられます。
ファーストビューより下にある画像には loading="lazy" で遅延読み込みを有効にしてください。まだ見えていない画像をブラウザーがダウンロードしなくなり、最初の表示が速くなります。
すべての画像に width と height 属性を明示して、レイアウトのずれを防いでください。これは、読み込み中の表示の安定性を測る Core Web Vitals の CLS への対策になります。
最後に、画像ファイルに長めのキャッシュヘッダーを設定して、ブラウザーキャッシュを活用してください。訪問者が一度圧縮済みの画像をダウンロードすれば、ブラウザーがそれを保存します。次回以降のページ表示では、サーバーから取り直さずにキャッシュから即座に読み込まれます。

































































































