HTML Images and Responsive Images: alt Text, figure, srcset, and picture

An image on a web page starts with one element: <img>, carrying a src that points at the file and an alt attribute that describes the image in words. Everything else in responsive images — srcset, sizes, and <picture> — exists to answer one follow-up question: which file should the browser download when screens differ in width and pixel density? Learn to answer that question deliberately and the rest of the topic falls into place.

alt text describes the job, not the pixels

Write alt for what the image does in context. An informative photo gets a short description of what matters about it. An image that is the only content inside a link gets alt text naming the destination or action, because that text becomes the link's accessible name. A purely decorative image gets an empty alt="" — the attribute is present, with nothing inside — which tells assistive technology to skip it. That is not the same as leaving alt off entirely: W3C's Web Accessibility Initiative warns that when the attribute is absent, some screen readers announce the image's file name instead, which almost never helps anyone. For the same reason, a decorative image should carry no title attribute either.

figure and figcaption

<figure> marks self-contained content that the surrounding prose refers to and that could move elsewhere in the document without breaking the flow — an image, a diagram, a code sample, a pull quote. It does not have to contain an image at all. <figcaption> supplies the caption and must be the first or last child of the figure, never buried in the middle, and there is only ever one of them. A caption is visible to every reader; alt text stands in for the image. They do different jobs, so a caption is not a reason to drop alt.

srcset and sizes: resolution switching

When the same picture just needs to arrive at a bigger or smaller file size, keep one <img> and list candidates in srcset. Use width descriptors (photo-800.jpg 800w) when the image's layout width changes with the viewport, and pair them with sizes, which tells the browser how wide the image's slot will be before layout is known. Use pixel-density descriptors ([email protected] 2x) when the image always displays at a fixed size and only the screen's density varies; a candidate written with no descriptor at all counts as 1x. Never mix the two kinds in one srcset, and note that sizes belongs only on an element whose candidates all use w descriptors. If you use w descriptors and omit sizes, the browser falls back to a default source size of 100vw and assumes the image fills the viewport — usually over-downloading.

picture for art direction

<picture> is for when the image itself should change: a tight crop on phones, a wide establishing shot on desktop, or a modern format like AVIF with a JPEG fallback. It holds zero or more <source> elements followed by exactly one <img>, which must come last and carries the alt. Inside <picture>, a <source> must use srcset and must not use src. The browser walks the sources top to bottom and takes the first one whose media and type both pass; if none do, it falls back to the <img>. Leave the <img> out and no image renders at all.

This concept sits alongside the rest of the markup material in the WGU D276 Web Development Foundations study guide. Reference details come from MDN's responsive images guide.

A worked example: one hero image, four files

Say your hero image spans the full width on phones, half the width on tablets, and is capped at 600px on desktop. You export four widths and describe the layout to the browser:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w,
             hero-1200.jpg 1200w, hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            600px"
     width="800" height="450"
     alt="A red canoe pulled up on a gravel shore">

On a 500px-wide phone with a 2x screen, the browser reads sizes top to bottom, stops at the first matching condition, and gets a slot of 100vw = 500px. It needs roughly 500 × 2 = 1000 device pixels, so it typically downloads hero-1200.jpg — the smallest candidate that is big enough. Order matters here: the browser ignores everything after the first match, so a stray (max-width: 1200px) placed first would swallow the phone case too.

Mistakes people actually make

• Mixing descriptor types. srcset="a.jpg 800w, b.jpg 2x" is invalid. Pick w plus sizes, or x alone with no sizes.
• Reaching for <picture> too early. If the image content is identical and only the file size changes, srcset on a plain <img> is simpler and lets the browser optimize freely. Save <picture> for a different crop or a different format.
• Dropping width and height. Those attributes let the browser compute the aspect ratio and reserve the right box before the file arrives, which prevents the page from jolting as images load. Give the dimensions of the file named in src — the ratio is what the browser uses — and let CSS control the rendered size.
• Expecting srcset to resize anything. It only chooses a file. The rendered size still comes from your CSS.
• Captioning instead of describing. A <figcaption> reading "Figure 3" tells a screen reader user nothing about the image; the alt still has to carry the content.

Reasoning about the tricky cases

Two rules resolve most confusion. First, ask what changes: if only the file changes, use srcset; if the image changes, use <picture>. Second, ask what alt is replacing: if the image disappeared, what would the reader lose? Nothing means alt=""; a link destination means describe the destination; information means describe the information.

One nuance worth knowing: the HTML Standard says candidate selection happens in an implementation-defined manner, so a browser may keep a larger file it already has cached rather than fetch your "ideal" one. Treat srcset as a well-informed hint, not a command. And sizes="auto", which lets the browser use the element's own laid-out width, is only valid together with loading="lazy", because only then is layout guaranteed to be known before the image loads. Try these ideas against more markup in the D276 practice questions.