Images, Fonts, and Media Optimization

The Bytes That Matter Most

Here's a number that should stop you in your tracks: images account for roughly 50% of the average page's total bytes. Fonts add another 5-10%. Together, these media resources are the dominant factor in page load time, Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).

Yet most developers treat image and font optimization as an afterthought — a production build step they never think about. That's a mistake. Understanding how the browser loads, decodes, and renders these resources reveals why certain patterns cause layout shifts and how to eliminate them.

Image Formats: Choosing the Right One

Format Comparison

Serving the Best Format

<!-- The <picture> element serves the best format each browser supports -->
<picture>
  <!-- AVIF: smallest file, served to browsers that support it -->
  <source srcset="/hero.avif" type="image/avif">
  <!-- WebP: fallback for browsers without AVIF -->
  <source srcset="/hero.webp" type="image/webp">
  <!-- JPEG: universal fallback -->
  <img src="/hero.jpg" alt="Hero image" width="1200" height="630">
</picture>

The browser evaluates <source> elements top to bottom and uses the first one it supports. The <img> is the final fallback.

Responsive Images with srcset

Think about this: why serve a 3000px image to a 375px phone? That's wasting 80% of the downloaded bytes. srcset lets the browser choose the right size:

<!-- Width-based srcset: browser picks the closest match to rendered width -->
<img
  srcset="
    /hero-400.avif 400w,
    /hero-800.avif 800w,
    /hero-1200.avif 1200w,
    /hero-2400.avif 2400w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/hero-1200.avif"
  alt="Hero image"
  width="1200"
  height="630"
>

The sizes attribute tells the browser the rendered width at each breakpoint. The browser then picks the smallest srcset entry that covers that width at the device's pixel ratio.

For a 375px phone at 2x DPR with sizes="100vw":

• Rendered width: 375px
• Needed pixels: 375 * 2 = 750px
• Browser picks: hero-800.avif (closest >= 750)

The DPR Gotcha

<!-- DPR-based srcset: for fixed-size images (icons, avatars) -->
<img
  srcset="/avatar-48.avif 1x, /avatar-96.avif 2x, /avatar-144.avif 3x"
  src="/avatar-96.avif"
  alt="User avatar"
  width="48"
  height="48"
>

Preventing CLS from Images

This is one of the most common performance mistakes on the web. Images without width and height attributes cause layout shifts. When the image loads, the browser suddenly learns its dimensions and pushes surrounding content down.

<!-- BAD: No dimensions — causes CLS when image loads -->
<img src="/photo.avif" alt="Photo">

<!-- GOOD: Explicit dimensions — browser reserves space before image loads -->
<img src="/photo.avif" alt="Photo" width="800" height="600">

Modern CSS automatically uses these attributes for aspect ratio calculation:

/* Modern browsers use width/height attributes to calculate aspect ratio
   before the image loads, preventing layout shift */
img {
  max-width: 100%;
  height: auto; /* Maintains aspect ratio while being responsive */
}

With width="800" and height="600", the browser knows the aspect ratio is 4:3 and reserves the correct space even before a single byte of the image downloads.

next/image Patterns

Next.js <Image> component handles most image optimization automatically:

import Image from 'next/image';

// Automatically: AVIF/WebP, responsive srcset, lazy loading, blur placeholder
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={630}
  priority  // Disables lazy loading for LCP image
  sizes="(max-width: 768px) 100vw, 1200px"
/>

// Fill mode: for images with unknown dimensions
<div style={{ position: 'relative', width: '100%', aspectRatio: '16/9' }}>
  <Image
    src="/dynamic-image.jpg"
    alt="Dynamic content"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    style={{ objectFit: 'cover' }}
  />
</div>

Key next/image behaviors:

• Auto-generates AVIF and WebP variants
• Creates responsive srcset at multiple breakpoints
• Lazy loads by default (use priority for LCP images)
• Prevents CLS by requiring width/height or fill
• Generates blur placeholder for perceived performance

Font Optimization

font-display Strategies

Fonts are trickier than most people realize. font-display controls what happens while a custom font is loading:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Preventing CLS from Fonts

Font swaps cause layout shifts when the custom font has different metrics than the fallback. Text reflows, pushing content around.

/* Match fallback font metrics to custom font to minimize reflow */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  /* size-adjust and ascent/descent-override match fallback metrics */
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

The size-adjust and metric override descriptors align the fallback font's dimensions with the custom font, so text occupies the same space regardless of which font is rendering.

Font Loading Best Practices

<head>
  <!-- 1. Preconnect to font origin -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- 2. Preload the most critical font file -->
  <link rel="preload" href="/fonts/inter-400.woff2" as="font"
        type="font/woff2" crossorigin>

  <!-- 3. Use font-display: swap in @font-face -->
  <!-- 4. Self-host fonts when possible (avoids third-party connection) -->
</head>

Lazy Loading Images

<!-- Native lazy loading — built into the browser -->
<img src="/below-fold.avif" alt="Content" width="800" height="600" loading="lazy">

<!-- LCP image: NEVER lazy load -->
<img src="/hero.avif" alt="Hero" width="1200" height="630" loading="eager"
     fetchpriority="high">

<!-- Combine with decoding="async" for non-critical images -->
<img src="/gallery.avif" alt="Gallery" width="600" height="400"
     loading="lazy" decoding="async">

loading="lazy" tells the browser to defer downloading the image until it's near the viewport. The browser uses its own heuristics for "near" — typically a few viewport heights away.

decoding="async" tells the browser it can decode the image on a background thread without blocking the main thread. This prevents image decode from adding to main thread work during scroll.

Production Scenario: The 4-Second LCP

This one had everything wrong. An e-commerce product page had LCP of 4.2 seconds. The LCP element was the product hero image.

Root causes:

1. Hero image was a 2.4MB unoptimized JPEG
2. No width/height — caused 300ms layout shift when loaded
3. loading="lazy" on the hero image (the default in the framework)
4. No preload or fetchpriority hint

The fix:

<head>
  <link rel="preload" href="/products/shoe-hero.avif" as="image"
        fetchpriority="high">
</head>

<img
  src="/products/shoe-hero.avif"
  alt="Running shoe product photo"
  width="1200"
  height="900"
  fetchpriority="high"
  loading="eager"
  decoding="async"
/>

Combined with converting to AVIF (2.4MB → 180KB) and proper sizing (serving 1200px instead of 4000px):

• LCP: 4.2s → 1.1s
• CLS: 0.18 → 0 (layout shift eliminated)
• Total page weight: -2.2MB