Media Elements: Images, Audio, and Video Embedding

A website built purely with text is boring. Modern websites require rich media like images, audio tracks, and interactive video players. In this guide, we will learn how to embed media elements and optimize them for high-performance loading.

1. Images (<img> & <picture>)

The basic way to render an image is using the self-closing <img> tag:

<img src="assets/cat.jpg" alt="A cute orange kitten playing with yarn" width="600" height="400" loading="lazy">

Key Attributes:

• src (Source): The URL path to the image file (can be local or a web link).
• alt (Alternative Text): Extremely important for accessibility and SEO. Explains the image content to blind users using screen readers or when the image fails to load.
• width & height: Resizes the space. Setting these prevents Layout Shifts (CLS) while page loads.
• loading="lazy": Prevents the browser from downloading the image until the user scrolls close to it, saving huge bandwidth.

High-Performance Image Loading: The <picture> Tag

For production websites, JPG and PNG are often too heavy. Developers use modern formats like WebP or AVIF which offer up to 70% smaller file sizes without losing quality.

Using the <picture> tag, you can provide fallback images for older browsers:

<picture>
    <source srcset="assets/cat.avif" type="image/avif">
    <source srcset="assets/cat.webp" type="image/webp">
    <img src="assets/cat.jpg" alt="A cute orange kitten playing" width="600" height="400" loading="lazy">
</picture>

• The browser will load cat.avif if supported.
• If not, it falls back to cat.webp.
• If neither is supported, it falls back to the default cat.jpg inside the nested <img> tag.

2. Audio Elements (<audio>)

You can embed music or podcasts directly on your web pages using the <audio> tag.

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

Controls explained:

• controls: Displays play, pause, and volume buttons. Without this, the player is invisible!
• autoplay: Starts playing automatically (browsers often block this unless the audio is muted).
• loop: Restarts the track when it ends.
• muted: Starts playing in silent mode.

3. Video Elements (<video>)

Similar to audio, the <video> tag embeds video players directly:

<video width="640" height="360" controls poster="thumbnail.jpg" playsinline>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

• poster: Displays a custom preview image before the video is played.
• playsinline: Plays the video inline on mobile devices rather than going full screen automatically (essential for iOS Safari).

In the next guide, we will master hyperlinks, absolute vs. relative paths, and anchor jumps.