Webサイト表示が高速化する次世代画像フォーマットとは

みなさんは、webサイトのページ表示速度が遅いと悩んだことはありませんか？

webサイトの表示速度を上げるための一つの方法として、従来の「JPEG」「PNG」「GIF」といった画像を、次世代画像フォーマットである「WebP」「AVIF」「SVG」に変えていくのはいかがでしょうか。Webサイト表示が高速化する次世代画像フォーマットについて、使い方やメリット・デメリットなどをご紹介していきます。

次世代画像フォーマットのメリット

次世代画像フォーマットであるWebP・AVIF・SVGを使用することで、webサイトの表示速度が遅いページを改善することができます。JPEG・PNG・GIFよりも画像圧縮率が高く、画質を下げることなく軽量化することができるからです。

表示速度の改善はユーザー満足度の向上を期待できます。ページエクスペリエンス（Webページのユーザー体験）の最適化にも繋がり、SEOにも効果的です。Googleはページエクスペリエンスを検索ランキング要因として導入しています。Webサイトの表示速度については、Googleが提供している速度評定ツール「PageSpeed Insights」で確認することができます。

WebPとは

WebPとは、Googleが開発した画像フォーマットで、ファイルの拡張子は「.webp」です。JPGより約25～34％、PNGより約26％画像サイズを軽量化することができます。

WebPの画像の変換方法は、Googleが提供する「Squoosh」を使って変換する方法があります。また、Photoshopでは「WebPShop」というプラグインをインストールすることで、WebPの画像編集が可能になります。

AVIFとは

「AV1 Image File Format」の略称で、ファイルの拡張子は「.avif」です。動画圧縮方法の「AV1」で静止画用に圧縮し、HEIF形式で保存した画像フォーマットになります。

ちなみにHEIF形式といえば、iPhoneを使って写真撮影すると、デフォルトの設定ではHEIFの画像フォーマットである拡張子「.heif」または「.heic」となり、これはどのブラウザも対応していないため、このままWebサイトに使うことはできません。

AVIFはHEIFをもとに作られた画像フォーマットで、画像サイズはWebPよりさらに約35%軽量化することができます。しかし、AVIFは、対応されているブラウザがChrome、Firefox、Operaなど、限定されているため、使用できる場面は限られていることを理解しましょう。

AVIFへの変換方法は、Googleが提供している画像圧縮やフォーマット変換が簡単に行える『Squoosh』がおすすめです。

SVGとは

SVGは、「Scalable Vector Graphics」の略称で、ファイルの拡張子は「.svg」です。Web上でイラストやロゴ、アイコンを表示させるために用いられるベクター画像になります。イラストなどのグラフィックをベクター画像であるSVGにすることで、画質の品質を損なわずに、JPGやPNGに比べて画像サイズを軽量化することができます。

SVGの変換方法は、Adobe IllustratorやAdobe Photoshopなどの画像編集ソフトで作成することができます。

使用する際の注意点

デメリットとして、一部のブラウザで対応していない場合があります。AVIFは、紹介した中で最も圧縮率が高く、AVIFを使えば良いと思うかもしれませんが、対応されているブラウザ（Chrome、Firefox、Operaなど）が限定されてしまうという問題点があります。

また、WebPとAVIFは、JPEG・PNG・GIFと比べ、対応している画像編集ソフトが少なく、慣れていない場合、画像を変換する手間がかかるという点が挙げられます。

SVGは、イラストやロゴには向いていますが、複雑な画像だと画像サイズが大きくなり表示速度が遅くなってしまうので、写真には不向きです。

まとめ

現在webサイトで使用される画像のフォーマットは、JPEG・PNG・GIFが主流ですが、メリット・デメリットを踏まえた上で、WebP・AVIF・SVGといった次世代画像フォーマットについての使用を検討してみてはいかがでしょうか。

さまざまなブラウザで表示させる場合はWebP、対応しているブラウザが限定される場合はAVIF、イラストやロゴなどはSVGなど、目的に合わせて使い分けしていけるといいですね。

関連ページ

詳しくは関連ページをご覧ください。