PNG を AVIF に変換

PNG は正確で、そのぶん重い形式です。1 ピクセルも捨てないため、ロゴやスクリーンショットには向いていますが、それが 20 枚並んだページはパフォーマンス測定で必ず指摘される重さになります。

AVIF は現代の動画符号化の技術を静止画 1 枚に応用したもので、写真であれば PNG のおよそ半分かそれ以下のサイズに収まりつつ、本物の透過チャンネルを保ち、通常の閲覧サイズでは見た目も変わりません。商品画像を並べたページでは、最初の表示が速いか遅いかの差になります。

すでに WebP へ移行した人がこのページを訪れることが多いはずです。写真ではたいてい移行の価値があります。同程度の画質で AVIF は WebP よりさらに 2 割から 3 割小さくなる傾向があり、グラデーションや空のような滑らかな階調でも段差が目立ちにくくなります。

その一方でアイコンやチャート、スクリーンショットのようなフラットな図では差が縮まり、AVIF のほうが WebP より大きくなることさえあります。自分の画像を数点変換してバイト数を比べるほうが、どんな一般則よりも確実です。

AVIF の符号化は PNG や WebP よりはるかに時間がかかります。圧縮できる構造を探す処理が徹底しているぶん、大きな写真では 1 枚あたり数秒かかることも珍しくありません。

このコストは変換の瞬間に一度だけ、あなたの端末で支払われます。以降の訪問者は全員、より軽いファイルをダウンロードするだけです。サイトの資産としては良い取引ですが、今すぐ結果が欲しい 200 枚のフォルダーを変換に投げてコーヒーを淹れに行く、というときには覚えておく価値があります。

AVIF は本物のアルファチャンネルを持つため、PNG を選ばせていた理由そのものが AVIF を避ける理由にはなりません。切り抜いた商品写真、角を丸めたアイコン、どんな背景色にも置きたいロゴ——どれも塗りつぶす色を選ぶ必要も、輪郭に不自然な縁が出ることもなく変換できます。

これは透過を捨てて何かで塗りつぶす必要がある JPG への変換とは決定的に違う点で、写真部分だけでなく素材フォルダー全体を AVIF に置き換えられる理由でもあります。

既定値は、通常の閲覧サイズでは PNG との違いが見えず、ファイルサイズだけが小さくなる水準に設定されています。写真、スクリーンショット、一般的なサイト画像であれば、そのままで問題ありません。

拡大表示される画像や、細かい文字、1 ピクセル幅の線が入った画像では、上げた設定を使ってください。大きな装飾的な背景で誰も細部を見ないものは下げても構いません。変換したファイルを原本として扱わず、PNG のほうを保管してください。一度手放した画質は変換し直しても戻ってきません。

ブラウザー対応はもう問題ではありません。Chrome、Edge、Firefox、Safari、モバイル版もすべて AVIF を表示できます。ウェブページに載せるなら、確実に表示されます。

失敗するのはそれ以外の場所です。デスクトップの画像ビューアー、古いスマートフォンの写真アプリ、チャットアプリ、メールクライアント、そして多くの CMS のアップロードフォームは、いまだにこの形式を認識しません。メールに添付する、顧客がダウンロードするファイルとして使う、という用途には JPG や PNG を送ってください。AVIF はウェブページ配信用の形式であり、汎用の受け渡し形式ではありません。

よくあるパターンは picture 要素に複数のソースを並べることです。AVIF を最初に、次に WebP、そして元の PNG や JPG を img のフォールバックにします。各ブラウザーは自分が理解できる最初の形式を選ぶので、誰の側でも何かを決める必要がありません。

これは原本を残していてこそ機能します。素材フォルダーはコピーの側で変換し、PNG はバージョン管理に残しておいてください。次に登場する形式を生成するときの元になるのも、結局そのファイルです。

フォルダーごと置いてください。各ファイルはあなたの端末で個別に処理され、拡張子だけ差し替えられたファイル名のまま、まとめて 1 個の ZIP として戻ってきます。

アップロードがないので、待ち行列も日ごとの上限もありません。AVIF の符号化は時間のかかる処理なので、ホスト型のサービスならその処理時間の分だけ課金される場面です。ここではそれが端末のCPUで済みます。