Images that fit without jumping around

Reserve space before the file arrives

Width and height attributes give the browser an aspect ratio before it downloads an image. CSS can still make that image responsive. Reserving the space keeps the paragraph below from moving when the image finally appears.

<img
  src="/images/workbench-960.jpg"
  width="960"
  height="640"
  alt="A wooden workbench with a laptop and two small computers"
>

<style>
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

Describe the purpose of the image

Alternative text depends on why an image is on the page. Describe information a reader would otherwise miss. If the same information is already present in adjacent text, or the image is purely decorative, an empty alt attribute may be appropriate. Do not omit the attribute and leave the browser to improvise.

Offer more than one source size

For a photograph shown at different widths, srcset and sizes let the browser choose a file. Replace the example file names with actual image variants. The sizes attribute describes the expected layout width; it does not resize the element by itself.

<img
  src="/images/workbench-960.jpg"
  srcset="/images/workbench-480.jpg 480w,
          /images/workbench-960.jpg 960w"
  sizes="(max-width: 640px) 100vw, 640px"
  width="960"
  height="640"
  alt="A laptop and two small computers on a workbench"
  loading="lazy"
>

Use lazy loading selectively

Lazy loading is useful for images farther down a page. Avoid adding it to the main image that a reader sees immediately, because that can delay the most visible part of the page. Test the final layout on a narrow screen and on a slow connection.