picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい

更新日 2022年7月20日

突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました？

<picture>
  <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480">
  <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明">
</picture>

実は1年以上前に公開されたChrome 90からサポートされていたそうで（僕はつい先日知りました）、上のコードのようにimgとsourceの両方にwidthとheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前から適切なスペースを確保してくれるので、レイアウトシフトが起こらなくなります。

ということで、2020年夏にはimg要素について書きましたが、picture要素で複数の異なるアスペクト比の画像を読み込む際は、レイアウトシフトを避けるためにsource要素にもwidthとheight属性を記述しておくのが良さそうです。

ブラウザの対応状況

2022年7月18日現在、ブラウザの対応状況は以下の通りです：

Chrome 103（Mac）とEdge 103（Win 10）で動作を確認しました
デスクトップ版Safari 15.5で動作を確認しました
Firefox 102の時点ではバグがあって、sourceで読み込まれる画像にもimg要素に記述したwidth/height属性の値が使われてしまいます

いつから対応していたの？

Chrome 90から対応していたことは明記されてるんですが、Safariではいつからサポートされてるのか情報を見つけられませんでした。たぶん15からのようなんですが…。あと、関係ないかもしれないですが、CSS aspect-ratioがSafariでサポートされたのは15からでした。Safari 14で確認できる方がいたら教えていただきたいです。

Firefoxではバグは認識されてるっぽいんですが修正はまだのようです。Firefoxでの実装時期も見つけられませんでした。

参考資料

はっきりとした仕様やブラウザの対応状況などが書かれている資料を見つけられませんでしたが、参考になりそうな関連情報は以下のとおりです。

MDN Web Docsでの説明

MDN Web Docsのsource要素のheightとwidth属性の説明はこちらの英語版には書いてあって、日本語版では翻訳がまだ追加されていない模様です。

height
Allowed if the source element’s parent is a <picture> element, but not allowed if the source element’s parent is an <audio> or <video> element.

The intrinsic height of the image, in pixels. Must be an integer without a unit.

意訳は以下の通り。

height
source要素の親要素が<picture>要素の場合は許可されるが、<audio>や<video>要素が親要素の場合は許可されない。

ピクセル単位での画像の内在する高さ。単位なしの整数でなければならない。

参考記事

上述した参考資料のほかに以下の記事を参考にさせてもらいました。

さいごに

2020年夏にレイアウトシフトを避けるためにimg要素にはwidthとheight属性を記述するのが良いという記事を書いたんですが、その時点では、pictureとsource要素を使って画面幅にあわせてアスペクト比が違う画像を読み込む場合はレイアウトシフトが起こってしまう状態でした。

少し時間はかかりましたが、いろいろな課題が解決されてきて、レスポンシブなサイトもいい感じに作れるようになってきましたねぇ（遠い目）。IE対応もなくなり、ユーザにさらに良い体験を届けるために時間を使えるようになりますからね💪🏼

そろそろContainer Queriesあたりも試してみないとなぁ〜。

ということで、久々のブログ記事でした！

Until the next time, enjoy responsive coding!

2022年7月18日に公開され、2022年7月20日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。