🖼️ Image Integration and Attributes

Why Images Need Care

A well-chosen image can explain in a glance what a paragraph struggles to say. But images are also, by far, the heaviest thing most pages download — often more bytes than all the HTML, CSS, and JavaScript combined. Get them wrong and your page is slow, inaccessible, and jumps around as it loads. Get them right and it's fast, inclusive, and beautiful.

Everything in HTML images comes down to three questions: What are you showing (which format)? How big should it be on each device (responsive sizing)? And what does it mean to someone who can't see it (alt text)? This lesson answers all three.

The img Element

At minimum, an image needs two attributes: src (where the file is) and alt (what it shows). The <img> element is a void element — it has no closing tag.

<img src="/images/puppy.jpg" alt="A golden retriever puppy playing with a red ball">

The src can be a root-relative path (/images/logo.png), a relative path (images/logo.png), or a full URL to a remote host. As with links, root-relative paths are the most robust for multi-folder sites.

Choosing an Image Format

Each format is a trade-off between quality, file size, transparency, and browser support. Matching the format to the content is the biggest single win for image performance.

Here's a quick decision path:

Performance Attributes

width and height — stop the page from jumping

Always set width and height to the image's real pixel dimensions, even when CSS resizes it. The browser uses that ratio to reserve space before the image downloads, preventing Cumulative Layout Shift (CLS) — the annoying jump where content leaps down as an image pops in.

<img src="/images/banner.jpg" alt="Summer sale banner" width="1200" height="600">

Pair this with a little CSS so the image stays responsive while keeping its aspect ratio:

img {
  max-width: 100%;
  height: auto;
}

loading — defer off-screen images

Add loading="lazy" to images below the fold so the browser waits until they're about to scroll into view. This can dramatically cut the initial page weight.

<img src="/images/footer-photo.jpg" alt="Our office building" width="800" height="533" loading="lazy">

Do not lazy-load your most important above-the-fold image (like a hero) — that would delay the thing users came to see. For that image, use fetchpriority="high" instead.

decoding — keep the main thread free

decoding="async" hints that the browser may decode the image off the main thread, keeping the page responsive.

<img src="/images/profile.webp" alt="Jane Smith, Marketing Director"
     width="200" height="200" decoding="async">

Responsive Images

A phone on a slow network should not download the same 2000-pixel-wide image as a 4K desktop. Responsive-image markup lets the browser pick the best file for the screen and connection.

srcset + sizes — same image, many resolutions

List several widths of the same picture in srcset (each tagged with its real pixel width using the w descriptor), and describe the display width with sizes. The browser does the math and downloads just one file.

<img
  src="/images/photo-800.jpg"
  srcset="/images/photo-400.jpg 400w,
          /images/photo-800.jpg 800w,
          /images/photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="A quiet forest path in autumn"
  width="800" height="533">

The src is the fallback for very old browsers. The sizes value reads: "up to 600px wide, the image fills the viewport; up to 1200px it takes half; otherwise a third."

The picture element — different images or formats

Use <picture> when you need to swap the actual image (art direction) or offer modern formats with a fallback. The browser picks the first matching <source>; the <img> is the required last resort.

<!-- Offer AVIF, then WebP, then JPEG -->
<picture>
  <source type="image/avif" srcset="/images/hero.avif">
  <source type="image/webp" srcset="/images/hero.webp">
  <img src="/images/hero.jpg" alt="Mountains at sunrise" width="1200" height="800">
</picture>

<!-- Art direction: a tall crop on phones, wide on desktop -->
<picture>
  <source media="(max-width: 600px)" srcset="/images/portrait.jpg">
  <img src="/images/landscape.jpg" alt="Team celebrating a launch" width="1200" height="675">
</picture>

Alt Text & Accessibility

Good alt text describes the content and function of an image concisely — usually under ~125 characters. Skip "image of…" (screen readers already announce it as an image), and use an empty alt="" for purely decorative images so they're silently skipped.

figure and figcaption

When an image needs a visible caption, wrap it in <figure> with a <figcaption>. The caption and the alt text serve different audiences, so you still write both — alt for those who can't see the image, the caption for everyone.

<figure>
  <img src="/images/traffic.webp"
       alt="Line chart of monthly visitors rising from 5k in January to 20k in June"
       width="800" height="450">
  <figcaption>Figure 4 — Monthly site traffic, Jan–Jun 2026. Source: Analytics.</figcaption>
</figure>

Hands-on Exercise

<figure class="image-card">
  <img
    src="/images/mountain-800.jpg"
    srcset="/images/mountain-400.jpg 400w,
            /images/mountain-800.jpg 800w,
            /images/mountain-1200.jpg 1200w"
    sizes="(max-width: 700px) 100vw, 400px"
    alt="Snow-capped mountain peak under a clear blue sky"
    width="800" height="533"
    loading="lazy" decoding="async">
  <figcaption>Mount Rainier at dawn.</figcaption>
</figure>

.image-card { max-width: 400px; border-radius: 8px; overflow: hidden; }
.image-card img { width: 100%; height: auto; display: block; }

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Responsive images
• MDN — The img element
• web.dev — Optimize Cumulative Layout Shift

🚀 What's Next?

You can now add images that are fast, responsive, and accessible. Next we go beyond still pictures into motion and sound: audio and video implementation with HTML5's native media elements.