HTML
Image optimization
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
Next lesson: Template and noscript
