WebPよりも軽いAVIF形式の画像ってどうやってつくるの?

先日、電気虫に刺されたatsushiです。naku02.gif


モバイルを中心にデザインを行う際、気を付けなければならないものの一つとして画像の容量があると思います。

GoogleのPageSpeed Insightsでチェックすると『画像の容量をもっと減らしなさい』と忠告されます。baikin_2.gif

この基準がだんだん厳しくなってきていて、PNG形式で圧縮をかけてある画像でももっと減らせと言われます…ikari02.gif

きっと、Googleが開発したWebPを普及させる意図もあると思ってますが…

それは、さておき、実際、軽い画像を作らなければいけないわけですが、WebPよりも軽い画像形式があるのはご存知でしょうか

AVIFという形式です。

詳細な説明は、省きますが、こちらも新しい形式なので、Photoshopなどで標準的に扱っていないのが現状です。

Photoshopバージョン23.2でWebPは扱えるようになりましたが、AVIFについてはまだです。

そこで、どうやってAVIF形式の画像を作るかですが、いくつか対応しているツールはありますが、今回は、グーグルが開発した画像圧縮ツールSquoosh(スクーシュ)を紹介します。

Squoosh(スクーシュ)

使い方は簡単で、画像をドロップするだけ。wink02.gif

大きく分けると「WebP」「JPEG」「PNG」「AVIF」の形式に変換できます。
リサイズも出来ます!

圧縮率(劣化ぐあい?)も調整できるので、PageSpeed Insightsで指摘された画像などで試してみてはいかがでしょうかshine.gif

トラックバックURL