TopolearnImages are most of a page's bytes, and missing alt text is the most common accessibility failure on the web.
<img src="photo.jpg" alt="..."> embeds an image. It's a void element, and two of its attributes deserve real thought.
alt is the text alternative, read by screen readers and shown if the image fails to load. Describe what the image conveys in context: "Bar chart: sales doubled in 2025", not "chart.png". If an image is purely decorative, use an empty alt="" so assistive technology skips it. Leaving out alt entirely is worse: screen readers may read the file name.
width and height in pixels (unitless numbers) let the browser reserve the right space before the image downloads. Without them, text jumps down when images load, which is the layout shift Core Web Vitals penalise. CSS can still resize the image; the browser uses the attributes for the aspect ratio.
Pick formats sensibly:
- JPEG or WebP/AVIF for photos,
- PNG or WebP for screenshots with sharp edges and transparency,
- SVG for logos, icons and diagrams, since it scales without blur.
For a caption, wrap the image in <figure> with a <figcaption>. Add loading="lazy" to images far down the page so they download only when the user scrolls near them, but never to the main image at the top.
Example
<!-- informative image: describe what it conveys -->
<img src="sales-2025.png" alt="Bar chart: sales doubled between 2024 and 2025"
width="800" height="450">
<!-- decorative image: empty alt, so screen readers skip it -->
<img src="divider.svg" alt="" width="600" height="20">
<!-- image with a visible caption, loaded only when near the viewport -->
<figure>
<img src="team.jpg" alt="Our five-person team at the 2026 offsite"
width="1200" height="800" loading="lazy">
<figcaption>The team in Yerevan, June 2026.</figcaption>
</figure>Remember
- Every img needs alt: a description, or alt="" if decorative
- Set width and height to prevent layout shift
- Use figure and figcaption for captions
- loading="lazy" for below-the-fold images only
Watch out for
- Lazy-loading the hero image at the top of the page, which delays the most important paint.