Accessibility & Multi-Screen Design
Images

Overview

• Definitions
• The <img> element
  • alt attribute
  • srcset display density
  • srcset width descriptors
  • sizes
• The <picture> element
  • type

This Image

• Size: 5144×1698px
• >11 1024×768px monitors!
• 410kb on disk

Blackberry Curve

• Resolution: 320×240px @ 164ppi
• >113 phones needed to display the high res image

The alternative text (alt) describes an image in a way that the purpose or content of the image is clear without seeing the image.

Decision Tree

Does the image contain text?

• Yes:
  • … and the text in the image is also present as real text nearby. Use an empty alt attribute. See Decorative Images.
  • … and the text is only shown for visual effects. Use an empty alt attribute. See Decorative Images.
  • … and the text in the image is not present otherwise. Use the alt attribute to include the text of the image. See Images of Text.
• No:
  • Continue.

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?

• Yes:
  • Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.
• No:
  • Continue.

Does the image contribute meaning to the current page or context?

• Yes:
  • … and it’s a simple graphic or photograph.Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images.
  • … and it’s a graph or complex piece of information.Include the information contained in the image elsewhere on the page. See Complex Images.
  • … and it shows content that is redundant to real text nearby. Use an empty alt attribute. See Functional Images.
• No:
  • Continue.

Is the image purely decorative or not intended for the user?

• Yes:
  • Use an empty alt attribute. See Decorative Images.
• No:
  • Continue.

When do you need only a simple img?

• A fixed width, single density web page
• Small differences in file size
• Using vector-based images like SVG

Types of resolutions

• The old days (and still some PCs today): 96/72ppi
• iPhone 1-3GS: 320×480px @ ~165ppi
• iPhone 4 & 4s: 640×960px @ ~330ppi
• iPhone 5 & 5s: 640×1136px @ ~326ppi
• iPhone 6: 750×1334px @ ~326ppi
• iPhone 6 Plus: 1080×1920px @ ~401ppi