@ou-imdt/css/docs/native/img.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# img

The img tag __must__ have a `src` attribute with a `url` to a file or data url of an image.

Images for purely layout or decorative purposes should have an empty alt attribute (alt=""), otherwise the alt attribute should be populated with information conveying the point of the image; for example and image of text should convey the text, while an icon should convey what the icon represents rather than describing the icon. If alt is entirely omitted it conveys that an image is important but cannot have it's meaning conveyed using alternative text

When rendering images from an outside source the crossorigin attribute should be used to handle cross origin resource sharing (CORS) issues, when omitted an none-CORS request is made for the resource which can cause errors in some browsers. the cross-origin attribute can be either 'anonymous' or 'use-credentials' depending on how security is (the anonymous value should work within the OU).

If required, the height and width attributes should have the intrinsic height and width entered without at unit, setting these prevents re-flow errors when pages are loading and ensures aspect ratio can be maintained if desired. The sizes attribute can also be used to better manage display sizes.

There are advanced uses of the img tag based on resources available and requirements of use, please refer to the [MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#styling_with_css) for the img tag</a> for more.

## Example

<div class="card">
  <img src="https://picsum.photos/id/237/300/300" alt="A black labrador puppy." />

  <hr>

  <img src="https://picsum.photos/seed/2/300/300" alt="" crossorigin="anonymous" />
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <img src="https://picsum.photos/id/237/300/300" alt="A black labrador puppy." />

  <hr>

  <img src="https://picsum.photos/seed/2/300/300" alt="" crossorigin="anonymous" />
```

</details>