The img Element & Alt Text

<img> is a void element: it has no closing tag and embeds an image into the document at the point it appears. The src attribute points to the image file; the alt attribute provides a text alternative. Both are required for a meaningful image, though the rules for alt depend on what the image communicates.

When an image fails to load, the browser typically shows a broken-image icon alongside the alt text. When a screen reader encounters an <img>, it announces the alt value in place of the image. Both of these make alt a functional part of the content, not an optional annotation.

A screen reader user cannot see the image. The alt text is the entire experience of that image for them. A vague alt="image" or a missing alt forces them to skip content that sighted users receive naturally. Well-written alt text delivers the same information the image would deliver to someone who can see it.

Alt text also appears in place of images when they fail to load: slow connections, corporate firewalls that block image domains, or a typo in the src path all produce broken images. A page whose images all carry meaningful alt text still communicates when its images do not render.

For meaningful images, write alt text that describes what the image communicates in context. Skip the redundant prefix: do not write alt="photo of a puppy", write alt="a golden retriever puppy running on a beach". The screen reader already announces it as an image; you do not need to say so again. Focus on what information a sighted reader gets from the image, and write that.

For decorative images, set alt="" (an empty string). This tells assistive technology to skip the element entirely. Do not omit the alt attribute: without it, some screen readers fall back to reading the src filename aloud, which is almost always meaningless noise. The distinction between alt="" and no alt attribute is subtle in markup but significant in experience.

For images inside links, the alt text must describe the link destination, not the image. If a logo links to the home page, alt="Home" or alt="Example Corp home page" is correct. The logo's visual appearance is irrelevant; what matters is where the link goes.

Add loading="lazy" to any <img> below the fold. The browser will defer fetching the image until the user scrolls near it, saving bandwidth on initial load. Never put loading="lazy" on the largest image visible on page load (the LCP image); that image should load as early as possible.