PNG、JPEG、WebP、どれを選ぶ？実践的な画像最適化チュートリアル

多くの人は、ファイル形式を「なんとなく」選んでいます。Figma からエクスポートしたり、Photoshop で保存したり、スクリーンショットを撮ったり——そのときに出てきた形式をそのまま使う。そして圧縮ツールに通せばファイルが小さくなるだろうと期待するものの、なぜ思ったほど縮まないのか理解できない。

実は、形式の選択は圧縮設定よりもはるかに重要です。JPEG を品質 85 で圧縮すると、PNG を同じ品質で圧縮したものより小さくなります。圧縮ツールがより頑張るからではなく、JPEG と PNG が根本的に異なる方法で画像データをエンコードしているからです。圧縮ツールを開く前に正しい形式を選ぶだけで、どのスライダー操作よりも多くのバイトを節約できます。

このチュートリアルでは、まず形式の選択について説明し、次に圧縮・変換・リサイズのための具体的なツールと設定を紹介します。ここで紹介するものはすべて、アカウント作成なしで使えます。

まず最初にすべき、形式の選択

ウェブや日常的なユースケースのほとんどは、JPEG、PNG、WebP の 3 種類でカバーできます。正直に整理しましょう。

JPEG は写真や連続したトーングラデーションのある画像——ポートレート、風景、料理写真など——に適しています。人間の視覚が色と明るさをどのように知覚するかを利用した非可逆圧縮を使用しており、品質 80 の JPEG 写真はほぼ同じに見えながら、ファイルサイズは元の約半分になります。なめらかな色の変化には強い反面、硬いエッジ（テキスト、ロゴ、アイコン）では特有のブロックノイズが現れます。

PNG はスクリーンショット、イラスト、ロゴ、アイコン、正確なピクセル値や透明度が必要なものに適しています。PNG は可逆圧縮——データを一切破棄せずに圧縮します。だからこそ、同じ写真の PNG は常に JPEG より大きくなります。写真には絶対に PNG を使わないでください。硬いエッジ、透明度、テキストがあるものには必ず PNG を使いましょう。

WebP はすべてに対応し、かつより小さいサイズになります。WebP は写真では JPEG より約 25〜35%、グラフィックでは PNG より約 26% 小さいファイルを生成しながら、同等の視覚的品質を保ちます。ブラウザのサポート率は現在 97% に達しており——2020 年に Safari が対応し、最後のハードルが取り除かれました。ウェブ用途では、WebP を配信できるのに JPEG や PNG を使い続ける理由はほとんどありません。

実践的な判断フロー：ウェブ用に保存するなら WebP。PNG が必要な場合（透明背景、印刷用の正確な色精度）は PNG。後で編集できるように誰かに送るなら、写真は JPEG、グラフィックは PNG。WebP をサポートしないメールクライアントやプラットフォームへ添付・アップロードする場合は、写真は JPEG、それ以外は PNG にフォールバックします。

Squoosh での圧縮：本当に重要な設定

ヒーロー画像、商品写真、ポートフォリオ作品など、1 枚の画像を丁寧に圧縮したい場合は、Squoosh が最適なツールです。Google Chrome チームが開発し、完全に WebAssembly で動作するため、ファイルがブラウザの外に出ることはありません。

Squoosh を開いて画像をドロップします。インターフェースはドラッグできる仕切り線で左（元の画像）と右（処理後）に分かれています。右パネルで出力形式を選び、設定を調整します。

ウェブ画像は、まず WebP 品質 80 から始めてみましょう。この設定はほとんどのユースケースをカバーします——同じ品質番号の JPEG と比べて、視覚的にほぼ同じ結果をはるかに小さいファイルサイズで得られます。右下のサイズ推定値はスライダーを動かすたびにリアルタイムで更新されます。品質 75〜85 の間で何が起きるか観察してみてください。75 まで下げると、目に見えるほどの変化はほとんどなく、かなりのバイト数を節約できます。70 を下回ると、品質の低下が目立ち始めます。ほとんどの写真コンテンツにおいて、品質 80 がスイートスポットです。

テキスト、硬いライン、透明度のある画像には、出力形式を WebP（可逆） に切り替えてください。Squoosh は非可逆よりも大きくなると警告しますが、ピクセル値は完全に保持されます。表示サイズで実際に違いが見えるかどうか、非可逆圧縮との結果を比較してみましょう。

Squoosh は「編集」パネルでリサイズにも対応しています。ピクセル単位でターゲット幅を入力するか、パーセント表示に切り替えて 50% と入力して縦横を半分にします。アスペクト比ロックを有効にしてから操作しましょう。写真のリサイズには Lanczos3 アルゴリズムが最適です。バイリニアやボックスよりもシャープさが維持されます。アイコンやピクセルアートを拡大する場合は「最近傍」を使うと、ぼかしではなく硬いエッジが保たれます。

Squoosh の唯一の制限はバッチ処理に対応していないことです。1 ファイルずつの処理なので、特定の画像を丁寧に扱うには最適ですが、40 枚の商品写真を処理するには向きません。

アカウントなしでバッチ圧縮

1 枚ずつの細かい制御よりも量をこなすことが優先される場合、TinyPNG はアカウント不要で最大 20 枚を一度に処理できます。画像フォルダをアップロードボックスにドロップすれば、並列で処理されます。

TinyPNG の PNG ファイルに対するアルゴリズムは選択的色量子化を使用します。最大 1600 万色を小さなパレットに削減し、その結果に標準圧縮を適用します。視覚的な違いは通常識別できません。PNG ファイルは一般的に 60〜80% 縮小され、大きな単色エリアを持つシンプルなグラフィックではさらに小さくなることがあります。

JPEG ファイルに対しては、より積極的な量子化で再エンコードし、メタデータ（EXIF データ、カラープロファイル、埋め込みコメント）を除去します。3MB のスマートフォン写真が 500KB 以下になることも珍しくありません。品質の判断はアルゴリズムに任せておけばよく、その精度はよく調整されています。

20 ファイルの無料枠に日次制限はなく、各バッチは独立しています。1 バッチが終わったら次の 20 枚をドロップする。200 枚の写真なら 10 回のドラッグ&ドロップ。面倒ではありますが、アカウント作成や API の支払いは不要です。

一点正直に言っておくと、TinyPNG はファイルをサーバーにアップロードします。一定時間後に削除されますが、機密性の高い画像（法的文書、医療写真、プライベートな素材）を圧縮する場合は、Squoosh のローカル処理を使いましょう。商品写真やブログ画像なら、サーバー側処理は問題ないトレードオフです。

プラットフォーム別のリサイズ

「適切なサイズにリサイズする」と言うのは簡単ですが、8 つのプラットフォームに対して 8 種類の推奨サイズがあると途端に複雑になります。よく使われるケースの現在の標準サイズをまとめました。

リサイズには、圧縮ツールと同じツールが使えます。Squoosh（「編集」パネルを開いた状態で）と ezGIF はどちらも正確なピクセル寸法を指定できます。より細かな制御が必要な場合——正確なアスペクト比でのクロップ、フレーム内のコンテンツ位置の調整など——Photopea がアカウント不要の最も機能的な選択肢です。ブラウザ上でフル機能の Photoshop ライクなエディタが開き、キャンバスサイズ、クロップ、画像サイズのコントロールを Photoshop と同じように操作できます。

HEIC やその他の特殊形式の変換

iPhone はデフォルトで HEIC（HEIF とも表記）形式で撮影します。優れた形式です——JPEG より小さく、品質も高い——しかしまだ広くは受け入れられていません。WordPress は拒否します。ほとんどのウェブブラウザでは表示できません。メールクライアントの対応も一貫していません。

HEIC を JPEG に変換するには、ezGIF がサインアップ不要で対応しています。「Image Converter」タブを開き、HEIC ファイルをアップロードし、出力を JPEG に選んでダウンロードするだけです。変換自体は機能しますが、大量バッチ処理には向きません。

Convertio は RAW カメラ形式（CR2、NEF、ARW）、ゲームテクスチャ（DDS）、EXR などの HDR 形式に対応しています——ほとんどの画像ツールが黙って無視してしまうものです。アカウントなしの無料変換は 1 日あたり約 10 回、1 ファイルあたり最大 100MB に制限されており、たまに使う程度なら十分です。ファイルは Convertio のサーバーにアップロードされるので、機密性の高い素材についてはプライバシーポリシーを確認してください。

SVG ファイルについて特に触れておきましょう。Figma などのデザインツールがエクスポートする SVG には、エディタのメタデータ、インラインスタイル、小数点以下 8 桁の数値精度がびっしり詰まっています。技術的には有効ですが、不必要に大きい。デプロイ前に SVGOMG に通してください——ブラウザベースの SVG オプティマイザです。Figma エクスポートでは 40〜70% の削減が一般的で、すべてクライアントサイドで処理されます。

よくあるケースの現実的なワークフロー

ほとんどの人が使うべき正しいワークフローはこうです。

スマートフォン写真 → ウェブサイト掲載：Squoosh で開き、出力を WebP に設定、品質 80、幅を 1200px にリサイズ。以上。ほぼどんな写真でも 200KB 以下になります。

商品写真（バッチ）：最大 20 枚ずつ TinyPNG にドロップ。ダウンロードして繰り返す。形式変換は不要で、サイズを削減するだけです。

スクリーンショット → ブログ投稿：Squoosh または TinyPNG。ダーク UI のスクリーンショットは可逆 WebP で特に高い圧縮効果が得られます。

iPhone の HEIC → 共有可能な JPEG：ezGIF の画像コンバーター、HEIC 入力、JPEG 出力。

ウェブサイトのロゴやアイコン：SVG があれば SVGOMG で最適化。PNG が必要なら、デザインツールからエクスポートして TinyPNG に通す。

変わった形式の変換：Convertio が他のツールでは対応できない形式を処理します。

多くの人が画像ファイルに対してできる最善の改善は、ウェブ出力を JPEG から WebP に切り替えることです。次に良い改善は、圧縮前に実際の表示サイズにリサイズすること——800px で表示される画像に 3000px 幅のファイルを届ける必要はありません。どちらも無料で、即時に、アカウントなしで実行できます。

ここで紹介したツールは nologin.tools のディレクトリで確認済みです。HTTP Archive Web Almanac は一貫して、画像がウェブ上で最も大きなアセットカテゴリであり、WebP/AVIF の採用率がブラウザの対応能力と比べて依然として低いことを示しています。技術的に可能なことと多くのサイトが実際に行っていることの差は、まだ大きい——そしてその差は 1 ファイルずつ縮まっていきます。

これらのツールがここで説明した基本の先に何をカバーするかをさらに詳しく知りたい場合は、以前の画像圧縮・変換ツールの記事で形式の選択とツールのトレードオフをより深く解説しています。