画像を jpg と avif を <picture> 要素を使って併記する

このページでは、次世代画像形式のフォーマットである 「avif」を検証する。

avif (AV1 Image File Format) は、画像を超圧縮できる次世代型画像ファイル形式である。avif で保存したファイルの拡張子は「.avif」になる。avif に対応しているブラウザは、Google Chrome、Firefox、Opera である。Edge には現在未対応である。また、Firefox はアニメーションには対応しておらず、静止画のみ対応している。

avif は、従来の画像ファイル形式と比較して、圧縮率が高いことが特徴である。具体的には、一般に広く普及している「jpg」はもちろん、jpg よりも圧縮率が高いことで知られる「webp(ウェッピー)」よりもさらに高い圧縮率を誇る。

picture タグは、html で画像を表示する際に使用するタグである。画像の表示を切り替えるために使用され、条件に応じて画像を表示する。

さて、対応のブラウザも非対応のブラウザも対策するための手法が picture 要素である。picture 要素は HTML5 から新たに追加された要素であり、ユーザーの閲覧環境に応じて最適な画像を表示させることができる。

picture と img の使用例を以下に挙げる。

<img 
  src="./images/01.png"
  srcset="./images/01.png 320w,./images/02.png 640w,./images/03.png 1024w"
  alt="サンプル"
>

srcset 属性は、HTML5 で追加された属性で、複数のイメージソースを指定するために使用される。img 要素や picture 要素内の source 要素で使用できる。

<picture>
  <source media="(min-width: 1024px)" srcset="./images/03.png">
  <source media="(min-width: 480px)" srcset="./images/02.png">
  <img src="./images/01.png"/>
</picture>

下の画像において二種類の拡張子の画像を指定してあり、ブラウザが対応していれば、「.avif」が表示される。非対応であれば「.jpg」を表示する。

<p>
CSS の animation: linear は、…
  <picture>
    <source srcset="images/004.avif" type="image/avif">
    <img class="revealing-image" src="images/joe_sample.jpg" alt="" style="margin-top: 1rem;">
  </picture>
</p>

CSS の animation: linear は、…。

avif を対応しているブラウザは女性を表示し、未対応のブラウザは男性を表示する。