HTML Story Media

4.0 Images and Media

HTML includes native elements for images, responsive image selection, video, audio, and embedding external content. All media elements should include fallback content or descriptive attributes for users who cannot see or hear the media.

4.1 The img Element

<img> embeds an image. It is a void element (no closing tag). The src attribute is required; alt is required for accessibility.

<img src="photo.jpg" alt="A red barn in a snowy field" width="600" height="400">

alt text is read by screen readers and displayed when the image fails to load. Describe what the image shows. Use alt="" (empty) for decorative images that add no information.
width and height attributes prevent layout shift (CLS) by reserving space before the image loads. Always specify them.
loading="lazy" defers loading off-screen images until needed.
decoding="async" lets the browser decode the image off the main thread.

Common image formats

Format	Best use
JPEG / JPG	Photographs and complex images. Lossy compression. No transparency.
PNG	Screenshots, logos, images needing transparency. Lossless.
WebP	Modern replacement for JPEG/PNG. Smaller files. Supported by all modern browsers.
AVIF	Newest format. Best compression. Growing browser support.
SVG	Vector graphics (icons, diagrams). Resolution-independent. Can be styled with CSS.
GIF	Short animations. Limited to 256 colors. Largely replaced by WebP/APNG/video.

4.2 Responsive Images

The <picture> element selects among image sources based on media conditions or format support. The browser uses the first matching <source> and falls back to the <img>.

<!-- Format selection (modern browsers get WebP, others get JPEG) -->
<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Landscape photo" width="800" height="500">
</picture>

<!-- Responsive art direction (different crops at different sizes) -->
<picture>
  <source media="(max-width: 600px)" srcset="photo-small.jpg">
  <source media="(max-width: 1200px)" srcset="photo-medium.jpg">
  <img src="photo-large.jpg" alt="Team photo" width="1200" height="800">
</picture>

For resolution switching without art direction, use the srcset and sizes attributes directly on <img>:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Product photo"
  width="800" height="600">

4.3 figure and figcaption

The <figure> element wraps self-contained content (an image, diagram, or code listing) that is referenced from the main text. <figcaption> provides an optional caption.

<figure>
  <img src="arch-diagram.svg" alt="System architecture diagram" width="600" height="400">
  <figcaption>Figure 1. System architecture overview.</figcaption>
</figure>

4.4 Video

<video> embeds a video player. List multiple <source> elements to provide fallback formats. The browser picks the first one it supports.

<video controls width="640" height="360" poster="preview.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <p>Your browser does not support HTML video.</p>
</video>

controls — show the built-in browser controls (play, pause, volume, fullscreen).
autoplay — start playing immediately. Requires muted in most browsers.
muted — start without audio.
loop — restart when the video ends.
poster — image shown before playback starts.
preload="none|metadata|auto" — hint for how much to buffer before play.

4.5 Audio

<audio> works like <video> but without a visual frame:

<audio controls>
  <source src="track.ogg" type="audio/ogg">
  <source src="track.mp3" type="audio/mpeg">
  <p>Your browser does not support HTML audio.</p>
</audio>

4.6 Embedding with iframe

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=..."
  width="600"
  height="400"
  title="Map of downtown"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin">
</iframe>

title describes the embedded content to screen readers.
loading="lazy" defers loading until the iframe is near the viewport.
sandbox restricts what the embedded page can do. Remove only the permissions you actually need.

4.7 References

Media References

Resource	Description
MDN: <img>	Full attribute reference including srcset, sizes, and loading.
MDN: HTML images tutorial	Covers images, responsive images, figure, figcaption, and accessibility.
MDN: <video>	Video element reference with attribute descriptions.
web.dev: Images on the web	Modern image guidance including formats, responsive design, and performance.
MDN: <iframe>	Iframe reference including security and sandbox attribute details.

HTML Story: Media

images, responsive images, video, audio, embedding