Lesson

HTML Images

10 min reading

Free Course

HTML Images: Embedding Graphics with img, alt, and Sizing

The HTML img element embeds raster and vector images such as WebP, JPEG, PNG, and SVG files onto a web page. Because img is a void element, it carries configuration inside attributes and has no closing tag.

Essential Image Attributes

Every production img element should define four attributes:

src: Path or URL pointing to the image file.
alt: Short description read aloud by screen readers and shown if the file fails to load.
width and height: Intrinsic pixel dimensions so the browser reserves exact layout space before downloading finishes.
loading="lazy": Defers off-screen images below the fold until the user scrolls near them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Images Demo</title>
</head>
<body>
    <figure>
        <img
            src="/images/workspace-setup.webp"
            alt="Developer desk with dual monitors running a code editor"
            width="640"
            height="360"
            loading="lazy"
            style="max-width: 100%; height: auto;"
        >
        <figcaption>Responsive image sized with max-width 100% and height auto.</figcaption>
    </figure>
</body>
</html>

Responsive Images and Captions

Combining HTML width and height attributes with CSS max-width: 100%; height: auto; keeps images crisp on desktop while shrinking smoothly on mobile screens without distorting aspect ratio. Wrap standalone editorial images in figure with a figcaption when adding a visible caption.

Common Mistakes to Avoid

Skipping alt or stuffing keywords into it: Describe what the image shows concisely. For purely decorative icons, write an empty alt="" so screen readers skip them.
Omitting width and height: Missing dimensions trigger Cumulative Layout Shift (CLS) as pages jump when images finish loading.
Adding loading="lazy" to the main hero image: Keep above-the-fold hero images eager (default) so Largest Contentful Paint stays fast.