動作に疑問点があったので、HTML LSでのpicture要素の動作を検証。
検証の目的
親要素がpicture要素の時にsource要素および、img要素が適切に選択されるが、印刷時にどの画像が選択されるのかを検証し、現時点で最適な画像を表示するためのマークアップを確立する。
現時点（2022-12-17時点）での最適なマークアップ
<picture class="wp-block-image">
<source srcset="印刷用の画像" media="print">
<source srcset="1xの画像.webp 1x,2xの画像.webp 2x, 3xの画像.webp 3x" type="image/webp" media="メディアクエリ">
<source srcset="1xの画像.jpg 1x, 2xの画像.jpg 2x, 3xの画像.jpg 3x" media="メディアクエリ">
<img src="画像.jpg" srcset="1xの画像.jpg 1x, 2xの画像.jpg 2x, 3xの画像.jpg 3x" alt="画像の説明" loading=lazy|eager>
</picture>
印刷用にmedia属性を指定
2行目にmedia属性をprintに指定。W3Cの仕様では印刷時はこの画像が使用されるはずだが現時点では動作しないブラウザが多い。（FireFoxは動作する）
<picture class="wp-block-image">
<source srcset="picture-L.jpg" media="print">
<source srcset="picture-S.webp 1x,picture-M.webp 2x, picture-L.webp 3x" type="image/webp">
<source srcset="picture-S.jpg 1x, picture-M.jpg 2x, picture-L.jpg 3x">
<img src="picture-M.jpg" srcset="picture-S.jpg 1x, picture-M.jpg 2x, picture-L.jpg 3x" alt="画像の説明">
</picture>
media属性を省略した場合
現時点では、media属性を指定した場合と動作に違いはない。
<picture class="wp-block-image">
<source srcset="picture-S.webp 1x,picture-M.webp 2x, picture-L.webp 3x" type="image/webp">
<source srcset="picture-S.jpg 1x, picture-M.jpg 2x, picture-L.jpg 3x">
<img src="picture-M.jpg" srcset="picture-S.jpg 1x, picture-M.jpg 2x, picture-L.jpg 3x" alt="画像の説明">
</picture>
印刷時にどの画像が選択されるのか？
| ブラウザ | バージョン | 選択される画像 | 備考 |
|---|---|---|---|
| Edge | |||
| Safari | 1xの画像.webp | ||
| Chrome | 1xの画像.webp | ||
| FireFox | 印刷用の画像 | ||
| iOS版Safari | 3xの画像.webp | ||
| Android |
コメントを残す