Images

Images are used to convey information in a purely visual way.

Alt (or equivalent) text

Images should normally be described in text, usually using the alt attribute.

BMO from Adventure Time sitting on Jake the Dog’s head, sitting on Finn the Human’s head, all of them smiling happily

If an image is purely decorative and would provide no value to a screen reader user, the alt attribute should be empty.

Note: a space or other invisible character does not count as empty and will be attempted to be read by screen readers.

If there is no alt attribute, screen readers will read the file name:

Animated images

Animated Gifs or MP4s can be used to display an animation.

By using the <picture> element and the media="(prefers-reduced-motion: no-preference)" attribute we can ensure our animations are not given to users who have set their operating system to reduce motion.

The image description goes here