表示サイズにリサイズし、75-85% の品質で圧縮し、WebP または AVIF に変換します。この3ステップのワークフローで、見た目の品質をほぼ損なうことなく最大 90% のファイルサイズ削減を実現します。以下が 2026 年の完全な手法です。
3ステップのワークフロー：リサイズ → 圧縮 → 変換
ステップ1：表示サイズにリサイズする
最大の最適化は、ピクセルサイズを表示サイズに合わせることです。現代のスマートフォンは 4000-6000px の幅で撮影しますが、これはウェブの必要要件をはるかに超えています。G Saunders が実証したように、18,000px から 800px への縮小は、圧縮を行う前に 99% のファイルサイズ削減を達成しました。
| 使用例 | 推奨幅 | リサイズ後の典型的なファイルサイズ |
|---|---|---|
| ブログのヒーロー画像 | 1200px | 200-400 KB |
| 商品写真 | 800px | 80-200 KB |
| サムネイル | 300-400px | 20-50 KB |
| ソーシャルメディア | 1080px | 100-300 KB |
ステップ2：75-85% で非可逆圧縮を適用する
リサイズ後、MozJPEG などのエンコーダーを使って非可逆圧縮を適用します。75-85% の品質範囲が最適なバランスです。Intellure によると、品質を 100% から 85% に下げるとファイルサイズが 60% 削減され、目に見える差はほぼありません。
| 品質設定 | ファイルサイズ削減 | 視覚的影響 |
|---|---|---|
| 90-100% | 10-20% | オリジナルとほぼ同じ |
| 75-85% | 50-70% | 肉眼ではほとんど分からない |
| 50-70% | 70-85% | 近くで見るとわずかなアーティファクト |
| 50% 未満 | 85%+ | 目立つバンディングとぼかし |
ステップ3：WebP または AVIF に変換する
| フォーマット | JPEG に対するサイズ | ブラウザ対応（2026） | 最適な用途 |
|---|---|---|---|
| WebP | 25-34% 小さい | 97%+ | 一般的なウェブ用途、LCP 画像 |
| AVIF | 最大 50% 小さい | 92%+ | 最大限の圧縮 |
| JPEG | ベースライン | 100% | 汎用フォールバック |
Google Developers のデータは、同等の品質で WebP が JPEG より 25-34% 小さいことを裏付けています。AVIF はさらに一歩進み、最大 50% の圧縮率向上を実現します。
また、非必須の EXIF メタデータ（GPS、カメラ設定、タイムスタンプ）も削除しましょう。ファイルごとに 5-50 KB 節約でき、プライバシーも保護されます。
非可逆 vs 可逆：それぞれの使い分け
| モード | 仕組み | 削減率 | 用途 |
|---|---|---|---|
| 可逆（PNG、OptiPNG） | すべてのピクセルを保持 | 5-30% | ロゴ、アイコン、テキストのスクリーンショット、鮮明なエッジ |
| 非可逆（JPEG、WebP、AVIF） | 知覚できないデータを除去 | 50-80% | 写真、ヒーロー画像、商品写真 |
ウェブの写真や複雑な画像には、75-85% 品質の非可逆圧縮が標準です。ロゴやテキスト中心のグラフィックには、鮮鋭さを保つために可逆圧縮を使用してください。
SEO への影響：Core Web Vitals と LCP
Google の Core Web Vitals は Largest Contentful Paint（LCP） をランキングシグナルとして使用します。画像はすべての LCP 要素の約 70% を占めます（web.dev）。
| 指標 | 影響 |
|---|---|
| 読み込みが 3 秒を超えると 53% のモバイルユーザーが離脱 | 直帰率は画像の重さに直接関連 |
| LCP の閾値：2.5 秒 | 重いヒーロー画像が失敗の第1の原因 |
| ページ速度は確認されたランキング要因 | 最適化された画像 = より高い検索順位 |
品質検証チェックリスト
圧縮後、100% にズームして3つのアーティファクトを確認します。
| アーティファクト | 確認ポイント | 原因 |
|---|---|---|
| バンディング（Banding） | グラデーション（例：空）での段階的な色の遷移 | 品質設定が低すぎる |
| リンギング（Ringing） | テキストや高コントラストのエッジ周囲のハロ | 過度な圧縮 |
| ソフトネス（Softness） | 微細なディテール（髪、布地）がぼやける | 過度な非可逆削減 |
プライバシーを重視するワークフローでは、Pixotter や SammaPix のようなツールが WebAssembly（WASM） を使ってブラウザ内で処理を行います。ファイルがあなたのデバイスから離れることはありません。
結論
3つのステップで画像を圧縮しましょう：表示幅にリサイズし、75-85% 品質で非可逆圧縮を適用し、WebP または AVIF に変換します。このワークフローは、見た目の品質劣化なしで最大 90% のサイズ削減を実現します。最も訪問者の多い 10 ページを監査し、ヒーロー画像を AVIF に変換して、ファイルごとに 200 KB 未満を目標にしてください。
FAQ
PNG をデータを一切失わずに圧縮できますか？
はい。OptiPNG や oxipng のようなツールは、内部の DEFLATE アルゴリズムを最適化し、ピクセルを変更せずにメタデータを削除します。非可逆方式と比べると削減幅は控えめ（5-20%）ですが、ピクセル単位の完全な忠実度が保たれます。
画像圧縮は SEO ランキングに影響しますか？
はい。ページ速度は確認された Google のランキング要因です。画像は通常、ページ内で最も重い要素です。最適化された画像は LCP スコア を改善し、それが Core Web Vitals のパフォーマンスと検索の可視性に直接影響します。
個人の写真をオンライン圧縮ツールにアップロードするのは安全ですか？
クライアントサイドの WASM 処理 をサポートするツールを使用してください。圧縮はあなたのブラウザ内で行われ、ファイルがサーバーに触れることはありません。サーバーサイドのツールを使う場合は、そのサービスが処理後にファイルを即座に削除することを確認してください。
コメントを残す