Webサイトの表示速度に最も影響する要素の一つが画像です。適切に圧縮・最適化された画像はページの読み込みを大幅に速くし、Google の PageSpeed Insights スコアや Core Web Vitals の改善にも直結します。

画像形式の使い分け

形式特徴向いている用途
JPEG写真の圧縮が得意・透過不可写真・人物画像・背景
PNG透過対応・可逆圧縮でサイズが大きくなりやすいロゴ・アイコン・スクリーンショット
WebPJPEG比30〜50%軽量・透過対応Web全般（モダンブラウザ対応）
SVGベクター形式・どんなサイズでも劣化なしロゴ・アイコン・図版
AVIFWebPより更に高圧縮・対応ブラウザ増加中写真・次世代フォーマット

WebPとは

WebP（ウェブピー）はGoogleが開発した次世代画像フォーマットです。同等の画質でJPEGより25〜34%、PNGより26%軽量化できるとされています。

現在は主要ブラウザ（Chrome・Firefox・Safari・Edge）すべてが対応しており、新規サイト制作ではWebPを標準にするケースが増えています。

<!-- picture要素でWebP非対応ブラウザにフォールバック -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明">
</picture>
## 適切な圧縮率の目安

JPEG

品質80〜85が肉眼での劣化がほぼわからない範囲での圧縮限界です。

品質サイズ感見え方
100非圧縮に近い元画像と同等
85元の40〜60%ほぼ劣化なし
75元の25〜40%わずかに劣化
60以下元の15%程度ブロックノイズが目立つ

PNG

PNGは可逆圧縮のため、圧縮率を上げても画質は変わりません。ファイルサイズの削減は圧縮レベルの調整で行います。透過が不要であればJPEGまたはWebPへの変換でサイズを大幅に削減できます。

画像サイズと解像度

表示サイズ以上の画像を使わない

横幅800pxで表示する画像に2400px幅の画像を使っても、品質は変わらずファイルサイズが無駄に大きくなります。

<!-- srcset で画面サイズに合わせた画像を配信 -->
<img src="image-800.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="説明">
### 遅延読み込み（lazy loading）

ファーストビューに表示されない画像は loading="lazy" を付けて遅延読み込みにします。

<img src="image.jpg" alt="説明" loading="lazy">
## Core Web Vitals（LCP）との関係

LCP（Largest Contentful Paint） はページ内の最大要素が表示されるまでの時間です。多くの場合、メインビジュアルの画像がLCPの対象になります。

LCP改善のためのポイント：

<!-- LCP対象のメインビジュアル -->
<img src="hero.webp" alt="メインビジュアル" fetchpriority="high">
## WordPressでの画像最適化

WordPressでは以下のプラグインが広く使われています。

プラグイン特徴
Imagify自動WebP変換・CDN連携
ShortPixel高い圧縮率・AVIF対応
EWWW Image Optimizer無料プランあり・サーバー内処理

画像圧縮・リサイズツールでは、JPEG・PNG・WebP変換、品質スライダー、アスペクト比固定リサイズをブラウザ内で処理します。画像データはサーバーに送信されません。