画質を落とさずに画像を圧縮する:テクニックとベストプラクティス
画像のファイルサイズを60〜80%削減しながら、オリジナルとほぼ見分けのつかない仕上がりを得ることができます。コツは、どのフォーマットを使うか、そして品質スライダーをどこに設定するかを知ることです。実際のテストに基づいたフォーマット別の実践的な解説をお届けします。
JPEG:最適な品質設定は75〜85
JPEGは写真圧縮の定番フォーマットです。品質スライダーは0(ファイルが極小だが画質が最悪)から100(ファイルが巨大だが圧縮なし)まで設定できます。品質とファイルサイズの関係は線形ではありません。100から80に下げると巨大なスペースが節約できますが、80から60に下げると目立つアーティファクトが現れる割に削減効果は小さくなります。
推奨設定:
- 品質80〜85——ウェブサイトのヒーロー画像、ポートフォリオ写真、商品写真に最適。非圧縮オリジナルと比べてファイルサイズが60〜75%削減され、目に見える画質低下はありません。
- 品質75〜80——ブログ画像、サムネイル、SNS用に最適。より積極的な圧縮ですが、典型的な表示サイズでは差が見えません。
- 品質60〜70——ファイルサイズが詳細より重要な小さなサムネイルやメール添付に許容できます。
ブラウザ内の最適化アルゴリズムを搭載したVizuaのJPEG圧縮ツールで、圧縮前後の比較ができます。品質スライダーで自分の目で確かめてみてください。
PNG:デフォルトで可逆、非可逆の選択肢もあり
PNGは可逆圧縮を使用しており、ピクセルデータは一切破棄されません。そのため、スクリーンショット、ロゴ、アイコン、テキストやシャープなエッジがあるグラフィックに最適です。トレードオフとして、可逆圧縮の削減率は控えめで、画像の複雑さによって通常20〜50%程度です。
より大きな削減を実現するには、カラーパレットを削減する方法があります。何百万もの色を持つ24ビットPNGは、多くの場合256色(8ビット)に量子化しても視覚的な変化がなく、ファイルサイズを70〜80%削減できます。技術的には非可逆ですが、ほとんどのスクリーンショットやイラストでは人間の目には同一に見えます。
VizuaのPNG圧縮ツールはエンコードを自動最適化し、不要なメタデータを削除します。
WebP:両方の良いところどり
WebPは非可逆と可逆の両圧縮、透明度、アニメーションをサポートしており、JPEG、PNG、GIFの長所を1つのフォーマットに統合しています。同等の視覚品質で、非可逆WebPはJPEGより25〜35%小さいファイルを生成します。
推奨設定:
- 非可逆品質75〜80——写真に最適。JPEG品質85と同等の視覚品質で、ファイルサイズは大幅に小さくなります。
- 可逆モード——すべてのピクセルが重要なグラフィック、ロゴ、スクリーンショットに使用します。ファイルは同等のPNGより小さくなります。
WebPのブラウザサポートは現在グローバルで97%を超えており、互換性の問題はほぼありません。VizuaでWebP画像を圧縮して最適な品質とサイズのバランスを見つけられます。
AVIF:最高圧縮率
AVIFはAV1ビデオコーデックをベースにした最新のフォーマットで、同等の視覚品質でJPEGより約50%小さいファイルを生成します。これは大きな飛躍です。HDR、広色域、透明度もサポートしています。
デメリットとしては、エンコードが遅く(特に高品質設定で)、2026年初頭時点のブラウザサポートは約95%です。フォールバックフォーマットを配信できるウェブサイトでは、AVIFは優れた第一選択肢です。メール添付や非技術ユーザーへの共有にはJPEGかWebPの方が適しています。
VizuaのブラウザベースのAVIF変換ツールでデバイス上でローカル処理しながら無料で変換できます。
フォーマット別 推奨品質設定とファイルサイズ削減率
| フォーマット | 最適な品質設定 | 典型的なファイルサイズ削減率 | 最適な用途 |
|---|---|---|---|
| JPEG | 75〜85 | 60〜80% | 写真、商品画像、ヒーローバナー |
| PNG(可逆) | 最大圧縮 | 20〜50% | スクリーンショット、ロゴ、テキスト含むグラフィック |
| PNG(8ビット) | 256色 | 70〜80% | イラスト、シンプルなグラフィック |
| WebP(非可逆) | 75〜80 | 70〜85% | Web画像(全種類) |
| AVIF | 60〜75 | 75〜90% | モダンWeb、パフォーマンス重視のサイト |
リサイズと解像度が及ぼす影響
圧縮設定と同じくらい重要なのが、適切なリサイズです。4000px幅の写真を800pxで表示するのは帯域幅の無駄です。まず表示サイズにリサイズしてから圧縮することで、より大きな削減効果が得られます。
- リサイズしてから圧縮する——表示サイズに合わせてリサイズしてから圧縮すると、圧縮後の結果が格段に良くなります。
- メタデータを削除する——EXIFデータ(カメラモデル、GPS情報、タイムスタンプ)は1枚あたり10〜50 KB追加することがあります。ほとんどのWeb画像では不要です。
- 用途に合ったフォーマットを使う——写真はJPEGかWebP、スクリーンショットとロゴはPNG、モダンブラウザ向けにはAVIFを検討しましょう。
- 可能ならバッチ処理する——商品写真が50枚あるなら、1枚ずつ処理するのは時間の無駄です。Vizuaはすべてのフォーマットでバッチ処理に対応しています。
圧縮の詳細なトレードオフについては非可逆と可逆圧縮の違いを、ファイルサイズの目安については画像ファイルサイズガイドもご参考ください。
圧縮ツールの選び方
良い圧縮ツールは、品質スライダーをリアルタイムで調整しながら前後の差を比較できる機能を持っています。また、ファイルをサーバーにアップロードせずにデバイス上でローカル処理できるツールは、プライバシー面でも有利です。Vizuaはすべての圧縮・変換処理をブラウザ内で完結させており、画像データが外部に送信されることはありません。
よくある質問
「可逆圧縮」とは実際にどういう意味ですか?
可逆圧縮は、データの保存方法を最適化することでファイルサイズを削減します。メタデータの削除やエンコードの改善を行いますが、ピクセルには一切手を加えません。展開後の画像はオリジナルとビット単位で完全に同一です。PNGおよび可逆WebPがこのアプローチを採用しています。
Webサイト用の最適なJPEG品質設定は?
Web用には品質75〜85が最良のバランスをもたらします。品質80では、標準的な写真が非圧縮のオリジナルより60〜80%小さくなりながら、視覚的な差はほぼ識別できません。この範囲ではSSIMスコアが0.95を超えることが多く、人間の目には圧縮版とオリジナルの区別がつきません。
圧縮にはWebPの方がJPEGより優れていますか?
一般的に、WebPは同等の視覚品質でJPEGより25〜35%小さいファイルを生成します。透明度(PNGのような)とアニメーション(GIFのような)もサポートしており、グローバルのブラウザサポートは現在97%を超えているため、Web画像の標準的な選択として非常に有力です。
すべての画像をAVIFに変換すべきですか?
AVIFは同等品質でJPEGより約50%小さいファイルを実現しますが、エンコードが遅く、2026年初頭時点のブラウザサポートは約95%なので、古いデバイスではWebPかJPEGのフォールバックがあると安心です。配信パイプラインを管理できる場合はAVIFが優れた選択肢です。手軽な共有や広い互換性が必要な場合はJPEGやWebPの方が無難です。