ウェブサイトの画像を圧縮する方法

HTTP Archiveの「2025 Web Almanac」によると、モバイルのホームページの重さの中央値は2.56 MBで、そのうち911 KBが画像でした。デスクトップでは、ページに含まれる画像の中央値は1,058 KBです。訪問者が待たされているのも画像です。ページの読み込み時に画面でいちばん大きく表示される要素、つまりLargest Contentful Paint（LCP）は、モバイルページの76%で画像でした。

画像が軽ければ、遅い回線でも早く表示され、訪問者のモバイルデータ通信量も減り、サイト側の通信コストも抑えられます。LCPは、Googleがページの使いやすさを評価するための指標であるCore Web Vitalsのひとつです。そのため重い画像は、訪問者を数秒待たせる以上の損失につながることがあります。

表示される枠よりはるかに大きい画像は、圧縮では救えません。幅4000ピクセルのカメラ写真を幅800ピクセルの列に表示すると、ページで使える量の25倍のピクセルを抱えることになります。web.devによると、デスクトップ向けサイズの画像をスマートフォンに送ると、必要な量の2〜4倍のデータを使うことがあります。

• 画面幅いっぱいのバナー：ほとんどのレイアウトでは、幅1600〜2000ピクセル程度で十分です。
• 記事の本文欄の画像：高精細な画面でもくっきり見えるよう、欄の幅の倍程度にします（たとえば幅700ピクセルの欄なら1400ピクセル）。
• サムネイルやプロフィール画像：表示サイズの倍で、多くの場合200〜400ピクセルです。

画像をどれだけ効率よく保存できるかは、形式で決まります。簡単に言えば、写真にはJPGかWebP、ロゴやスクリーンショット、透過を含む画像にはPNGかWebPが向いています。それぞれの形式が有利になる場面は、JPG・PNG・WebPの比較で解説しています。

現在使われているブラウザの約97%がWebPを表示でき、ファイルも目に見えて小さくなることがよくあります。試すにはJPGをWebPに変換やPNGをWebPに変換で変換し、元の画像と比べてください。変換したファイルが必ず小さくなるとは限らず、シンプルな図版では特にそうです。

圧縮では、目で見てもまず気づかないデータを取り除きます。Bitinzの画像圧縮ツールでは、JPG、PNG、WebPのファイルをまとめてドロップし、次のいずれかのレベルを選べます。

• 高速：速度を優先します。大量の画像をまとめて処理するときに。
• バランス：初期設定のレベルで、ほとんどのウェブサイトの画像に適しています。
• 高圧縮：少し時間がかかる分、ファイルがより小さくなります。バナーや背景など、すべてのページに表示される画像に使う価値があります。

形式を維持した場合、Bitinzがアップロードされたファイルより大きいファイルをお返しすることはありません。結果は元の画像と等倍で見比べてください。細かい文字や滑らかなグラデーションを含む画像は特に注意が必要です。納得できたものだけをダウンロードしましょう。

よく圧縮された画像でも、読み込むタイミングやサイズが適切でなければ、ページは遅くなります。ほとんどは、いくつかのHTML属性で対処できます。

• すべての画像にwidthとheightを指定します。ブラウザが表示領域を確保できるので、読み込み中にレイアウトがずれません。
• ページの下のほうにある画像にはloading="lazy"を付けます。訪問者がその近くまでスクロールしたときに初めて読み込まれます。
• ページ上部のメイン画像は、決して遅延読み込みにしないでください。web.devは代わりに、その画像にfetchpriority="high"を指定するよう勧めています。指定するのは一、二枚までにとどめます。
• srcsetとsizesで同じ画像の幅違いをいくつか用意すると、スマートフォンでは大きな画面より小さいファイルがダウンロードされます。
• 画像はキャッシュの有効期間を長く設定して配信します。CDNがあればCDN経由にすると、再訪問した人が画像をもう一度ダウンロードせずに済みます。

PageSpeed InsightsかChromeのLighthouseパネルでページを測定します。Lighthouse 13以降、画像のチェックは「Improve image delivery」というひとつのインサイトにまとめられ、さらに圧縮できる画像、新しい形式で配信できる画像、小さくできる画像が一覧表示されます。削減量が4 KiB未満の画像は表示されないので、一覧が短ければ良い状態です。

それから、スマートフォンで実際にページを見てみましょう。圧縮の問題が最初に表れるのは、くっきりした輪郭、画像内の文字、肌の色です。

コンテンツ管理システムやネットショップなどで、サイトに毎日画像が追加されるなら、手作業ではなく、アップロード時や公開時に圧縮しましょう。Bitinzの開発者向けAPIはHTTPで画像を受け取り、圧縮したファイルへのリンクを返すので、スクリプトやビルドパイプラインから実行できます。どのアカウントにも無料の月間クォータがあります。

1. 01それぞれの画像を、表示サイズの倍程度にリサイズします。
2. 02写真にはJPGかWebP、図版や透過にはPNGかWebPを使います。
3. 03「バランス」で圧縮し、特に大きい画像では「高圧縮」も試します。
4. 04置き換える前に、結果を元の画像と見比べます。
5. 05widthとheightを指定し、スクロールしないと見えない位置の画像は遅延読み込みにします。メイン画像は決して遅延読み込みにしません。
6. 06PageSpeed Insightsでもう一度ページを確認します。

自分のサイト以外に画像をアップロードする場合は、プラットフォームごとに独自のルールがあります。メールとネットショップの画像サイズ要件をご覧ください。