More than 1 year has passed since last update.

<source>タグにwidth heightを設定する方法

HTML5

Last updated at 2022-05-11Posted at 2022-05-11

いきさつ

横解像度最大3840に対応するサイトで

スマホ用の画像で、MVNO低速モード（200kbps）で、loading="lazy"を無視したおかしな表示をされるので

＆どくっても出てこないので

picture source imgタグでのwidth heightの設定

index.html

<picture>
	<source media="(min-width:2601px)" srcset="/img/3840.png" width="3840" height="1520">
	<source media="(min-width:2161px)" srcset="/img/2600.png" width="2600" height="1029">
	<source media="(min-width:1921px)" srcset="/img/2160.png" width="2160" height="855">
	<source media="(min-width:1681px)" srcset="/img/1920.png" width="1920" height="760">
	<source media="(min-width: 1284px)" srcset="/img/1680.png" width="1680" height="665">
	<source media="(min-width: 1100px)" srcset="/img/1284.png" width="1284" height="508">
	<source media="(min-width: 920px)" srcset="/img/1100.png" width="1100" height="435">
	<source media="(min-width: 810px)" srcset="/img/920.png" width="920" height="364">
	<source media="(min-width: 750px)" srcset="/img/810.png" width="810" height="321">
	<source media="(min-width: 512px)" srcset="/img/750.png" width="750" height="297">
	<source media="(min-width: 428px)" srcset="/img/512.png" width="512" height="203">
	<source media="(min-width: 414px)" srcset="/img/428.png" width="428" height="169">
	<source media="(min-width: 375px)" srcset="/img/414.png" width="414" height="164">
	<img loading="lazy" src="/img/375.png" width="375" height="148">
</picture>

普通に width、heightが指定できます。
超低速回線スマホでheightが正しく認識されるようになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up