画像圧縮とWebP変換｜PageSpeed改善の基本

画像 WebP PageSpeed 最適化
結論

WebPでJPEGより25〜35%軽量化。サーバーに送らないローカル処理のツールを選ぶ。品質80%前後が目安。

なぜ画像圧縮が必要か

理由 効果
PageSpeed 画像最適化はCore Web VitalsのLCP（Largest Contentful Paint）に直結。重要な評価項目。
ユーザー体験 読み込みが速いほど離脱率低下。特にモバイルでは体感速度が変わる。
モバイル 通信量を抑えると、データ消費と遅延が減る。

WebPとは

Googleが開発した画像形式。JPEGより高効率で、透過にも対応。主要ブラウザ（Chrome、Firefox、Safari、Edge）はほぼすべてサポート済み。2020年以降のSafari対応で、実務上はほぼ全環境で使える。

フォーマットの使い分け

用途 推奨フォーマット・理由
写真・一般的な画像 WebP。JPEGより25〜35%程度軽量。画質は同等。
透過が必要な画像 WebP。PNGより軽量。透過PNGの代替として。
レガシー対応 JPEG/PNG。<picture>でWebPを優先し、非対応ブラウザ用にフォールバック。

推奨設定の目安

  • 品質 — 80%前後。画質と容量のバランスが良い。90%以上は差が小さい割に容量が増える。
  • リサイズ — 表示サイズに合わせて縮小。1920px幅で表示するなら、それ以上は不要。
  • フォーマット — 写真はWebP、透過が必要ならWebP（PNGより軽い）。

安全に圧縮するには

サーバーに送信しないツールを選ぶ。ブラウザ内完結なら、機密画像や個人情報を含む画像も安心して処理できる。

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

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

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

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

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

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

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

即ファイル縮小

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

最強のWebP変換

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

目標サイズ自動調整

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

関連記事

この記事は Webパフォーマンス テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
クリティカルレンダリングパス最適化クリティカルレンダリングパス最適化｜FCP・LCPを改善する実践ガイド
HTTP/2とHTTP/3の違いHTTP/2とHTTP/3の違い｜QUICがWeb表示速度を変える理由
Speculation Rules API 完全ガイドSpeculation Rules API 完全ガイド｜prefetch・prerender・Chrome 144 prerender_until_script
fetchpriority属性でLCP画像を最適化するfetchpriority属性でLCP画像を最適化する｜2026年実践ガイド
Web Vitals INP改善ガイドWeb Vitals INP改善ガイド｜scheduler.yield・Long Task・Input Delay対策（2026）
content-visibility: auto 完全ガイドcontent-visibility: auto 完全ガイド｜遅延レンダリングと長尺ページ最適化 2026
Server-Timing API 完全ガイドServer-Timing API 完全ガイド｜Express ミドルウェアと Chrome DevTools 連携
Brotli vs Gzip 圧縮比較Brotli vs Gzip 圧縮比較｜nginx静的・動的設定とCDN実践ガイド
CSS/JSを圧縮（Minify）するメリットCSS/JSを圧縮（Minify）するメリット｜サイト高速化の基本
Service Worker キャッシュ戦略ガイドService Worker キャッシュ戦略ガイド｜PWA の cache-first・network-first・SWR・Workbox 設計
View Transitions API 完全ガイドView Transitions API 完全ガイド｜SPA・MPA ページ遷移と Astro/React 統合
WebP変換で画質が落ちる原因と最適な設定WebP変換で画質が落ちる原因と最適な設定