---
title: "画像圧縮・WebP変換の方法｜Webサイト高速化のための画像最適化"
description: "Webサイト向けの画像圧縮方法とWebP変換を解説します。JPEG・PNG・WebPの使い分け、適切な圧縮率の選び方、Core Web Vitals（LCP）への影響と改善方法をまとめました。"
date: 2026-05-25
tags: [画像圧縮, WebP, Web制作, PageSpeed]
related_tools: [img-resize]
draft: false
---

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

## 画像形式の使い分け

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

## WebPとは

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

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

```html
<!-- 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幅の画像を使っても、品質は変わらずファイルサイズが無駄に大きくなります。

```html
<!-- 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"` を付けて遅延読み込みにします。

```html
<img src="image.jpg" alt="説明" loading="lazy">
```

## Core Web Vitals（LCP）との関係

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

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

- ファーストビューの画像は `loading="eager"`（デフォルト）のまま遅延読み込みしない
- ファーストビューの画像に `fetchpriority="high"` を付ける
- WebPまたはAVIFに変換してサイズを削減する
- CDNやサーバーキャッシュで配信を高速化する

```html
<!-- LCP対象のメインビジュアル -->
<img src="hero.webp" alt="メインビジュアル" fetchpriority="high">
```

## WordPressでの画像最適化

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

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

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