はじめに

amp-imgで。次世代画像フォーマットに対応していない端末向けに画像をフォールバック(代替表示)する方法について

amp-imgの中にフォールバックするamp-imgを入れ込む

やり方は簡単。amp-img のタグの中に amp-img タグを入れ込んで、fallbackステータスを付け加える


<amp-img alt="karaagekun_5_1.webp"
lightbox="al"
src="/tantan/images/karaagekun_5_1.webp"
width="300"
height="400">
	<amp-img alt="karaagekun_5_1.jpeg"
	fallback
	src="/tantan/images/karaagekun_5_1.jpeg"
	width="300"
	height="400">
	</amp-img>
</amp-img>

第一にwebp形式の画像を表示しようとするが、表示できないブラウザ(safariなど)の場合は、fallbackのjpegを表示する。実際に「からあげクン かぼす胡椒味」のページで使用。

lightboxが正しく動作しない

amp-lightbox-galleryを使用している場合、fallbackを指定しているとどうやらうまく動作しないようだ。というか、safariでは正しく動かない。chromeでは正しく表示できる、が、carouselにlightboxを指定すると、fallbackのを含めて表示使用とするらしいので、第一画像とfallbackにそれぞれ別のlightboxグループを指定(例:lightbox="グループ名")。これであれば、safariでは表示できないが、chromeならば正しく表示できる。バリデータでもエラーにはならず、AMPとして認めてもらえる。多分バグかな

safariでもlightboxを使って画像を拡大させたい場合は、amp-image-lightbox を使う。これであれば、グループ化はできないが、一枚ずつ拡大表示ができるので、fallbackの画像も拡大することができる

なぜフォールバックが必要か?

Googleが2018年の夏より、「スピードアップデート」を告知。これにより、ページの表示速度も検索順位に影響がでるようになりました。一応 、遅いことがクリティカルな要因になることは今のところないみたいですが、早いにこしたことはありません。

ここで、難しいのは『早い』はどの程度なのか、ということですが、Googleが言うには、3秒以上ページ表示に時間がかかると離脱率が上がるそうなので、目安としては3秒以下に抑える、ということでしょうか。

PageSpeed Insights」を使うと、速度が十分に出るか、どこが悪いかなどをチェックすることができます。

その対応の一つに、画像を次世代フォーマット(webp,jpeg2000,JPEG-XR)に置き換える、と言うのが出てきます。ただ、これらの画像フォーマットは、対応していないブラウザやOSがあるため、代替表示をしてしないといけません。その為、フォールバックを指定して、jpegやpngなどの画像を指定しておくことが必要となります。もっとも、モダンブラウザやOSが次世代フォーマットに対応してくれればそんなこともしなくてはすみますが。