Topic 22 of 57 4. HTML Links and Media Interactive Tutorial

HTML Image Tag: Attributes, Image Formats, and Examples

14 mins read Last updated: 12 Nov 2026 19,600 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you embed and optimize images using the <img> tag, picture element, and modern formats?

Direct Answer & Overview

The HTML tag is a void (self-closing) element used to embed images on web pages. Essential attributes include 'src' (image URL), 'alt' (alternative descriptive text for accessibility and SEO), 'width' and 'height' (to prevent Cumulative Layout Shift), and 'loading="lazy"' for high-performance lazy loading.

Comprehensive Step-by-Step Concepts

1) Void Element Anatomy: The tag does not have a closing tag. It embeds graphics via the 'src' attribute. 2) Crucial Accessibility: The 'alt' Attribute: The 'alt' attribute provides alternative text read aloud by screen readers for visually impaired users. It also appears if the image fails to load and is indexed by search engines for Google Image Search. Decorative images must use alt="" so screen readers ignore them. 3) Preventing Cumulative Layout Shift (CLS): Always declare explicit 'width' and 'height' aspect ratios directly on the tag. This allows browsers to reserve layout space before the image bytes download, preventing sudden page layout shifts. 4) Performance Optimization with Lazy Loading: Adding 'loading="lazy"' instructs the browser to defer downloading images located below the fold until the user scrolls near them, dramatically accelerating initial page load. 5) Modern Image Formats: - AVIF & WebP: Next-gen formats providing superior compression at fraction of JPG/PNG sizes. - SVG: Scalable Vector Graphics, infinitely sharp at any resolution; ideal for logos and icons. - PNG: Lossless compression supporting alpha transparency; ideal for UI screenshots. - JPG: Lossy compression for detailed photographs. 6) The Responsive

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Optimized Images Showcase</title>
</head>
<body>
    <h2>Optimized Image Embedding</h2>
    
    <!-- Standard Responsive Image with Lazy Loading -->
    <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600" 
         alt="Web developer writing code on modern laptop" 
         width="600" 
         height="400" 
         loading="lazy" 
         style="max-width: 100%; height: auto; border-radius: 8px;">

    <h2>Next-Gen Picture Element with Fallback</h2>
    <picture>
        <source srcset="/images/hero.avif" type="image/avif">
        <source srcset="/images/hero.webp" type="image/webp">
        <img src="/images/hero.jpg" alt="Company Headquarters Architecture" width="800" height="450" loading="lazy">
    </picture>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always specify descriptive 'alt' text, declare width and height dimensions to prevent CLS, and use loading="lazy" for below-the-fold images.

Common Technical & Interview Questions

Q1: What happens if you omit the 'alt' attribute entirely from an tag?

A1: Screen readers may announce the raw image filename or full URL (e.g. 'image-109283-final-v2.jpg'), creating an irritating and confusing user experience. Additionally, automated accessibility audits (Lighthouse) will fail.

Q2: Why should width and height attributes be included even if CSS controls the final responsive size?

A2: Modern browsers calculate the image's intrinsic aspect ratio from the HTML width and height attributes. This allows the browser to reserve the exact layout space, preventing Cumulative Layout Shift (CLS).

Q3: When should you use srcset vs the element?

A3: Use 'srcset' with 'sizes' when serving the exact same image at different resolutions for retina/mobile screens. Use '

All HTML Topics

Previous TopicHTML Audio Tag: Attributes, Supported Formats, and Examples

Next TopicHTML Video Tag: Attributes, Supported Formats, and Examples