Images: the img tag, real alt text, and responsive images
Images are one of the heaviest parts of most real pages, and the <img> tag has more genuinely important attributes than its simple appearance suggests. This part covers the ones that matter for a real, production site — not just src.
The basic tag
<img src="/images/ethiopian-light-roast.jpg" alt="A bag of Ethiopian Light Roast coffee beans" /><img> is a self-closing (void) element — it has no closing tag and no content between tags, unlike every element covered so far. src points to the image file; alt is covered next, and it's not optional in any meaningful sense despite technically being omittable.
Alt text: not optional, and not just for SEO
<!-- genuinely useful alt text -->
<img src="/images/gift-box.jpg" alt="Bright Leaf Coffee gift box with a 12oz bag and a handwritten note" />
<!-- useless alt text that technically satisfies the attribute -->
<img src="/images/gift-box.jpg" alt="image" />
<!-- correct for a purely decorative image with no real information -->
<img src="/images/decorative-swirl.svg" alt="" />alt text is read aloud by screen readers in place of the image — a visitor who can't see the gift box photo relies entirely on that text to know what's actually there. It's also what search engines use to understand image content, since they can't reliably interpret pixels the way a human can, which directly ties into the SEO series' own image SEO guidance. Writing alt="image" or leaving it off entirely technically avoids an HTML validator warning while providing zero real information to either audience — worse than doing nothing, since it wastes the one chance to convey what the image actually shows. An empty alt="" (not omitted, genuinely empty) is the one correct case for images that are purely decorative and carry no real information — it explicitly tells a screen reader to skip the image entirely rather than announce a meaningless filename.
Width and height: preventing real layout shift
<img src="/images/ethiopian-light-roast.jpg" alt="..." width="800" height="600" />Specifying real width and height attributes (matching the image's actual aspect ratio) lets the browser reserve the correct space for the image before it finishes loading — without them, the page visibly jumps as each image loads in, a real, measurable metric called Cumulative Layout Shift that's part of Core Web Vitals, covered in the SEO series' own page-speed guidance. This is a case where an attribute that looks like it's only about sizing is actually a genuine performance and user-experience fix.
Responsive images: srcset, for real different screen sizes
<img
src="/images/ethiopian-light-roast-800.jpg"
srcset="
/images/ethiopian-light-roast-400.jpg 400w,
/images/ethiopian-light-roast-800.jpg 800w,
/images/ethiopian-light-roast-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A bag of Ethiopian Light Roast coffee beans"
/>srcset gives the browser several real versions of the same image at different widths, and sizes tells it how much space the image will actually occupy at different viewport widths — the browser then picks whichever file is genuinely the best fit, rather than a phone downloading the same 1600px-wide file a desktop monitor needs. This is a real, meaningful bandwidth and load-time saving, not a micro-optimization — a product photo served needlessly large to every mobile visitor is a common, avoidable chunk of unnecessary page weight.
Writing detailed, keyword-stuffed alt text purely to try to rank in image search, rather than describing what the image actually shows. Alt text that reads like "best coffee subscription cheap coffee gift ideas 2026" fails a screen reader user completely and reads as spam to search engines too — genuinely descriptive, accurate alt text serves both audiences at once, which is the entire point of writing it correctly.
Loading behavior: loading="lazy"
<img src="/images/brewing-guide-step-3.jpg" alt="..." loading="lazy" />Adding loading="lazy" tells the browser to defer loading an image until it's about to scroll into view — genuinely useful for images further down a long page (like a brewing guide's step-by-step photos) that don't need to load immediately, saving real bandwidth and speeding up the initial page load. It should not be used on an image visible immediately when the page loads, since deferring that one actually delays what the visitor sees first — covered in more depth in the performance part later in this series.
Next: semantic HTML5 layout elements — <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> — the real structural vocabulary a modern page is built from.