Images & Favicon

Images bring pages to life - the <img> element embeds them, and a handful of related tags round out how browsers and search engines understand visual content.

The <img> Tag

src points to the image file, alt describes it, and width/height (or their CSS equivalents) help the browser reserve space before the image loads - preventing layout shift.

Try it yourself

<img src="https://picsum.photos/300/180" alt="Random placeholder photo" width="300" height="180" />

Output

Why alt Text Matters

Screen readers announce alt text to visually impaired users, and it shows up if the image fails to load. Use alt="" (empty, but present) for purely decorative images so screen readers skip them.

Responsive Images: srcset, sizes & <picture>

srcset lists multiple versions of an image at different widths, and sizes tells the browser how much space the image will occupy at different viewport widths - together they let the browser pick the best-fitting file instead of always downloading the largest one.

<picture> goes further: it lets you swap to entirely different image sources (a different crop, or a modern format like WebP/AVIF with a JPEG fallback) using multiple <source> elements, falling back to a plain <img> for browsers that don't support any listed source.

Try it yourself

Responsive images

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Responsive product photo"
/>

Output

Lazy Loading & Fetch Priority

loading="lazy" tells the browser to defer loading an off-screen image until the user scrolls near it, saving bandwidth on long pages - never use it on above-the-fold images, since delaying your most important content actually hurts perceived load speed.

fetchpriority="high" does the opposite: it tells the browser to fetch a critical image (like a large hero banner) sooner, ahead of other resources competing for bandwidth.

Try it yourself

Prioritizing above-the-fold vs deferring the rest

<img src="hero.jpg" alt="Hero banner" fetchpriority="high" />
<img src="footer-chart.jpg" alt="Chart" loading="lazy" />

Output

Figures & Captions

<figure> and <figcaption> tie an image to a caption semantically, not just visually.

Try it yourself

<figure>
  <img src="https://picsum.photos/300/180" alt="Random placeholder photo" />
  <figcaption>A randomly generated placeholder image.</figcaption>
</figure>

Output

Favicons

The small icon shown in a browser tab is set with <link rel="icon" href="favicon.ico"> inside <head>. Modern sites usually add a few variants for different contexts: an SVG or PNG icon for crisp rendering at any size, and an apple-touch-icon for when the site is added to an iOS home screen.

Try it yourself

A more complete favicon setup

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Output

Coding challenge

Add an image with meaningful alt text, wrapped in a <figure> with a <figcaption>.

<!-- figure + img + figcaption -->

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/5

1. Which attribute is essential for accessibility on an <img>?

2. What does <figcaption> do?

3. Which attributes help prevent layout shift while an image loads?

4. Where do you typically link a favicon?

5. What does loading="lazy" do on an <img>?