Web用の画像圧縮とは、訪問者が違いに気づかないほど画像を鮮明に保ちながら、ファイルサイズを削減することです。圧縮されていない、または軽く圧縮された画像は、ページの読み込みが遅い最大の原因です — Webページに直接配置された4 MBのDSLR写真は、Core Web Vitalsを失敗させます。このガイドでは、目標サイズ、適切なフォーマット、数分で完了できるワークフローを説明します。

Web画像の目標ファイルサイズ

一般的なWebユースケースの実用的な目標値：

ヒーロー / バナー画像（全幅）：200 KB以下
コンテンツ画像（記事本文内）：100 KB以下
サムネイル / カード画像：30 KB以下
ブログ記事のアイキャッチ画像：150 KB以下
商品画像（ECサイト）：100 KB以下
背景画像：300 KB以下
ロゴ / アイコン：20 KB以下

これらの数値はWebPフォーマットを前提としています。JPEGの目標値は約1.3倍高く設定してください（WebPは同等品質でJPEGより約25〜35%小さい）。

ステップ1：まず表示サイズにリサイズ

圧縮だけでは大きすぎる画像の問題を解決できません。画像が4000×3000 pxでも画面上では 1200×900 pxで表示される場合、必要以上に11倍のピクセルを提供していることになります。まずリサイズしてから圧縮してください。

一般的なWebの表示幅と推奨アップロードサイズ：

全幅ヒーロー：最大1920 px幅にリサイズ
ブログコンテンツ画像：最大1200 px幅にリサイズ
カード / サムネイル：400〜600 px幅にリサイズ
サイドバー画像：300〜400 px幅にリサイズ

リサイズツールを使用して正確なピクセル寸法を設定してください。比率が合わない場合は先にクロップしてください。

ステップ2：正しいフォーマットを選択

WebP：ほとんどのWeb画像に最適。JPEGより25〜35%小さく、PNGのように透明度をサポートします。現代のWebサイトの写真やグラフィックに使用してください。すべての主要ブラウザがWebPをサポートしています。
JPEG：広い互換性が必要な写真に適しています。シャープなエッジやテキストのあるグラフィックには避けてください — JPEGはそれらをぼやかします。
PNG：ロスレス品質や透明度が必要でWebPが使えない場合のみ使用してください（例：一部のメールクライアント）。PNGファイルは大きいため、フォールバックとしてのみPNGを圧縮してください。
AVIF：WebPより20〜30%小さい。2026年の優れた選択肢です。ブラウザサポートはほぼ普遍的です（Chrome 85+、Firefox 93+、Safari 16+）。
GIF：シンプルなアニメーションにのみ使用してください。静止画には常にWebPまたはJPEGを代わりに使用してください。

ステップ3：適切な品質設定で圧縮

JPEGとWebPの品質は0〜100でスケールします。品質が高いほどファイルが大きく、品質が低いほどアーティファクトが増えます。Web用のスイートスポット：

写真（JPEG/WebP）：75〜85%品質 — 100%との視覚的な違いはほぼなく、ファイルは3〜5倍小さくなります。
テキスト付きグラフィック（WebP/PNG）：テキストのぼやけを防ぐためロスレスモードまたは90%+品質を使用してください。
サムネイル：65〜75% — 小さいサイズでは圧縮アーティファクトがほとんど見えません。

Picovertの圧縮ツールを開いてブラウザ内で写真やグラフィックを圧縮してください。ファイルはアップロードされません — すべてローカルで処理されます。

目に見える品質低下なしにどれだけ圧縮できますか？

経験則として：

10 MB DSLR JPEG → 80%品質のWebPに圧縮 → 通常200〜400 KB、通常の視聴距離では視覚的に同等。
2 MB PNGスクリーンショット → 圧縮PNG → 通常400〜800 KB。WebPに切り替えると 300〜500 KBの結果。
スマートフォンカメラからの500 KB JPEG → WebPに圧縮 → 通常80〜150 KB。

最大Web圧縮のためのWebP変換

JPEGをWebPに変換することが、多くの場合、最も影響力の高いステップです。すでに80%で圧縮されたJPEGでも、同じ体感品質でWebPに変換することでさらに25〜35%削減できます。

JPG→WebP変換 — 変換と圧縮を一度に
PNG→WebP変換 — 透明画像用

Web画像を圧縮しないとどうなりますか？

Core Web Vitalsの失敗：GoogleのLCP（最大コンテンツフルペイント）の基準では、メイン画像が2.5秒以内に読み込まれる必要があります。大きな画像は直接LCP の失敗を引き起こします。
検索順位の低下：ページ速度は順位シグナルです。重い画像による遅いページは、圧縮された競合サイトに順位を奪われます。
高い帯域幅コスト：CDNとサーバーの転送コストは転送バイト数に比例します。画像サイズを10倍削減すると、帯域幅コストも直接10倍削減されます。
モバイルの悪い体験：モバイル接続は多くの場合4G以下です。光回線で 0.5秒でロードされる2 MB画像は、一般的な4G接続では4秒以上かかります。

クイック圧縮チェックリスト

圧縮前に実際の表示サイズにリサイズ
可能な場合はJPEGやPNGではなくWebPフォーマットを使用
写真の品質を75〜85%に設定
ヒーロー画像は200 KB以下、コンテンツ画像は100 KB以下に維持
レイアウトシフトを防ぐためHTMLに明示的なwidthと height属性を設定
折り畳み以下の画像にloading="lazy"を使用
CDNを使用して訪問者の近くのエッジから画像を配信