各プラットフォームが対応している画像フォーマット(とサイレント変換の仕様)
ShopifyはWebPに対応しているか?EtsyはAVIFを受け付けるか?各プラットフォームが受け付けるフォーマットと、裏で静かに再エンコードされるフォーマットの早見表。
近代的なコマースプラットフォームはWebPに対応しており、AVIFへの対応も進んでいますが、印刷や法的なワークフローではどちらも受け付けられず、メールクライアントはその中間に位置しています。 JPEGとPNGは、今でもあらゆる場所で制限なく受け入れられる唯一の2つのフォーマットです。
フォーマットを受け付けることと、それをそのまま保持することは別物です。いくつかのプラットフォームは、アップロードされたWebPファイルを裏でJPEGに再エンコードします。つまり、互換性のリスクを負うだけで、ファイルサイズ削減の恩恵は受けられません。どのプラットフォームがこれを行うかを知ることで、アップロードすべきファイルが変わってきます。
プラットフォーム別フォーマット対応状況
アップロードするフォーマットを選ぶ前に、必ず最後の列を確認してください。すべてを再エンコードするプラットフォームでは、どのフォーマットを選んでも意味がなくなってしまうからです。 対応状況は時間の経過とともに変化するため、大規模な移行の前には最新のドキュメントで確認してください。
| プラットフォーム | WebP | AVIF | アップロードファイルの再エンコード |
|---|---|---|---|
| Shopify | 対応 | 一部対応 | あり(独自のバリアントを配信) |
| WordPress | 対応 | 一部対応 | あり(サムネイルサイズを生成) |
| Amazon | 非対応 | 非対応 | あり |
| Etsy | 非対応 | 非対応 | あり |
| eBay | 一部対応 | 非対応 | あり |
| ソーシャルネットワーク | 一部対応 | ほぼ非対応 | あり(常に実施) |
| メールクライアント | 動作不安定 | 非対応 | なし |
| 行政ポータル | 拒否 | 拒否 | なし |
| 印刷サービス | 拒否 | 拒否 | なし |
この表のパターンは一貫しています。ウェブ向けに最近構築されたシステムはモダンなフォーマットを受け入れ、印刷、コンプライアンス、またはレガシーな互換性のために構築されたシステムは受け入れません。フォーマットの対応状況は、運営企業の規模よりも、そのシステムの歴史の長さから予測する方が正確です。
ブラウザ側の問題はすでに解決済み
デスクトップおよびモバイルのChrome、Firefox、Safari、Edgeを含む、すべての現行ブラウザがWebPをサポートしています。 Safariが2020年にサポートを追加したことで、このフォーマットに対する最後の深刻な互換性の懸念は解消されました。
AVIFは一歩遅れており、主要なブラウザすべてでサポートされているものの、古いバージョンや一部の埋め込みビューアでの動作はまだ不安定です。公開ウェブサイトにおいて、WebPはフォールバックなしでも安全であり、AVIFはフォールバックを用意すれば安全です。残された課題は、ブラウザの完全に外側にあります。
プラットフォームがアップロードファイルを再エンコードする理由
プラットフォームが再エンコードを行うのは、自社の配信コストを抑え、各デバイスに最適なサイズを配信するためです。 1つの画像を6つの異なるレイアウトで表示するマーケットプレイスでは6つのバリアントが必要になり、出品者にそれぞれ用意してもらうよりも、1つのアップロードから自動生成する方がシンプルです。
再エンコードには、理解しておくべき影響があります。高度に圧縮されたファイルをアップロードすると、プラットフォームにはすでに劣化したソースが渡されることになり、その劣化はすべてのバリアントに引き継がれます。プラットフォームが再エンコードを行う場合は、2重に圧縮するのを避け、正しい寸法で高品質なファイルをアップロードし、圧縮処理はプラットフォーム側に任せるのが最善です。
WebPが真に効果を発揮する場所
WebPは、アップロードしたファイルがそのまま訪問者にダウンロードされる、自分が管理しているサイトで最も効果を発揮します。 独自のウェブサイト、セルフホスト型のECサイト、ドキュメントサイトなどがこれに該当します。
- 独自のウェブサイト: ファイルが再エンコードされないため、最大の効果を得られます。
- セルフホスト型のECサイト: 最大の効果を得られます。ページの読み込み速度はコンバージョン率に直接影響します。
- バリアントを生成するコンテンツシステム: プラットフォームが出力を決定するため、部分的な効果に留まります。
- マーケットプレイス: 何を送信してもアップロード時に再エンコードされるため、効果はありません。
- ソーシャルネットワーク: すべてのネットワークが独自のフォーマットに変換するため、効果はありません。
WebPが問題を引き起こす場所
ユーザーがファイルをダウンロードし、ブラウザ以外のソフトウェアで開くことが想定される場所では、WebPを避けてください。 デザインツール、オフィスソフト、印刷ワークフローでは、このフォーマットの処理がまだ不十分です。
最も一般的な失敗例は、プレスキットやメディアパックです。ジャーナリストがWebP形式のロゴをダウンロードしても、レイアウトソフトに配置できず、問い合わせがそのまま放置されてしまうことがあります。2つ目の一般的な失敗例は行政のアップロードフォームで、バリデーションによってフォーマットが拒否され、その原因が明記されないエラーが表示されることがよくあります。
アップロードするフォーマットの決め方
正しく選択するには、次の4つの質問に順番に答えてください。
- ファイルがダウンロードされ、ブラウザ以外の場所で開かれますか?「はい」の場合は、JPGまたはPNGを使用します。
- プラットフォームはアップロードファイルを再エンコードしますか?「はい」の場合は、高品質なJPGまたはPNGをアップロードし、処理はプラットフォームに任せます。
- ファイルの配信を自分でコントロールできますか?「はい」の場合は、WebPを使用し、最も重い画像にはAVIFを使用します。
- 画像に透過処理が必要ですか?「はい」の場合は、PNGまたはWebPを使用します。JPEGには透過チャンネルがありません。
これら4つの質問に答えるだけで、互換性テーブルを確認することなく、ほぼすべてのケースを解決できます。基本原則はシンプルです。パイプラインを自分でコントロールできる場所にはモダンなフォーマットを使い、それ以外のすべての場所にはユニバーサルなフォーマットを使います。
自身のサイトでモダンなフォーマットを安全に配信する方法
picture要素を使用し、最初にAVIF、2番目にWebPを指定し、imgタグにフォールバックとしてJPEGを指定します。 ブラウザは自身が理解できる最初のフォーマットを選択するため、新しいブラウザには軽量なファイルが配信され、古いブラウザでも画像が表示されます。
このマークアップにかかるコストは画像あたり数行であり、互換性のリスクを完全に排除できます。現在、ほとんどのコンテンツシステムやサイトビルダーは、アップロード時にこのパターンを自動的に生成するため、手動で記述する前にプラットフォームの既存の機能を確認してください。画像の変換には数分しかかかりませんが、マークアップの記述には通常それ以上の時間がかかります。
プラットフォームが実際に受け付けるフォーマットを確認する方法
ドキュメントは古くなっていることが多いため、テストファイルを1つアップロードして、プラットフォームが実際に配信するファイルを確認してください。 2分もあれば答えが出て、公開されているどのリストよりも信頼できます。
WebP画像をアップロードし、公開されたページを表示して、画像を右クリックして新しいタブで開きます。アドレスバーのファイル拡張子が、プラットフォームが実際に配信しているフォーマットを示しています。拡張子が.jpgであればWebPファイルが変換されたことを意味し、.webpであればそのまま保持されたことを意味します。プラットフォームのメジャーアップデートの後は、このテストを再度行ってください。
静かに消えつつあるフォーマット
BMP、TIFF、アニメーションGIFは今でもほぼすべての場所で動作しますが、ほぼすべてのケースにおいて誤った選択肢です。 これらが生き残っているのは、古いソフトウェアがそれを生成していたからであり、何か優れた機能があるからではありません。
BMPはほとんど圧縮せずに画像を保存するため、スクリーンショットのファイルサイズがPNGの20倍になることもあります。TIFFは印刷やスキャンでは標準のままですが、ウェブでは使用できません。アニメーションGIFは256色に制限されており、同じ内容の短い動画よりも重くなることがよくあります。これら3つのフォーマットは、受信時に保存するのではなく変換することで、ワークフロー全体に無駄な重さを持ち込むのを避けることができます。
フォーマット移行の計画
オリジナルを直接変換するのではなく、ライブラリのコピーを変換し、新しいファイルが公開されて検証されるまでオリジナルを保管してください。 フォーマットの移行は、作業内容が永久に失われる可能性のある数少ない画像処理タスクの1つです。
4つの段階で進めます。まず、実際に使用されている画像を監査します。多くのライブラリには、どのページからも参照されていないファイルが含まれているからです。次に、コピーを正しい寸法でターゲットフォーマットに変換します。切り替え時に何も壊れないよう、フォールバックと並行して新しいファイルを公開します。スマートフォン、デスクトップブラウザ、および画像を消費するクライアントシステムでページを確認した後にのみ、オリジナルを削除してください。
AVIFについて
AVIFは、大きな写真においてWebPよりも約20〜30%高く圧縮できますが、エンコードにははるかに時間がかかります。 このフォーマットは、ヒーロー画像や写真を多用するページで、その手間に見合う価値を発揮します。
約10 KB以下では、AVIFは極小画像には不釣り合いなコンテナオーバーヘッドを伴うため、WebPファイルの方が小さくなることがよくあります。サイト内の最も大きな画像にはAVIFを使用し、それ以外の場所にはWebPを使用し、両方にJPEGのフォールバックを用意してください。ブラウザ外でのプラットフォームの対応はまだ薄いため、AVIFは他人に渡すファイルではなく、自分が管理するサイトで使用すべきです。
特定の送信先向けにライブラリを変換する
フォーマット間の変換を繰り返すのではなく、送信先が実際に使用するフォーマットに一度だけ変換してください。 非可逆変換を行うたびにディテールが失われるため、3つのフォーマットを経由したファイルには3世代分の劣化が蓄積されます。
まず送信先を決定し、オリジナルから直接変換します。当サイトのコンバーターは、HEIC、PNG、JPG、WebP、AVIF、GIF、BMPの双方向を含む、あらゆる一般的な組み合わせに対応しているため、中間フォーマットを経由させる必要はありません。最大500ファイルの一括処理が、すべてブラウザ内で実行されます。つまり、ファイルを1つも外部に送信することなく、画像ライブラリ全体を移行用に準備できます。