2026年現在、Webサイトで使用する画像形式はWebPがおすすめです。AVIFはWebPよりもファイルサイズを小さくできる場合がありますが、ブラウザ以外のWebサービスへの対応には課題が残っています。

WebPとAVIFの違い

Can I Useで対応状況を確認すると、WebPとAVIFはどちらも主要なブラウザで利用できます。しかし、画像が表示されるのはブラウザだけではありません。

XやFacebookなどのSNS、Feedlyのような情報収集サービスでは、対応していない画像形式が正しく表示されないことがあります。また、レンタルサーバーによっては、WordPressでAVIF画像をアップロードできない場合もあります。

画像のファイルサイズと画質のバランスも重要です。WebPとAVIFはどちらも軽量化に役立ちますが、画質を優先するとファイルサイズが大きくなることがあります。用途に応じて適切な形式と画質を選ぶ必要があります。

AVIFへの対応を待つよりWebPを活用する

このブログでは、主要ブラウザでのAVIF対応が進んだ段階で、画像をWebPからAVIFへ切り替えました。しかし、その後もFeedlyやXなどでの対応が進まず、期待していたほど利用できる範囲は広がりませんでした。

また、エックスサーバーからさくらのレンタルサーバーへ移行した際には、WordPressでAVIF画像をアップロードできない問題にも直面しました。ローカル環境で画像をアップロードし、バックアップを経由して移行する作業が必要になったことも、現在の静的サイト環境を構築するきっかけのひとつです。

こうした経験から、現在はブラウザで表示する画像にAVIF、メタタグや構造化データで使用する画像にWebPを採用しています。画像を作成するときにGIMPで両方の形式に書き出せばよいため、大きな手間はかかりません。

ただし、これからWebサイトを運営する場合、画像形式をひとつ選ぶのであれば、私はWebPをおすすめします。AVIFはファイルサイズの面で有利な場合があるものの、Webサービス側の対応状況まで考慮すると、WebPのほうが幅広い用途で扱いやすいためです。

今後AVIFへの対応が進む可能性はありますが、現時点ではその広がりを期待しすぎず、対応範囲と画像の軽量化を両立できるWebPを選ぶのがよいと考えています。

入門Webデザイン 第四版

画像情報教育振興協会

Amazon.co.jp

最後までお読みいただき、誠にありがとうございます。