Webサイトに最適な画像形式は？

画像の種類が分からないうちは、「最適な形式」を決めることはできません。Webサイトでは性質が大きく異なる複数の画像が使われ、それぞれに明確な最適解があります。

• 写真（商品、人物、場所）：非可逆圧縮形式を使います。AVIFが最も小さく、WebPは安全で現代的な標準、JPGはすべてのブラウザーで表示できるフォールバックです。
• ロゴ、アイコン、イラスト：SVGを使います。ベクター画像なので、どの画面でもあらゆるサイズで鮮明さを保ち、通常はファイルも非常に軽量です。プラットフォームがSVGを受け付けない場合だけ、ピクセル形式をフォールバックにします。
• スクリーンショット、UIグラフィック、透過を含む画像：PNGまたは可逆圧縮のWebPを使います。単色部分と鋭い輪郭は、可逆圧縮形式がまさに効率よく圧縮できる要素です。
• 短いアニメーション：色数が限られ、ファイルがはるかに大きくなるGIFではなく、アニメーションWebPまたはAVIFを使います。
• ファビコン：ICOファイルを使い、できればSVGまたはPNG版も用意します。詳しくは、画像からファビコンを作成する方法をご覧ください。

典型的な間違いは、写真をPNGで保存することです。PNGはすべてのピクセルを可逆圧縮で保存します。ロゴには最適ですが、写真には不向きで、見た目の向上がないままファイルがJPGの数倍に膨らみます。

写真の形式は、新しいブラウザーにどこまで依存できるかによって決まります。

• AVIFは最も高効率に圧縮できます。一般的なWeb品質ではJPEGより約50%小さく、WebPより20–30%小さくなり、必要であればHDRと広色域にも対応します。Chrome、Firefox、Safariのすべてで表示できます（Safariはバージョン16.4、2023年から対応）。欠点は、特に大きな画像でエンコードが遅いことと、デスクトップソフトウェアや古い端末での対応が限られることです。
• WebPは実用的な標準です。同じ視覚品質ならJPEGより25–35%小さく、透過にも対応し、2020年以降はすべての主要ブラウザーでサポートされています。一部のデスクトップアプリや古いツールでは今も開けませんが、これは訪問者に配信するファイルではなく、デザイナーに渡すファイルで問題になります。
• JPGは汎用的なフォールバックです。3形式の中では最も効率が低いものの、品質75–82前後で保存したJPGは通常、画面上では元画像と見分けがつかず、Web上のどの環境でも表示できます。

最も堅牢な構成は、対応ブラウザーにはAVIF、それ以外にはWebP、さらに古い環境にはJPGを配信する方法です。1つだけ選びたい場合は、WebPとJPGのフォールバックで、ほぼすべての環境をカバーできます。直接比較については、WebPとAVIFの比較およびWebPとJPGの比較をご覧ください。写真ではなくグラフィックについては、PNGとJPGの比較をご覧ください。

目的の形式が決まれば、変換はすぐに完了し、データが端末の外に出ることもありません。EditItAll画像コンバーターは、すべてブラウザー内で動作します。

1. コンバーターを開き、画像をドロップします。1個のファイルでも、フォルダー全体でも構いません。複数の画像はまとめて処理されます。
2. 出力形式を選びます。写真にはWebPまたはAVIF、透過が必要なグラフィックにはPNGを指定します。よく使う変換には、JPGからWebP、PNGからWebP、JPGからAVIF、PNGからAVIFへの直接変換があります。
3. 品質を設定します。目標サイズの入力欄はありません。サイズは処理結果として決まります。各ファイルの処理前後のサイズが表示されるので、数値と画像の両方が適切になるまでスライダーを微調整します。
4. 結果を個別に、または1つのZIPとしてダウンロードします。

何もアップロードされません。ページの読み込み後にインターネット接続を切っても、変換を続けられます。また、書き出すすべての画像からEXIFとGPSのメタデータが削除されるため、商品写真の撮影場所が公開されることもありません。無料で、アカウントも透かしも不要です。すでに適切な形式で、ファイルを小さくするだけなら、画像圧縮ツールを直接お使いください。プラットフォームがベクターロゴのピクセル版を要求する場合は、SVGからPNGへの変換で、選択したサイズに描画できます。

形式選びには価値がありますが、次の3つの習慣は、JPGからAVIFへの切り替え以上に多くのバイトを削減できます。

• 実際の表示サイズに変更する。カメラで撮影した写真は、ページ上の表示領域より何倍も幅が広く、余分なピクセルもすべてダウンロードされた後に捨てられます。EditItAll画像ツールには、まさにこのための最大寸法を任意で指定する機能があります。
• 元画像から1度だけ圧縮する。非可逆圧縮で保存するたびに、少しずつ細部が失われます。元画像を保管し、そこからWeb用画像を書き出してください。JPG、WebP、AVIFの順に連鎖させて再保存しないでください。
• 最新形式をフォールバックとともに配信する。最初にAVIFまたはWebPを提供し、古いブラウザーではJPGまたはPNGにフォールバックさせれば、どの訪問者にも壊れた画像は表示されません。

速度レポートに「画像を効率的にエンコードする」または「次世代形式で画像を配信する」と表示された場合、それが求めているのはまさにこの判断です。画像を効率的にエンコードするという警告の修正方法で手順を説明し、Web向けにJPEGを圧縮する方法で品質スライダーを詳しく解説しています。そのほかの形式ガイドは、画像変換のガイド集にあります。