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

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年くらいは非対応ブラウザに対応しておいた方がいいかもしれませんね。