Images and Multimedia

Learn images, responsive images, audio, video, captions, and embedded content.

Images with img

The <img> element embeds an image resource. The src attribute identifies the image, while alt provides alternative text. Decorative images can use an empty alt="" so assistive technologies can ignore them.

Always Consider alt

Ask whether the image communicates information. If it does, describe that information; if it is purely decorative, an empty alt attribute is often appropriate.

Accessible Image

<img src="developer.jpg" alt="Developer working at a laptop" width="800" height="500">

💡 The alt text communicates the image's purpose. Explicit dimensions can help browsers reserve layout space before the image loads.

Key Takeaways

Meaningful images should have useful alternative text.
Decorative images can use alt="".

Knowledge Check

Which attribute provides alternative text for an image?

Responsive Images

The srcset and sizes attributes allow browsers to choose an appropriate image resource based on viewport and device characteristics. The <picture> element allows art direction and format selection.

Responsive Image

<img\n  src="photo-800.jpg"\n  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"\n  sizes="(max-width: 600px) 100vw, 800px"\n  alt="Mountain landscape">

💡 The browser can select an appropriate resource rather than downloading the largest image for every device.

Key Takeaways

srcset can provide multiple image candidates.
Responsive images can reduce unnecessary bandwidth.

Knowledge Check

Which attribute provides multiple image candidates?

Audio and Video

HTML provides native <audio> and <video> elements. The controls attribute exposes browser-provided playback controls. Multiple <source> elements can provide alternative media formats.

Video

<video controls width="800" poster="preview.jpg">\n  <source src="lesson.mp4" type="video/mp4">\n  <source src="lesson.webm" type="video/webm">\n  Your browser does not support HTML video.\n</video>

💡 The browser can choose a supported source. The fallback text provides information when video is unavailable.

Key Takeaways

HTML supports native audio and video playback.
Multiple source formats can improve compatibility.

Knowledge Check

Which attribute displays native video controls?

Figure and Figcaption

<figure> groups self-contained content such as an image, diagram, chart, or code example. <figcaption> provides a caption for the figure.

Figure Caption

<figure>\n  <img src="architecture.png" alt="Three-tier web architecture">\n  <figcaption>Figure 1: A typical three-tier web application.</figcaption>\n</figure>

💡 The figure groups the visual and its caption into a meaningful unit.

Key Takeaways

Use figure for self-contained illustrative content.
Use figcaption for its associated caption.

Knowledge Check

Which element provides a caption for a figure?

Images with img

Responsive Images

Audio and Video

Figure and Figcaption

STAY UPDATED WITH BYTES!