The <img> element has an alt attribute that should be populated with text describing that image. The content of an image’s alt attribute is used in various situations:

• Search engines can’t see images the same way people do, so they’re going to look at the content of the alt attribute instead.
• When people have their browsers configured to not load images (which is more people than you might think; many have restrictive data and/or bandwidth limits).
• Non graphical browsers, including screen readers, will use the text in the alt attribute in place of the image.
• If the image fails to load, or the image format is not supported by the browser, the alternative text will be displayed instead.

If you find yourself wondering what you should put in an alt attribute ask yourself this question: If you were describing this website to a friend over the phone, and they had no way to view it, how would you describe this image? The answer is what you put for the value of that image’s alt attribute.

Some image elements are not integral to the content of the page, like decorative images. If you wouldn’t mention a particular image to your friend on the phone that <img> element should still have an alt attribute, but its value should be an empty string, like this:

<img alt="" src="...">

An alt attribute with an empty string indicates that non-visual browsers, like screen readers, can simply ignore the image.

For images that are a key part of the content, but have no appropriate textual description, the alt attribute should be omitted entirely (but this is almost never the case).