Image Lazy Loading

<img src="large-asset.jpg" loading="lazy" alt="huge image of mountain range in Rocky mountains">

loading="lazy" will wait until image is about to come into view
The default behavior without loading attribute is to load the image, even if it is not visible on screen.
Using loading="eager", will also load image immediately regardless of whether it is actually visible on screen.
good for keeping download/bandwidth low as some images might never be seen by users, so why download images that won't be viewed
good practice to go ahead and include image dimensions in attributes so images occupy space, even when they are not currently loaded.
the idea to include dimensions is to keep layout from reflowing/breaking while images are not visible

Idea

images can still be responsive, even when their dimensions are specified: source

img {
  max-width: 100%;
  height: auto;
}