HTML Media Elements

As already mentioned, images are displayed using the <img> element. They enhance the visual appeal and convey information on your webpages.

Example:

<img src="image.jpg" alt="Description of the image"/>

In this example, we have an image element with the src attribute specifying the image source URL or file path. The alt attribute provides alternative text that describes the image for accessibility purposes or if the image fails to load.

Summary

• src specifies the image source (URL or file path)
• alt provides alternative text for accessibility and SEO

Here are some commonly used image formats:

• JPEG: It's best for photographs or images with lots of colors. JPEGs can be compressed considerably, which can result in a faster load time.
• PNG: It's ideal for images that require transparency and higher quality. PNGs are usually larger than JPEGs and should be used sparingly.
• SVG: Ideal for vector graphics as they are resolution-independent and typically smaller in file size.
• WebP: A modern image format that provides superior lossless and lossy compression for images on the web.
  

Picture element

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found or the browser doesn't support the <picture> element, the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

<picture>
    <source srcset="/media/some-image-320.png" media="(orientation: portrait)" />
    <img src="/media/some-image.png" alt="" />
</picture>

Summary

• The browser evaluates <source> elements first
• It selects the best match based on conditions
• If no match is found, the <img> fallback is used

This approach helps optimize images for responsive design.

Audio content can be embedded using the <audio> element. It allows you to provide audio files playable directly on your webpages.

Example:

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

The type attribute helps the browser determine whether it can play the audio format before downloading it.

In this example, the <audio> element contains one or more <source> elements specifying the audio source URL or file path and the corresponding MIME type. The controls attribute adds playback controls to the audio player. The text between the opening and closing <audio> tags serves as a fallback message for browsers that do not support the <audio> element.

Summary

• <source> defines the audio file and MIME type
• controls adds play/pause controls
• Fallback text appears if audio isn’t supported

Video content can be embedded using the <video> element. It allows you to provide video files playable directly on your webpages.

Example:

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

For accessibility, video content should include captions or transcripts whenever possible.

In this example, the <video> element contains one or more <source> elements specifying the video source URL or file path and the corresponding MIME type. The controls attribute adds playback controls to the video player. The text between the opening and closing <video> tags serves as a fallback message for browsers that do not support the <video> element.

Summary

• <video> supports multiple sources
• controls enables playback controls
• Fallback text improves compatibility

SVGs, or Scalable Vector Graphics, are used to include vector-based images in your HTML document. They are resolution-independent and can scale without loss of quality, which makes them ideal for graphics like logos or icons.

<svg width="50" height="50">
    <circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />
</svg>

Why use SVG

• Resolution-independent
• Small file size
• Can be styled and animated with CSS

SVGs are widely used in modern web interfaces.

An iframe is used to embed another HTML document within the current one. You can use this to include content from another website, like a YouTube video or a map from Google Maps.

<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4" 
        title="YouTube video" 
        width="600" 
        height="400">
</iframe>

Common uses

• Embedding YouTube videos
• Maps
• External tools or widgets

Use iframes carefully, as they load external content and can affect performance.

When using media elements, it's important to consider accessibility. Provide meaningful alternative text (alt) for images to describe their content to users who rely on screen readers or when the image cannot be displayed. For video and audio content, include captions, transcripts, or audio descriptions to make them accessible to users with hearing impairments.

Example:

<img src="https://placehold.co/600x400" 
    alt="Description of the image"
    title="Additional information about the image"/>

In this example, the alt attribute provides alternative text for the image, while the title attribute provides additional information or a tooltip about the image. The title attribute should not replace alt text, as screen readers rely primarily on alt for image descriptions.

By incorporating images, audio, and video using HTML media elements, you can create engaging and interactive web pages. 

HTML media elements allow you to enrich webpages with images, audio, video, vector graphics, and embedded content. By using the correct elements and accessibility practices, you create pages that are engaging, performant, and inclusive.