Introduction to Images and Media in HTML

HTML allows embedding images, audio, and video to enhance web content. These media elements make websites visually engaging and interactive, supporting various formats for broad compatibility.

• Purpose: Deliver visual and auditory content to users.
• Key Elements: <img> for images, <audio> for sound, and <video> for videos.

The <img> Element

The <img> element embeds images and is self-closing, requiring no closing tag. It uses attributes to specify the image source and other properties.

• Key Attributes:
  • src: Path to the image file (e.g., image.jpg or a URL).
  • alt: Alternative text for accessibility and SEO.
  • width and height: Dimensions in pixels (optional for responsive design).
  • title: Tooltip text on hover (optional).

Example: Basic image:

<img src="photo.jpg" alt="Mountain landscape" width="300">

<img src="photo.jpg" alt="Mountain landscape" width="300">

Image Best Practices

• Use alt Text: Describe the image for screen readers and when images fail to load.
• Optimize Images: Use compressed formats like JPEG or WebP for faster loading.
• Relative vs. Absolute Paths: Use relative paths (e.g., images/photo.jpg) for local files, absolute URLs for external images.
• Responsive Images: Use CSS or srcset for different screen sizes (advanced topic).

Example: Image with accessibility:

<img src="logo.png" alt="Company logo" title="Our brand">

<img src="logo.png" alt="Company logo" title="Our brand">

The <audio> Element

The <audio> element embeds sound files, such as music or podcasts, with controls for playback.

• Key Attributes:
  • src: Path to the audio file (e.g., song.mp3).
  • controls: Displays play/pause buttons.
  • autoplay: Starts playback automatically (use sparingly).
  • loop: Repeats the audio.
• Supported Formats: MP3, WAV, OGG.

Example: Audio player:

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

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

The <video> Element

The <video> element embeds video content, supporting playback controls and fallback text.

• Key Attributes:
  • src: Path to the video file (e.g., clip.mp4).
  • controls: Displays playback controls.
  • poster: Image displayed before playback (e.g., thumbnail.jpg).
  • autoplay, loop, muted: Control playback behavior.
• Supported Formats: MP4, WebM, OGG.

Example: Video with fallback:

<video src="tutorial.mp4" poster="preview.jpg" controls>
    Your browser does not support the video element.
</video>

<video src="tutorial.mp4" poster="preview.jpg" controls>
    Your browser does not support the video element.
</video>

Using Multiple Sources

For compatibility, use the <source> element within <audio> or <video> to provide multiple file formats. Browsers choose the first supported format.

Example: Video with multiple sources:

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

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

Best Practices for Media

• Accessibility: Always include alt for images and fallback text for audio/video.
• File Size: Optimize media files to reduce load times.
• Browser Compatibility: Test media across browsers and devices.
• User Experience: Avoid autoplay unless necessary, as it can disrupt users.

Example: Accessible media section:

<section>
    <img src="team.jpg" alt="Our team at work" width="400">
    <audio src="intro.mp3" controls>
        Your browser does not support audio.
    </audio>
    <video src="demo.mp4" controls poster="demo.jpg">
        Your browser does not support video.
    </video>
</section>

<section>
    <img src="team.jpg" alt="Our team at work" width="400">
    <audio src="intro.mp3" controls>
        Your browser does not support audio.
    </audio>
    <video src="demo.mp4" controls poster="demo.jpg">
        Your browser does not support video.
    </video>
</section>