以前、WebP(ウェッピー)という画像形式を紹介しました。JPEG/PNG/GIF等の画像から、2020年9月のiOS 14リリースにより、主要なブラウザーでWebPの利用が可能となりました。これで主要なモダンブラウザーでは、WebPを利用可能になりましたが、以前としてAdobe関連では、次世代画像フォーマットには対応していない状況です。さらには、また新しいフォーマット、AVIFというものも出てきいます。

次世代フォーマット AVIFとは

ChromeのリリースChrome85では、次世代画像フォーマット、AVIF(AV1 Image Format) がサポートされました。主な特徴は、下記のとおりです。

  • 多様な色空間やサンプリング方式をサポート
  • WebPよりもさらに高画質でコンパクト（同じサイズでも画質が高く、JPEGに特有のブロックノイズも発生しない）
  • Amazon・Netflix・Google・Microsoft・Mozilla等の幅広い企業によるコンソーシアムが共同で開発（FacebookやAppleも後から参画）

まだ、手頃にエンコードできる環境がないのですぐに取り上げられる環境でないと思いますが、WebPよりも高画質でコンパクトな特徴をもっていることからも、サイトの高速化対応等のことを意識しだすと関わらなければならない領域である気もするので、しばらくは注視していく必要があるかと思います。

次世代画像への変換を作業に組み込むには

デザインするツール等にもよりますが、現段階ではまだ、WebPフォーマットでの出力が対応していなかったり、古いブラウザーを意識する必要があったりという状況がいりまじっていたりして管理が大変かと思います。一番カンタンなのは、WebP画像を素材として生成してしまうことですが、現段階では対応していないアプリのほうが多い状況です。

WebPをデザイン作業中に作るには

デザイン作業では、Adobe Photoshopを利用する方が多いと思いますが、現段階でのWebP対応は、WebPShopプラグインをインストールすることです。

WebPをコマンドラインツールで作成するには

コマンドラインで画像に関する処理をする場合には、ffmpegを利用します。下記のコマンドで変換できます。細かいカスタマイズは、ffmpegのマニュアルを参照してください。

$ ffmpeg -i 元ファイル.png 出力ファイル.webp

サイト改善の観点からは、画像や次世代画像フォーマットについてはしばらく注視が必要そうですね。