How to make images responsive

Constrain every content image

A maximum width prevents overflow while automatic height preserves the intrinsic aspect ratio.

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

Reserve layout space

Include intrinsic width and height in HTML. Browsers calculate the aspect ratio before the file loads, reducing layout movement.

<img src="/images/workshop.webp"
     alt="People learning in a workshop"
     width="1200" height="800">

Offer resolution choices

With srcset and sizes, the browser selects an appropriate resource for the image's expected display width.

<img src="/images/course-800.webp"
     srcset="/images/course-480.webp 480w,
             /images/course-800.webp 800w,
             /images/course-1200.webp 1200w"
     sizes="(min-width: 60rem) 50vw, 100vw"
     alt="A laptop showing a course page">

Choose loading behavior

• Lazy-load images below the initial viewport
• Do not lazy-load the main above-the-fold image
• Compress files and select an appropriate format
• Use picture when the crop or format must change