見た目の画質を落とさずに画像サイズを小さくする方法

画像は、Webページの中で最も重い部分になりがちです。最適化されていない写真が1枚あるだけで、そのページのHTML、CSS、JavaScriptをすべて合わせたものより重くなることもあります。幸い、その重さの大部分は目に見えないものです。誰にも見えていないピクセルや、人の目では見分けられないディテールだからです。これを取り除けば、見た目を少しも損なうことなく、ページが速くなります。スマートフォンやモバイル回線では特に効果があります。

画像サイズの削減は、突き詰めれば4つの要素に行き着きます。適切な寸法、適切な形式、ほどよい圧縮、そして適切な読み込み方です。

まず最も重い画像を見つける

ブラウザの開発者ツールを開いてNetworkタブに移動し、「Img」で絞り込んでからページを再読み込みして、サイズ順に並べ替えます。最も大きなファイルが、最も削減できる場所です。Rudraのサイト表示速度チェッカーはページに対してLighthouseを実行し、合格しなかった監査項目を一覧表示します。該当する場合は、画像に関する監査(大きすぎる画像や圧縮が不十分な画像など)もそこに含まれます。サイト全体のクロールでは、width属性とheight属性のない画像や、遅延読み込みなしで10枚を超える画像を読み込んでいるページも指摘します。

画像サイズを小さくする手順

1. 表示されるサイズに合わせてリサイズする

たいていの場合、これが最も大きな効果を生みます。幅4000ピクセルの写真を幅800ピクセルのカラムに表示すると、必要な量のおよそ25倍のピクセルを抱えていることになります。その画像が実際に表示される最大のサイズを調べ(開発者ツールで要素を検証します)、その幅で書き出してください。高密度ディスプレイでの鮮明さを求めるなら、その2倍の幅までにします。CSSで画像を縮小しても、ダウンロード量は減りません。ファイルは丸ごと送信されるからです。

2. 適切な形式を選ぶ

• JPEG: 写真や複雑な画像で、最大限の互換性が必要な場合に。
• PNG: 可逆圧縮の画質や、輪郭のくっきりした透過が必要な画像に。UIのスクリーンショットや、色数の少ない図などです。写真にPNGを使うのはおすすめできません。
• WebP: 現行の主要ブラウザすべてが対応しており、同程度の見た目の画質であれば、通常はJPEGやPNGより小さくなります。透過とアニメーションも扱えます。
• AVIF: 同じ見た目の画質で、WebPよりさらに小さくなることが多い形式です。現行の主要ブラウザすべてが対応していますが、エンコードには時間がかかります。
• SVG: ロゴ、アイコン、シンプルなイラストに。ベクター形式なので、どのサイズでも鮮明で、ファイルもごく小さいことがよくあります。
• GIFの代わりに動画: アニメーションGIFは、同じクリップをMP4やWebMの動画にした場合と比べて、たいてい何倍も大きくなります。<video autoplay muted loop playsinline> を使いましょう。

3. 圧縮し、自分の目で確かめる

非可逆形式(JPEG、WebP、AVIF)では、ファイルサイズと画質のバランスを調整できます。写真の場合、品質設定70〜85の範囲がよく使われる出発点で、元の画像と見分けがつかないことも多いのですが、適切な値は画像によって変わります。必ず実際の表示サイズで結果を見比べてください。あわせて、カメラの情報やGPSの位置情報といったメタデータも削除しましょう。容量が増えるうえに、意図しない情報まで明かしてしまうおそれがあります。便利なツールを挙げます。

• Squoosh(ブラウザ上で動作): 1枚ずつ、形式と品質レベルを左右に並べて比較できます。
• ImageOptim(macOS)や同種のデスクトップツール: フォルダをドラッグするだけで、可逆・非可逆の最適化ができます。
• コマンドライン: cwebp -q 80 photo.jpg -o photo.webp でWebPに変換できます。magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg は、ImageMagickでリサイズと再圧縮を行います。
• ビルドパイプラインで: sharp(Node.js)などのライブラリを使えば、ビルド時やアップロード時にすべての画像を自動でリサイズ・変換できます。

4. 画面に応じて異なるサイズを配信する

スマートフォンに、大型のデスクトップモニター向けサイズの画像をダウンロードさせるべきではありません。srcset と sizes を使えば、鮮明に見える範囲で最も小さいファイルをブラウザが選んでくれます。

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset はファイルとその幅を列挙し、sizes は画像がどの幅で表示されるかをブラウザに伝えます(大きな画面では800ピクセル、それ以外ではビューポートの幅いっぱい)。フォールバック付きで新しい形式を提供するには、画像を <picture> で囲み、<img> の前に <source type="image/avif" srcset="..."> と <source type="image/webp" srcset="..."> を置きます。ブラウザは、対応している最初の形式を使います。

5. ファーストビューより下の画像は遅延読み込みする(ただしヒーロー画像は除く)

ページの下のほうにある画像に loading="lazy" を付けると、ブラウザは訪問者がスクロールして近づいたときに初めてその画像を取得します。ページ最上部のメイン画像は遅延読み込みしないでください。多くの場合、それがLargest Contentful Paintの要素であり、遅らせるとページが遅く感じられるようになります。その画像には、ブラウザが早い段階で取得するよう fetchpriority="high" の指定を検討しましょう。

6. widthとheightを必ず指定する

width属性とheight属性があれば、ブラウザは画像が届く前に適切な領域を確保できるので、読み込み時にテキストが動くことがありません。これはレイアウトシフト(CLS)のよくある原因です。値には画像本来のサイズを指定し、CSSに img { max-width: 100%; height: auto; } を書いて、画像が伸縮するようにしておきます。

7. 自動化する

手作業の最適化は、次のアップロードまでしか持ちません。プラットフォームに任せましょう。WordPressは、アップロードされた画像ごとに複数のサイズを生成して srcset を自動で付与し、最適化プラグインを使えば圧縮やWebP・AVIFへの変換も追加できます。Next.jsの <Image> コンポーネントは、標準でリサイズ、変換、遅延読み込みを行います。画像CDNは、URLパラメータに応じてその場で画像を変換します。これに加えて、画像ファイルのキャッシュ期間を長く設定し、再訪問した人がもう一度ダウンロードせずに済むようにしましょう。

よくある間違い

• ヒーロー画像を遅延読み込みして、最も重要なコンテンツの表示を遅らせる。
• カメラやスマートフォンで撮ったフル解像度の写真をそのままアップロードし、縮小はCSSに任せる。
• 写真をPNGで保存する。
• 重要な画像をCSSの背景に置く。ブラウザが見つけるのが遅くなり、altテキストも付けられません。
• すでに圧縮されたJPEGを何度も再圧縮する。そのたびに目に見えるノイズが増えます。
• widthとheightを忘れて、レイアウトシフトを引き起こす。
• 商品写真を圧縮しすぎて、お客様が見たいディテールまで消してしまう。

ツールで判断できること、できないこと

自動監査は、表示サイズより大きい画像、新しい形式が使われていない画像、サイズ指定のない画像を見つけるのが得意で、どれだけ削減できるかも見積もってくれます。しかし、圧縮後の画像がその用途にとって十分きれいに見えるかどうかは教えてくれません。ブログの挿絵なら強めの圧縮にも耐えられますが、商品写真やポートフォリオの作品はそうはいかないかもしれません。最終的な判断は自分の目で下してください。