画質を落とさずにウェブ用画像を圧縮する方法

画像は平均的なウェブページの合計サイズの50〜60%を占めています。アップロード前に圧縮することは、サイトの速度を向上させるために行える最も効果の高い最適化の一つであり、ひいてはSEOの順位やユーザー体験にも直結します。

画像圧縮がSEOにとって重要な理由

GoogleのCore Web Vitals — 特にLargest Contentful Paint（LCP） — は、ページの主要コンテンツがどれだけ速く読み込まれるかを測定します。最適化されていない画像は、LCPスコアが低くなる最も一般的な原因です。ページ速度は順位決定要因として確認されており、GoogleのPageSpeed Insightsも最適化されていない画像をスコア改善の「機会」として明示的に指摘しています。

どの品質設定を使うべきか？

品質設定は、画像をどの程度積極的に圧縮するかを制御します。

• 90〜100%：ほぼ非圧縮に近い品質。ファイルサイズは依然として大きいままです。印刷品質の素材にのみ使用してください。
• 80〜85%：ほとんどのウェブ画像における最適解。元のファイルより50〜70%小さくなり、画面上では見た目の違いがありません。
• 70〜75%：積極的な圧縮。小さなサムネイルや背景画像に適しています。近くで見ると多少のアーティファクトが見える場合があります。
• 60%未満：画質の劣化が目に見えます。非常に小さいプレビューやプレースホルダー用途にのみ使用してください。

ほとんどのサイト画像にとって、品質80%が最良の出発点です。

圧縮率よりも適切な形式の選択の方が違いが大きい

適切な形式を選ぶことは、品質スライダーを調整するよりも大きな影響を与えます。

• 写真：WebP（同品質のJPGより25〜35%小さい）または品質80%のJPGを使用
• ロゴやアイコン：可能であればSVGを使用。ラスター形式の場合はWebPまたはPNGを使用
• 単色イラスト：PNGまたは可逆WebP
• アニメーション画像：WebPアニメーションまたは動画形式（GIFよりはるかに小さい）

ステップバイステップ：サイト用画像を圧縮する

1. まずリサイズする — サイトで800pxで表示するのに、幅4000pxの写真をアップロードしないでください。まず画像リサイズツールを使って実際の表示サイズに合わせましょう。
2. 適切な形式を選ぶ — 最良のウェブ結果を得るには、JPGをWebPに、またはPNGをWebPに変換してください。
3. 圧縮する — 品質75〜80%で画像圧縮ツールを使用してください。
4. 適切な寸法を指定する — <img>タグにwidthとheight属性を設定し、レイアウトのずれを防止します。
5. 遅延読み込みを使う — ファーストビュー外の画像にはloading="lazy"を追加し、表示されるときだけ読み込むようにします。

WordPressユーザー向け：自動圧縮

WordPressを使用している場合は、SmushやShortPixelをインストールすると、アップロード時に画像を自動的に圧縮できます。どちらも無料プランでほとんどの小規模サイトに対応でき、対応ブラウザには自動的にWebPを配信します。

どれくらい節約できるか？

実例：最適化されていない2MBの写真5枚を含むブログ記事 = 合計10MBのページ重量。幅1200pxにリサイズし、品質80%のWebPに圧縮すると：

• 各画像：約80〜120KB
• 合計：約500KB
• 削減率：95%以上

これは、モバイル回線で8秒かかっていたページが1秒未満で読み込まれるようになるほどの差です。