beta

AMPでwebp画像をSafariなどの非対応ブラウザに対応をする

次世代の画像フォーマットであるwebpは高圧縮でサイトロードの高速化に寄与してくれますが、Safariなど非対応ブラウザがあります。今回はAMPページで非対応ブラウザに対応する方法です。

公開日:2020年10月15日

amp-imgのフォールバックを使う

AMPフレームワークの画像表示フォーマットであるamp-imgには、

  • 入れ子構造
  • フォールバック

の二つの仕組みがあるのでそちらを使います。

webp対応ブラウザ用表示

まずはChromeなどのwebp対応ブラウザ用のamp-imgタグです。

<amp-img src="/test.webp" width="100px" height="100px" alt="テストサムネイル" layout="responsive">

</amp-img>

普通のamp-imgでwebpを指定するだけです。

webp非対応ブラウザ用表示

続いて、非対応ブラウザ用のコードです。amp-imgにはfallback属性をつけると、amp-imgを読み込まなかった時の対応コードを設定できます。

<amp-img fallback src="/test.png" width="100px" height="100px" alt="テストサムネイル" layout="responsive">

</amp-img>

入れ子にしてフォールバックを効かせる

この二つのコードを入れ子にすると、

  1. webpのロードを試みる
  2. ダメだったらpngのロードをする

ということができるようになります。

<amp-img src="/test.webp" width="100px" height="100px" alt="テストサムネイル" layout="responsive">
  <amp-img fallback src="/test.png" width="100px" height="100px" alt="テストサムネイル" layout="responsive">
  </amp-img>
</amp-img>

並べたりしてもダメです。必ずamp-imgの中にamp-imgを入れる入れ子にします。

実際にChromeとSafariで表示テストをすると、どちらでも表示されるはずです。


AMPでwebp画像をSafariなどの非対応ブラウザに対応をする方法を見てきました。

次期Safariはwebpに対応しているようですが、IEもあるのでこの先2、3年くらいは非対応ブラウザに対応しておいた方がいいかもしれませんね。