Image Dimensions, Loading, and Priority

Image loading affects both perceived speed and layout stability. A browser can reserve the image’s space when you provide its intrinsic dimensions:

<img src="images/team.jpg"
     width="1200"
     height="800"
     alt="The project team standing outside the workshop">

The width and height attributes describe the image’s intrinsic dimensions. CSS can still make the image responsive, commonly with max-width: 100%; height: auto;. The browser uses the dimensions to calculate an aspect ratio and reserve space while the image downloads.

For images far below the initial viewport, loading="lazy" can defer the request until the image is near the visible area. Do not lazy-load the main hero image or another image likely to be the page’s Largest Contentful Paint element. Delaying the most important image can make the page feel slower.

<img src="images/article-hero.jpg" width="1600" height="900"
     fetchpriority="high" alt="A developer reviewing a page on a laptop">
<img src="images/related-story.jpg" width="800" height="533"
     loading="lazy" alt="A printed project checklist on a desk">

Use high fetch priority sparingly. If every image is marked high priority, the browser has no useful signal about what matters most. Measure the page before adding loading hints.