PNGをAVIFに変換 — 透過を保ったまま容量を削減
PNGをAVIFに変換：透過を保ったままサイトを重くしない
ウェブ制作者が長年抜け出せなかった状況があります。画像に透明な背景が必要だからPNGにするしかない。しかしPNGは重い。画面幅いっぱいの切り抜き商品写真はすぐに2MBに達します。そんな画像が八点あればページは終わりです。
JPGは透過に対応しないため解決になりませんでした。こうして手詰まりになっていたわけです。
AVIFはまさにこの矛盾を解きます
AVIFは完全なアルファチャンネルに対応し、同時に非可逆で圧縮します。2MBのPNGが150〜300KBのAVIFになることも珍しくありません。透過を保ったまま85〜92%の削減です。
切り抜いた商品写真、柔らかな影を持つイラスト、階調のある大きな図版にとって、これは画像まわりで得られる最大の改善です。
PNGのままにすべき場合
すべてのPNGが恩恵を受けるわけではありません。色数の少ない単純な図版——アイコン、シンプルなロゴ、図表——では、PNGはすでに非常に効率よく保存しています。そうした場合はAVIFのほうが大きくなることさえあり、非可逆圧縮が硬い輪郭にわずかな乱れを生むこともあります。
作業用ファイルであればPNGのままにしてください。AVIFはウェブ配信のための形式であり、編集と再保存を繰り返すための形式ではありません。
判断の目安
切り抜き写真、階調のあるイラスト、透過を含む大きな面はAVIFへ。アイコン、線画、文字を含むスクリーンショット、作業用ファイルはPNGのまま。
フォールバックを忘れずに
きわめて古い端末はAVIFを知りません。本番ではpicture要素の一番目にAVIF、二番目に元のPNGを指定してください。最新のブラウザは軽いファイルを取得し、古い端末は元データに戻ります。
アップロードなしの処理
切り抜いた商品写真は、公開前であればブランドが持つ最も価値ある資産であることも少なくありません。ImageXpoは何も転送しません。エンコードはWebAssemblyでブラウザ内で実行され、数百点あっても同じです。
よくある質問
透明な背景は保たれますか。
完全に保たれます。AVIFは完全なアルファチャンネルに対応しています。これがJPGに対する決定的な利点であり、切り抜き画像でこの経路が有用な理由です。
AVIFのほうがPNGより大きくなりました。なぜですか。
アイコンや単純なロゴなど、色数の少ない図版で起こります。PNGがそうした内容をすでに非常に効率よく保存しているためです。AVIFが強いのは写真やなめらかな階調で、こうした場合はPNGのままにしてください。
AVIFを作業用ファイルにできますか。
おすすめしません。AVIFは非可逆で圧縮するため、保存を繰り返すたびに画質が落ちます。作業用にはPNGを保管し、AVIFはウェブ配信用にだけ生成してください。
古いブラウザではどうなりますか。
最新のブラウザはすべてAVIFを表示しますが、きわめて古い端末では表示されません。picture要素の二番目のソースにPNGを指定すれば、どの端末も表示できる版を受け取れます。