Media

Various kinds of media can be embedded into our apps, such as images, audio, and video.

Images

The various embedded image tags (img, svg, picture, canvas, and video) are set as block-level elements, with a max-width of 100%.

<img src="" width="" height="" alt="">

The max-width: 100% makes images “responsive”, so oversized images shrink to fit within wrappers (or viewports) narrower than the image width. This is done so that they don’t break the page layout.

This image is wider than this column of text, but it is constrained to downsize proportionately to the width of the wrapper.

<img src="" width="" height="" loading="lazy" alt="">

Lazy loading

As in the previous example, the attribute loading="lazy" can be added to images so the browser can defer loading the image until it is needed. This can improve the page’s performance, making it seem to load quicker.

The image width and height attributes must be set, so the browser can lay out the page correctly before the image is called and loaded.

Figure images

An image with a <figcaption>, all enclosed in <figure>:

<figure>
  <img src="" width="" height="" loading="lazy" alt=""> 
  <figcaption>Here is the caption for the image above.</figcaption>
</figure>

Audio

Audio and video elements get their controls from the web browser. The appearance and functionality depends on the browser and the operating system.

We set the width of these controls to 100%; otherwise below is the browser’s default styling for these components.

<audio controls="">audio</audio>

Video

<video controls="">video</video>