形式を変えずに AVIF のファイルサイズを小さくする方法

AVIF はもともとコンパクトな画像形式です。だからといって、すべての AVIF が最適化済みとは限りません。デザインツールや書き出しスクリプトは慎重な品質設定を選ぶことが多く、ヒーロー画像や商品ギャラリーが必要以上に重いまま残る場合があります。

大切なのは「AVIF を再圧縮できるか」ではありません。再圧縮は可能です。考えるべきなのは、寸法を誤って変えたり、別形式に変換したり、公開後に初めて気づく画質劣化を受け入れたりせず、AVIF のファイルサイズを減らす方法です。

ユーザーが実際に見る寸法から始める

圧縮しても不要なピクセルが役立つわけではありません。表示幅が最大 1200 ピクセルなのに元画像が 4000 ピクセルあるなら、再エンコードより先に寸法を見直す方が効くことがよくあります。

高密度ディスプレイも含め、レイアウト内で最大となる表示サイズを確認し、その要件に近い寸法で書き出します。元画像は配信フォルダの外に保管し、あとで戻れるようにしてください。Web 用画像は派生物であり、アーカイブの原本ではありません。

大きなソースを残す理由もあります。レスポンシブ画像には複数の幅が必要ですし、ズームできる商品ビューには静的なカードより多くのディテールが必要です。重要なのは意図して決めることです。プロジェクトへ入れるのが楽だったという理由だけで、すべての訪問者にマスターファイルを送らないようにします。

形式を変えずに AVIF を再圧縮する

寸法を整えたら、出力も AVIF になる圧縮ツールを選びます。当たり前に聞こえますが、「AVIF を圧縮」と書きながら、実際には AVIF を入力として受け付け、WebP や JPG を出力するツールもあります。

PiPic のルールは単純です。AVIF を入れると、同じ幅と高さの最適化済み AVIF が返ります。無料 AVIF 圧縮ツールは 1 ファイルでも最大 100 ファイルの一括処理でも使え、1 ファイルは最大 8 MB です。完了後は個別に、または一つの ZIP としてまとめてダウンロードできます。

手順は短く済みます。

1. AVIF ファイルを圧縮エリアへドロップします。
2. 各ファイルの横に表示される圧縮前後のサイズを確認します。
3. 小さくなった結果をダウンロードし、元画像と比較します。
4. 削減がわずか、または画質との交換条件に納得できない場合は元画像を使います。

圧縮結果の方が大きくなる場合、PiPic は元ファイルを保持します。すでに丁寧に最適化された AVIF には、削れる余地がほとんどないこともあるためです。

宣伝文句ではなく画質を確認する

AVIF は非可逆圧縮と可逆圧縮の両方に対応します。Web 配信では、より大きな容量削減を得るため非可逆エンコードが一般的です。したがって「品質劣化は一切ない」という言葉だけを頼るべきではありません。実際の用途で変化が見えるかどうかを確認するのが正直な方法です。

まず実際の表示サイズで比較し、そのあと問題が出やすい場所を拡大します。

• グラデーションと暗い影
• 肌、髪、葉などの細かな質感
• 文字や UI スクリーンショット周辺の鋭い輪郭
• 透明部分と柔らかな縁
• 彩度の高い色とハイライト

ファイルサイズの数字だけで判断しないでください。小さくなっても、画像が本来の役割を果たせなければ改善ではありません。ランディングページの主役なら、あと 1 分かけて確認する価値があります。小さなサムネイルなら、表示サイズでの確認だけで十分な場合もあります。

必要な場合はフォールバックを残す

AVIF は現在の Chrome、Edge、Firefox、Opera、Safari で使えます。ただし JPEG や PNG より歴史が短く、古いソフトでは開けないことがあります。MDN も過去の環境まで広く対応する必要がある場合はフォールバックを推奨しており、画像形式ガイドで違いを確認できます。

Web サイトでは <picture> を使い、AVIF を優先しながら、必要に応じて WebP または JPEG を選ばせられます。

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" width="1200" height="800" alt="" />
</picture>

width と height は残してください。画像が届く前にブラウザが領域を確保でき、レイアウトの移動を防げます。フォールバックファイルが本当に存在することも確認します。存在しないファイルを指す <source> は互換性になりません。

一括圧縮を公開工程にする

ヒーロー画像を 1 枚最適化することにも意味はありますが、再現できる工程はもっと役立ちます。公開前にページ内の AVIF を集め、一括圧縮し、ランダムに開くのではなく大きな結果から確認します。

短いチェックリストを使いましょう。

• 寸法が最大の表示用途に合っている
• 出力は .avif のままで、配信時も image/avif になっている
• 圧縮前後の差が結果を差し替える価値に見合う
• 重要な輪郭、グラデーション、透明部分が正常に見える
• 必要に応じてレスポンシブ版とフォールバックがある
• 公開後のレスポンスに適切なキャッシュヘッダーがある

同じ素材をリポジトリやビルド工程で扱うなら、PiPic Agent CLIで圧縮をワークフローへ組み込めます。一度だけフォルダを処理するなら、ブラウザの方が簡単です。ファイルをドロップし、結果を確認して、ZIP を受け取ります。

AVIF は効率的ですが、魔法ではありません。正しい寸法を与え、形式を変えずに再圧縮し、ユーザーが実際に見るものを確認する。この順序なら、推測に頼らず AVIF を小さくできます。