Image Compress WebP/AVIF｜画質低下を防ぎ LCP を改善する画像圧縮の手順

WebP 画像圧縮 Core Web Vitals
結論：30秒で画像を WebP 圧縮する
  • 推奨品質: 80% (目視で画質劣化を感じず 50% 以上容量削減)
  • 圧縮ツール: 下のコンポーネントでサーバー送信なしで即時変換
  • HTML 埋め込み: <picture> タグで AVIF → WebP → PNG の順にフォールバック指定

1. オンライン WebP / AVIF 画像圧縮ツール

画像をドラッグ＆ドロップするだけで、ブラウザ内の Canvas / WebAssembly 処理により高速・安全に圧縮・変換します。

🖼️ この場で画像をWebPに圧縮してみる

あわせて使いたい画像リサイズ画像を指定サイズにリサイズ。幅・高さ・縦横比維持。複数画像一括対応。使ってみる →

画像をドロップ or クリックで即時圧縮！

WebP変換・JPEG軽量化をブラウザ上で超高速実行

完全無料・無制限 会員登録不要 通信なし（安全）

Ctrl+V（スクショ貼り付け）やスマホ画像の選択にも対応

サーバーへのアップロードは一切行いません。あなたのPC/スマホ（ブラウザ内）だけで圧縮処理が完結するため、機密情報やプライベートな画像・写真データが絶対に外部へ漏れないセキュリティ設計です。Mac/Windows/iPhone/Androidすべてに対応。（JPEG / WebP / GIF 出力対応）

即ファイル縮小

PageSpeed対策に必須。画質を保ったままJpeg/Pngの容量を極限まで圧縮します。

最強のWebP変換

重い画像をGoogle推奨のWebPへ一括変換。データ量を大幅に削減可能です。

目標サイズ自動調整

「200KB以下」などの制限に一発対応。指定サイズ内の最高画質を自動で探します。

2. HTML での最適な画像フォールバック実装

AVIF と WebP をサポートするブラウザ向けに、次世代フォーマットを優先読み込みさせる記法です。

<picture>
  <!-- AVIF を最優先 (最も高圧縮) -->
  <source srcset="hero.avif" type="image/avif">
  <!-- 次点に WebP -->
  <source srcset="hero.webp" type="image/webp">
  <!-- フォールバック用 JPEG -->
  <img src="hero.jpg" alt="メインビジュアル" loading="eager" fetchpriority="high">
</picture>

3. 注意点（ハマりどころ）

  1. 二重圧縮による画質劣化
    • 既に強い圧縮がかかった低品質 JPEG をさらに WebP 80% で再圧縮すると、ブロックノイズが強調されます。圧縮元には必ず元解像度の最高画質 PNG/JPEG を指定してください。
  2. 透過 PNG を WebP 変換する際のマット指定
    • アルファチャンネル（透明背景）を含む PNG を WebP に変換する場合、非可逆（Lossy）設定のパラメータによっては背景が黒ずむ場合があります。透過画像は Lossless（可逆）WebP を使用するのが安心です。