Images, audio, and video make up most of the weight — and most of the visual impact — of a typical web page. HTML gives you dedicated elements for each, and getting a few key attributes right matters a lot more than it looks: they affect accessibility, SEO, page-load performance, and how well your page adapts across screen sizes.

The img Element and alt Text

<img
  src="/images/dashboard-screenshot.png"
  alt="Analytics dashboard showing monthly traffic trending upward"
  width="800"
  height="450"
/>

This renders the image at its given dimensions. The alt attribute is not optional decoration — it's read aloud by screen readers in place of the image, shown as fallback text if the image fails to load, and used by search engines (including image search) since they can't "see" a picture the way a human can. A good alt text describes what the image conveys, not just what it literally contains — "Analytics dashboard showing monthly traffic trending upward" is far more useful than "screenshot.png".

Setting explicit width and height attributes also prevents layout shift: the browser can reserve the correct space for the image before it finishes downloading, instead of the page jumping around as images pop in.

Responsive Images with srcset

<img
  src="/images/hero-800.jpg"
  srcset="/images/hero-400.jpg 400w,
          /images/hero-800.jpg 800w,
          /images/hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Team collaborating around a laptop"
/>

Rather than always downloading one large image, srcset gives the browser several versions at different widths (described in pixels with the w unit), and sizes tells it how wide the image will actually be displayed at different viewport widths. The browser then picks whichever source file makes the most sense — a phone downloads the small version, a desktop downloads a larger one, saving bandwidth without any JavaScript involved.

The video and audio Elements

<video controls width="640" poster="/images/preview.jpg">
  <source src="/videos/demo.mp4" type="video/mp4" />
  <source src="/videos/demo.webm" type="video/webm" />
  Your browser doesn't support HTML video.
</video>

<audio controls>
  <source src="/audio/track.mp3" type="audio/mpeg" />
</audio>

This renders a video player with native play/pause/volume controls and a poster image shown before playback starts, plus a separate audio player below it. Multiple <source> elements let the browser pick whichever format it actually supports — it tries them in order and uses the first one it can play. The plain text inside <video> only shows up in the rare case that the browser supports neither format.

Lazy Loading

Adding loading="lazy" to an <img> tells the browser to skip downloading that image until it's about to scroll into view, which can meaningfully speed up the initial load of image-heavy pages — a one-word attribute with no JavaScript needed.

Once your media is in place, controlling how it's sized and positioned on the page is a job for CSS — specifically the box model and, for responsive behavior across screen sizes, media queries.