Images and Multimedia

Images and multimedia on web pages

How to add images, video, and audio to HTML pages – and how to embed content from elsewhere when hosting it yourself is not practical. A picture is worth a thousand words, as they say, and on the web that is often literally true.

Embedding images with `<img>`

The <img> tag is the standard way to put an image on a page. Unlike most tags, it is self-closing and needs a couple of attributes to work properly.

Basic image syntax

Here is a minimal example:

<img src="image.jpg" alt="Descriptive text">

src (source): the path to the image file.
alt (alternative text): describes what the image shows – important for accessibility and SEO.

Choosing the right image format

Pick the format to match the content. JPEGs suit photographs, PNGs handle transparency, and SVGs are vector graphics that stay sharp at any size.

Image dimensions

You can set size with width and height attributes, but CSS is usually the better choice – more flexible and easier to make responsive.

<img src="image.jpg" alt="Descriptive text" style="width: 100%; height: auto;">

Adding video

The <video> tag embeds video on your page. You can list multiple <source> elements so different browsers can pick a format they support.

Basic video embedding

A simple example:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

The controls attribute adds play, pause, and volume controls. Include fallback text for browsers that do not support the tag.

Where to host video

Large video files on your own server can chew through bandwidth quickly. For most sites, hosting on YouTube or Vimeo and embedding the player is the sensible option.

Audio elements

The <audio> tag works much like <video>, but for sound files.

Embedding an audio file

Example:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Again, add controls and a fallback message.

Responsive and accessible multimedia

Pages get viewed on all sorts of screen sizes. Your images and video should scale without breaking the layout.

CSS for responsiveness

This keeps images and video within their container:

img, video {
    max-width: 100%;
    height: auto;
}

Accessibility for images and multimedia

Always write meaningful alt text for images. For audio and video, add captions or transcripts where you can – not everyone can see or hear your content.

Embedding external media

Use the <iframe> tag to embed content from other sites – YouTube videos, Google Maps, and similar. It loads another page inside a frame on yours.

Embedding a YouTube video

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Best practices for multimedia

Optimise for performance: large files slow pages down. Compress images and video without wrecking quality.
Watch for layout shifts: reserve space for media so the page does not jump around as things load.
Test across browsers and devices: check that everything plays and displays as expected.

Images, video, and audio make pages more engaging, but they come with a cost in file size and accessibility work. Get the HTML right, keep files lean, and you will have media that helps rather than hinders.

Images and Multimedia