Image optimization

HTML course · Expert · Lesson 15/39

Write optimized images with srcset, sizes, loading, decoding and width/height.

Image optimization: six attributes

On a news page images are usually the biggest payload. Adding six attributes to <img> improves both LCP and CLS:

src: fallback image path.
srcset: list of sources at different widths.
sizes: width hint per viewport.
width / height: reserves space, lowers CLS.
loading="lazy": defers off-screen images.
decoding="async": offloads decoding from the main thread.

How do srcset and sizes work?

srcset lists the image at different widths: file-480.webp 480w, file-960.webp 960w. The w suffix marks pixel width.

sizes tells how much space the image takes per viewport: (max-width: 600px) 100vw, 50vw. Full width on mobile, half on desktop.

The browser combines both and picks the best source for the device. A large image is no longer sent to a small screen; bandwidth is saved.

Exercise Add an optimized image inside main

Take the body with the header from the previous lesson. After <header>, add a <main>; inside it put an <article>. Inside the article add an h2 (e.g. Markets hit a new high) and an <img>. The img should carry: src (https://cdn.fastnews.com/cover/main-story-960.webp), srcset (480w, 960w, 1440w), sizes ((max-width: 600px) 100vw, 50vw), width="960", height="540", alt (description), loading="lazy" and decoding="async".

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fast News - Home</title>
    <link rel="preconnect" href="https://cdn.fastnews.com">
    <link rel="dns-prefetch" href="https://cdn.fastnews.com">
    <link rel="preload" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">
  </head>
  <body>
    <header>
      <h1>Fast News</h1>
      <p>Your fast news source</p>
    </header>
    <main>
      <article>
        <h2>Markets hit a new high</h2>
        <img src="https://cdn.fastnews.com/cover/main-story-960.webp"
             srcset="https://cdn.fastnews.com/cover/main-story-480.webp 480w,
                     https://cdn.fastnews.com/cover/main-story-960.webp 960w,
                     https://cdn.fastnews.com/cover/main-story-1440.webp 1440w"
             sizes="(max-width: 600px) 100vw, 50vw"
             width="960" height="540"
             alt="Rising chart on a market screen"
             loading="lazy" decoding="async">
      </article>
    </main>
  </body>
</html>

Test yourself

What value of loading defers an off-screen image?
- loading="eager"
- loading="lazy"
- loading="defer"
- loading="async"
Show answer

loading="lazy" — Correct. loading="lazy" loads the image only as it nears the viewport.

Complete the decoding attribute

<img src="cover.webp" width="960" height="540" alt="Chart" decoding="____">

Show answer

<img src="cover.webp" width="960" height="540" alt="Chart" decoding="async">

Match each attribute to its role

srcset

List of sources at different widths
sizes

Viewport width hint
width + height

Reduces CLS
loading="lazy"

Defers off-screen images

Try it yourself

index.html

All lessons in Expert

Image optimization