【フロントエンド】備忘録2022/3 HTML,VSCodeなど。
img要素には、width,heightに値を指定してレイアウトシフトを防ぐ
・img要素にwidth,heightに値を指定することでレイアウトシフト（読み込み時に大きさ指定がないと画面がズレる。）を防ぐのが良い。
・さらに、loading="lazy"も指定すれば読み込みを遅らせることで負荷を下げられる。また、背景画像へのlazy適用には、ライブラリも有効だが、imgタグに変えてposition:absoluteで設置するのも良いかも。
・また上記のうち、flexbox内のimg要素には、object-fit:containを指定し、画面が縮んだ時に縦横比が変わらないようにするといい。
srcset属性とpicture+souceタグについて
・srcsetは、サイズ違いの画像として分ける時だけ使う。
・picture+sourceタグは、違う画像として分ける時だけ使う。
parashuto.com
srcsetは、2022年2月に私も試したところ、以下の記事のようにブラウザにより作用しなかった。
igawa.co
・IEもそろそろ切れるので、ますます積極的に使うべきだと思いました。
・個人的にsrcsetはちょっと書き方がややこしいですが、pictureの方は分かりやすいので、読み込み負荷を下げるためにも使いたいです。
