Astro Imageのformat設定をavifにして使用してたら表示できないブラウザがあった

公開 : 2023.01.03

更新 : 2023.01.14

#astro

Astro でブログサイト作ったときにデプロイまでしてしばらく気づかなかったのですが、Microsoft edgeで当サイトを表示したところ画像が読み込めていない… ローカル上のブラウザでも同じく画像が表示されなかったのでデプロイ後の仕様でもなさそう。ってことで調査してみました。

ブログカード等の画像最適化のためにimageを使っていた

image はAstro開発元が公開している標準の画像最適化ライブラリです。公式documentも充実しているので、これ以外を使う選択肢があまりないですよね。

上記ライブラリを使っている箇所だけ表示できなかったため不具合？と思いアップデートもかけてみましたが改善せず…

@astrojs/image の使用箇所

修正前はこんな感じで使用していました

---
	import {Image} from "@astrojs/image/components"
---
	<Image class="image" width={900} height={600} src={img_path} format={"avif"} alt={img_alt} />

こんな感じで使用している箇所が多々ありました。

色々と書き換えてみたり img srcタグ をベタ打ちしてみたところ、どうも format={“avif”} が引っかかってるっぽいと判明。画像をavif形式で出力するのが良くないみたいです。

AVIF 形式とは

AVIF は AV1 Image File Format の略とのことです。覚えにくいですね笑

そもそもWEBブラウザに画像を貼り付けるときに一般的なファイル形式というと、png や jpg が思い浮かびます。これらは汎用的であると同時にそこそこ大きなデータとなってしまうのがデメリットでもあります。大きなデータということは数が多ければデータ容量もネックになりますし、何より表示速度に影響がでてしまいます。

そんな理由で AVIF という画像の品質を損なわずに超圧縮可能なファイル形式が開発されたようです。

AVIF形式に対応していないブラウザが結構多い！

上だけみると使わない理由がないのですが、コチラのサイトより各ブラウザ毎の対応状況を確認したところ結構対応状況が悪いです。

"AVIF対応状況表"

IE はすでにサポートが打ち切られているので抜きにするとして、 Windows だと標準ブラウザの Edge が対応していません。また、Appleだと Safari・iOS Safari ともに最新版では表示ができるものの、1年前くらいのOSだと表示できなさそうです。

標準ブラウザで見れないサイトは流石に致命的です。

結論こう対応した

Image タグの他に Picture タグが用意されているのでそちらを使います。

---
	import {Picture} from "@astrojs/image/components"
---
		<Picture
			src={img_path}
			widths={[300, 600]}
			sizes="(max-width: 600px) 100vw, 600px"
			aspectRatio="3:2"
			alt={img_alt}
	  	/>