ここにファイルをドロップ、または選択してください

サイトの実際の表示幅までリサイズしてから、上のツールで圧縮しましょう。以下では、画像の役割ごとの目安サイズと、その根拠を解説します。

役割ごとの目安サイズ

  • ヒーロー画像・メインビジュアル(ファーストビューに表示される横幅いっぱいの画像): 200KB以下。多くのページでLCP(Largest Contentful Paint)の対象になるため、読み込み速度がGoogleの評価指標に直結します。
  • 本文中の写真: 100KB以下。スクロールに応じて読み込まれるためヒーロー画像ほど致命的ではありませんが、1記事に10枚以上あると合計容量が無視できなくなります。
  • サムネイル・商品一覧の画像: 1枚あたり50KB以下。表示サイズが小さいため強めの圧縮による見た目への影響が少なく、一覧ページでは数十枚同時に表示されることも珍しくありません。

これらは絶対的なルールではなく、目安です。写真をメインにしたポートフォリオサイトであれば、より大きく高画質な画像が必要になる場面もあります。大切なのは、何となくカメラやスマホが出力したファイルをそのままアップロードするのではなく、役割に応じて意図的にサイズを決めることです。

なぜユーザー体験だけでなく検索順位にも影響するのか

GoogleのCore Web Vitalsに含まれるLCP(Largest Contentful Paint)は、画面内で最も大きい要素(多くの場合ヒーロー画像や見出し)の描画完了までの時間を測る指標で、実際の検索順位に使われる要素の一つです。最適化されていない数MBのヒーロー画像は、モバイル回線でのLCPを『良好』の基準(2.5秒)から大きく超過させることがあり、コンテンツの質そのものとは無関係に検索順位へ悪影響を与えます。

リサイズが先、圧縮は後

圧縮とリサイズは別の問題を解決します。圧縮はピクセルごとの情報量を減らし、リサイズはピクセル数そのものを減らします。本文の表示幅が900pxしかないのに、4000px幅の写真をそのままファイルサイズだけ圧縮して使っている場合、誰の画面にも表示されない解像度の情報にビット数を無駄遣いしていることになります。同じファイルサイズを、先に900pxへリサイズした画像に使う方が明らかにくっきり見えます。

Web用にはJPEGよりWebP

WebPは写真コンテンツにおいて、同等の見た目の画質でJPEGより25〜35%程度小さくなるのが一般的で、モダンブラウザではほぼ100%サポートされています。CMSやプラットフォームが対応していれば、圧縮済みのJPEGをWebPに変換するだけでほぼ無条件にファイルサイズを削減できます。スクリーンショットやロゴなどのグラフィック素材については、さらに大きな削減効果が見込めます(関連記事のPNGからWebPへの変換を参照)。

遅延読み込みは圧縮の代わりにはならない

loading="lazy" は画面外の画像のダウンロードをスクロールまで先延ばしにする仕組みで、初回表示の速度改善には役立ちますが、画面内に入った時点では結局フルサイズをダウンロードします。実際に転送されるバイト数を減らすのは圧縮の役割であり、遅延読み込みは転送するタイミングを変えているだけです。加えて、最初から画面に表示されているLCP対象の画像には遅延読み込みを使うべきではありません。

よくある質問

サイトに使う画像は結局何KBくらいが適切ですか?
目安として、ヒーロー画像・メインビジュアル(ファーストビューに表示される横幅いっぱいの画像)は200KB以下、記事本文中の写真は100KB以下、サムネイルや商品一覧の画像は50KB以下を意識してください。厳密なルールではなく、ページ全体の画像合計を1〜2MB程度に収めることで、モバイル回線でも十分な表示速度を保てる、という目安です。これはGoogleのCore Web Vitalsにも直結します。
画像のサイズは本当にSEOに影響しますか?
はい、間接的にですが明確に影響します。GoogleのCore Web Vitalsに含まれるLCP(Largest Contentful Paint、最大コンテンツの描画時間)は、多くの場合ヒーロー画像の表示速度がそのまま指標に直結します。最適化されていない3〜5MBのヒーロー画像1枚だけで、モバイル回線でのLCPが『不良』評価になり、コンテンツの質とは無関係に検索順位へ悪影響を与えることがあります。
リサイズと圧縮、どちらを先にやるべきですか?
リサイズを先に、圧縮を後に行ってください。ブログ本文の表示幅はレイアウトのCSSで800〜1200px程度に制限されていることが多く、それより大きい解像度で撮影された写真をそのまま圧縮しても、誰の画面にも表示されない情報量にファイルサイズを使ってしまいます。同じファイルサイズでも、先に実際の表示幅までリサイズした方がくっきり見えます。
Web用の画像はJPEGよりWebPを使うべきですか?
写真のほぼすべてのケースでYesです。WebPは同等の見た目の画質でJPEGより25〜35%ほどファイルサイズを削減でき、2020年以降にリリースされたすべてのブラウザで表示できます。JPEGを使う理由があるとすれば、サイトの画像をブラウザ以外の古いソフトウェアで処理する特殊なワークフローがある場合くらいです。
遅延読み込み(lazy loading)を使えば圧縮は不要ですか?
遅延読み込みは、画面外の画像の読み込みをスクロールするまで先延ばしにする仕組みで、初回表示の速度改善には役立ちますが、実際にスクロールして画面内に入った時点では結局フルサイズの画像をダウンロードすることになります。圧縮の代わりにはならず、あくまで併用するものです。しかもLCPの対象になるファーストビューの画像は最初から表示されているため、遅延読み込みの対象にすべきではありません。