Skip to main content

Images

Images can improve the design and the appearance of a web page.

  • A text alternative must be provided to the user.
  • Color should not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • Receiving focus should not initiate a change of context. See WCAG 1.4.13 for content on hover or focus requirements.
  • The image view should not be restricted, unless a specific display orientation is essential.
  • Also see WCAG 1.4.12, 4.1.1 and 4.1.2 for markup requirements.

Image

The HTML <img> tag is used to embed an image in a web page.

  • src - Specifies the path to the image
  • alt - Specifies an alternate text for the image
United States Patent and Trademark Office - An Agency of the Department of Commerce
Example HTML usage: 
<img
  src="../assets/img/uspto-square.png"
  alt="United States Patent and Trademark Office - An Agency of the Department of Commerce"
/>

Responsive images

United States Patent and Trademark Office - An Agency of the Department of Commerce
Example HTML usage: 
<img
  src="../assets/img/uspto-rectangle.png"
  class="img-fluid"
  alt="United States Patent and Trademark Office - An Agency of the Department of Commerce"
/>

Thumbnail image

United States Patent and Trademark Office - An Agency of the Department of Commerce
Example HTML usage: 
<img
  src="../assets/img/uspto-square.png"
  class="img-thumbnail"
  alt="United States Patent and Trademark Office - An Agency of the Department of Commerce"
/>