Lesson 13: Images

If you want to add an image to your webpage, you’ll use the <img> tag. Only use this tag for images that add real meaning to your page. If a design is just for decoration, it’s better to handle it later with styles.

The basic image tag requires a src attribute. This is the source path telling the browser where to find the image file. You’ll also need an alt attribute to describe the content.

<img src="images/eve.png" alt="Eve" />

Sometimes you want to show different images depending on the screen size. You can do this with the srcset attribute on the <img> tag or by using the <picture> tag.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <img src="images/eve.png" alt="Eve" />
</picture>

You can help your pages load faster by setting a width and height on your images. You can also use loading="lazy" to wait to load images until they’re close to the screen.

To group an image with a caption, wrap them both in a <figure> tag. Then put the caption text inside a <figcaption> tag.

Write helpful alt text#

Alt attributes should be short and describe the context of the image. Imagine you’re reading the page to someone over the phone. Since screen readers identify image tags automatically, don’t include phrases like “image of” or “screenshot of” in the text.

The best description depends on where the image is used.

For example, if the image is a user profile picture next to a comment, the user’s name is enough. For a pet adoption page, you should describe details not found in the text, like the dog’s color or size.

When you use images as buttons or icons, the alt text should describe what the button does. A magnifying glass icon should say “search” instead of “magnifying glass”.

If the image is a screenshot or a graph, describe the main takeaway instead of the layout. If the screenshot just shows a step that’s already explained in the text, you can use a blank alt attribute.

Decorative images should have an empty alt="" attribute. This tells screen readers to skip them.

<img src="svg/magazine.svg" alt="" role="none" />

For our workshop website, we have photos of the instructors. Since these photos represent real people, they need a detailed description.

<img
  src="svg/hal.svg"
  role="img"
  alt="Hal 9000 camera lens with a red dot that changes to yellow when hovered."
/>

When writing your alt text, think about what information the image is sharing. Keep the text short and helpful.

Responsive images#

We shouldn’t send massive desktop pictures to small mobile screens. We can serve different files based on the screen size.

The srcset attribute#

The srcset attribute lists multiple image options. You can provide different widths, and the browser will pick the best size for the device. If you use this, you should also include the sizes attribute to tell the browser how much space the image takes on the screen.

The <picture> tag#

The <picture> tag holds multiple <source> tags and a default <img> tag. The browser checks the list and picks the first option that fits the screen size. If none match, it uses the default image.

Making images load faster#

We can use a few attributes to make images load faster.

Lazy loading#

By setting loading="lazy", the browser waits to download the image until the user scrolls close to it. This saves internet data and computer power.

<img src="switch.svg" alt="light switch" loading="lazy" />

Aspect ratio#

By default, browsers don’t save space for images while they’re loading. This causes the page to jump around when the image suddenly appears.

Always include width and height numbers on your <img> tags. This tells the browser how much space to reserve before the image even downloads.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

You can still change the size later using styles, but these numbers help prevent the page from jumping.

Other image features#

The <img> element also supports other attributes like decoding and fetchpriority to give the browser extra instructions.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).