HTML5 Image and Multimedia Elements

Working with Images

Images are the most common multimedia elements on the web. HTML5 provides robust support for various image formats and implementations.

The Basic <img> Element

The <img> element is the foundation of web imagery. It's a self-closing tag that requires the src attribute to specify the image source.

<img src="mountain.jpg" alt="Snow-capped mountain peak at sunrise">

Essential Attributes for <img>

• src (required): The path to the image file
• alt (required): Alternative text describing the image for accessibility and SEO
• width and height: Dimensions in pixels (recommended to prevent layout shifts)
• title: Additional information that appears on hover
• loading: Can be set to "lazy" to defer loading until the image is near the viewport

<img 
    src="product_photo.jpg" 
    alt="Ergonomic office chair with adjustable armrests" 
    width="500" 
    height="400" 
    loading="lazy" 
    title="Model XYZ-100 Office Chair">

The Importance of the alt Attribute

The alt attribute is not just a technical requirement—it's an essential component of web accessibility. It serves multiple purposes:

• Provides text alternatives for screen readers used by visually impaired users
• Displays when images fail to load
• Helps search engines understand image content
• Improves SEO by adding relevant keywords in context

Image Formats for the Web

Choosing the right image format is crucial for balancing quality and performance:

• JPEG (.jpg, .jpeg): Best for photographs and complex images with many colors. Supports lossy compression.
• PNG (.png): Supports transparency and is ideal for images with text, line art, or when you need lossless compression.
• GIF (.gif): Supports simple animation and transparency, but limited to 256 colors. Best for simple animations and icons.
• WebP (.webp): Modern format that offers superior compression for both lossy and lossless images, with transparency support.
• SVG (.svg): Vector format for graphics that need to scale without quality loss. Perfect for logos, icons, and illustrations.
• AVIF (.avif): New format with excellent compression and quality, but still gaining browser support.

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Description of image">
</picture>

Responsive Images

With the variety of devices accessing the web, serving appropriately sized images is crucial for performance and user experience. HTML5 provides several tools for responsive images:

1. The srcset Attribute

The srcset attribute allows you to specify multiple image sources with their width descriptors, letting the browser choose the most appropriate one.

<img 
    src="small.jpg" 
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
    alt="A responsive image example">

In this example, the browser will choose among three versions based on the viewport size and device pixel ratio.

2. The sizes Attribute

The sizes attribute works with srcset to tell the browser how large the image will be displayed at different breakpoints.

<img 
    src="small.jpg" 
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
    alt="A responsive image example">

This tells the browser: "This image will take up 100% of the viewport width on small screens, 50% on medium screens, and 33% on large screens."

3. The <picture> Element

The <picture> element provides even more control, allowing you to specify different images for different screen sizes or device capabilities.

<picture>
    <source media="(max-width: 600px)" srcset="mobile.jpg">
    <source media="(max-width: 1200px)" srcset="tablet.jpg">
    <source media="(min-width: 1201px)" srcset="desktop.jpg">
    <img src="fallback.jpg" alt="A scenic mountain landscape">
</picture>

This approach is especially useful when you want to show different image compositions (not just different sizes) for different screen sizes.