JPGをAVIFに変換 — 同じ画質で容量を半分に
JPGをAVIFに変換：画像でできる最大の改善
サイトの表示が遅いなら、主因はほぼ確実に画像です。そしてその画像がまだJPGなら、AVIFへの移行が単独で最も効果の大きい一手になります。ファイルの圧縮設定やキャッシュの調整、スクリプトの整理よりも効きます。
どの程度の差か
AVIFは体感画質が同じままで、JPGのおよそ半分の容量になります。なめらかな階調を含む難しい被写体では、削減率が60%に達することもあります。
数字で見てみます。各250KBの商品画像を十二点並べたトップページは現在3MBです。AVIFならおよそ1.4MB。平均的なモバイル回線では読み込み時間で約1.5秒の差にあたります。訪問者が離脱する領域であり、GoogleがCore Web Vitalsの基準を置いている領域でもあります。
AVIFがこれほど優れている理由
JPGは1992年の規格で、画像を8×8画素のブロックに分割します。強く圧縮したときにおなじみの四角い塊や輪郭まわりのにじみが出るのはこのためです。
AVIFはAV1という動画圧縮の技術を用います。可変のブロックサイズ、隣接領域のより賢い予測、ノイズのより効果的な除去。低い画質設定でもAVIFは四角く崩れるより柔らかくぼける傾向があり、目にははるかに自然に映ります。
加えてAVIFは透過と10ビットの色深度に対応します。JPGはどちらもできません。
見込んでおくこと
エンコード時間。 AVIFは計算量が多く、大きな画像ではブラウザ内で数秒かかることがあります。発生するのは一度だけです。
フォールバック。 きわめて古い端末はAVIFを知りません。本番ではJPGかWebPを代替に指定したpicture要素を用意してください。
二度目の圧縮。 元のJPGはすでに非可逆でした。圧縮前の元データがあるなら、そこから直接変換するのが技術的には最も正しい手順です。
大量でもアップロードなし
商品写真が五百点あるとき、アップロードは遅いだけでなく、画像資産をまるごと外部に預けることを意味します。ImageXpoはブラウザ内でエンコードします。枚数がいくつであっても、画像はご自身のディスクに留まります。
よくある質問
サイトは実際どれくらい速くなりますか。
ページに占める画像の割合によります。画像の多いページでは画像全体の重さが半減するのが一般的で、モバイルでは1〜2秒の差になることがあります。画像の少ない文章中心のページでは効果は小さくなります。
フォールバックの設定は必要ですか。
本番では必要です。AVIFを一番目、JPGかWebPを二番目のソースにしたpicture要素にしておけば、各端末が表示できる最良の形式を受け取れます。
強く圧縮したときJPGと見え方が違うのはなぜですか。
AVIFは低画質設定では柔らかくわずかにぼけた印象になり、JPGは四角い塊と輪郭のにじみを生じます。多くの人はAVIFの結果のほうが自然だと感じます。
大量の画像をまとめて変換できますか。
できます。枚数の制限もありません。エンコードはご自身のプロセッサで実行されるためサーバー費用が発生しないからです。非常に大量の場合は相応の時間だけ必要になります。