Picture perfect images with the modern <img> element - Stack Overflow Blog という記事によくまとまっている。 また、関連して Priority Hints の fetchpriority 属性とあわせて紹介する。 導入として、Web における画像のペイロードは大きくなる一方で、Core Web Vitals にも大きく影響している。 Largest Contentful Paint のために、<link rel="preload"> や fetchpriority 属性でヒーロー画像のリクエストを早めたり、srcset 属性や <source> 要素で適切なフォーマットの画像をロードし、画面外の画像は loading 属性でロードを遅らせる Cumulative Layout Shift のために、画像の縦横サイズを
![Web における画像ロードベストプラクティス](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a8b0d4856496b87cac5a6d4bbf951cbce8fd9c8/height=288;version=1;width=512/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2Favatar%2F1ed2f95fdc.jpeg)