HTML Images

Basic

Images are where HTML gets generous with meaning, because the markup you write decides what a reader who cannot see the picture receives instead. A well-authored <img> carries the picture, a text substitute, and enough size information that the page does not reflow when the file lands.

<img src="logo.png" ?="Foxipa logo">

The element itself is small. Everything in this lesson is about the attributes around it and the judgment they ask of you.

1
2
3

<img src="loaf.jpg"
     alt="A round sourdough loaf with a deeply cracked crust"
     width="640" height="480">

The specification, translated

The HTML Standard treats an image as more than a file URL. The browser uses the img element to represent an image resource, while attributes such as alt, width, height, srcset, and sizes give it information about meaning, geometry, and which resource to use.

For authors, the important rule is simple: alt answers “what should a reader receive if this image is not available or cannot be perceived?”, width and height describe the image’s intrinsic proportions so the browser can reserve space, srcset offers alternative resources at different densities or widths, and sizes tells the browser how wide the image is expected to render when width-based srcset candidates are used.

The specification also separates responsive-image jobs. Use srcset and sizes when the same image can be supplied at different resolutions or widths. Use picture when the resource itself needs to change, such as an art-directed crop or a different supported format. These are related tools, but they solve different problems.

Alt text is content, not a caption

The alt attribute is the text that replaces the image when the image cannot be seen: for a screen reader user, for a broken file, for a search engine crawler, or while a slow connection loads. Because it replaces the image, it belongs to the same content layer as the picture, and it should serve the same purpose.

What that purpose is depends on why the image is there. A product photo on a shop page needs to identify the product. A chart of quarterly sales needs to state the trend, not describe axes and colors. A decorative divider that exists only to look nice needs nothing, and asks for an explicitly empty alt="" so screen readers skip it instead of reading its filename.

Notice what is missing from the table: the words image of and picture of . Screen readers already announce that an image is present, so leading with those words makes every sentence start with a stutter. Describe the loaf, not the fact that there is a loaf.

Width and height protect the layout

The width and height attributes tell the browser the image's proportions before the file downloads. With that ratio known, the browser reserves the right amount of space and text stops jumping around while images arrive, the effect known as layout shift. Modern browsers use these attributes only for the aspect ratio, so CSS can still resize the image freely.

If you set one dimension in CSS and leave the other alone, the browser keeps the ratio from the attributes and computes the rest. That is why a single width: 100% rule plus honest attributes gives you fluid images with no surprises.

Figures and captions

A <figure> wraps content that is referenced from the main flow but complete in itself: images, code listings, charts. Its <figcaption> adds a caption that is visually and semantically attached. Caption and alt text do different jobs, and an image often deserves both: the alt replaces the image for someone who cannot see it, while the caption comments on it for everyone.

1
2
3
4
5

<figure>
  <img src="sales.svg" alt="Loaves sold daily rising from Monday's
      40 to Saturday's 110" width="640" height="360">
  <figcaption>Average loaves sold per weekday, winter season.</figcaption>
</figure>

Formats and file weight

Choosing a format is mostly choosing which kind of image you have. Photographs belong in WebP or AVIF, falling back to JPEG when support matters more than bytes. Flat art, logos, and icons belong in SVG, which stays sharp at every size and usually weighs a few kilobytes. PNG remains the honest choice when you need exact pixels or transparency that older tooling mishandles, and GIF has been replaced for animation by short video and animated WebP.

Whatever the format, resize images to the largest size they will actually be displayed at. Shipping a 4000-pixel camera original for a 640-pixel slot is the single most common performance mistake on otherwise careful pages, and no amount of HTML can undo the downloaded bytes.

Letting the browser pick a size

A phone does not need the file a large monitor needs. The srcset attribute offers several copies of the same image at different widths, and sizes tells the browser roughly how wide the image will be displayed, so it can pick the cheapest file that still looks sharp. The browser does the choosing, which means the decision adapts to the reader's actual screen, zoom level, and connection.

1
2
3
4
5

<img src="loaf-640.jpg"
     srcset="loaf-320.jpg 320w, loaf-640.jpg 640w, loaf-1280.jpg 1280w"
     sizes="(max-width: 40rem) 100vw, 36rem"
     alt="A round sourdough loaf with a deeply cracked crust"
     width="640" height="480">

The <picture> element solves a different problem: art direction, where the image itself changes with the screen, such as a tall crop for phones and a wide crop for monitors. It can also offer format fallbacks, letting a browser take AVIF and falling back to JPEG elsewhere.

?

Try it: an image, sized and captioned

The example below places a figure inside a short article. The image source is a small inline SVG so it loads without any network. Try editing the alt text to something useless and notice that nothing on screen changes: that is exactly why poor alt text ships so easily. Then try removing the width and height and watch the caption jump when the image appears.

Mistakes worth avoiding

• Repeating the caption as alt text. Both get read aloud, and hearing the same sentence twice is a small cruelty.

• Leaving alt off because you were not sure what to write. Empty is a decision; absent is an accident.

• Saving width and height for later. Every image that arrives without them reflows the page under the reader.

• Embedding text inside images for headings or buttons. Text in a picture cannot be selected, searched, translated, or respected by the reader's font size.

• Uploading camera originals. The browser can only shrink what it has already downloaded.

Quick check

If you can write alt text that replaces an image's purpose rather than describing its pixels, explain what the width and height attributes buy you, and say when a caption and alt text should differ, you have this lesson. When you are ready, take the HTML Images quiz.