Media

Images and video are usually the heaviest thing on a page and the most common cause of layout shift. The conventions below fix both. Serve modern formats, send the size the screen needs, reserve the space before the file arrives, and describe the picture for people who cannot see it.

Pick the formatCopy Anchor Link

• MUST NOT ship a photo as PNG or an animation as GIF.
• MUST strip EXIF and location metadata from photos before publishing.
• SHOULD let the framework convert formats. next/image serves AVIF or WebP when you set images.formats in next.config.

// next.config.mjs
export default {
  images: { formats: ['image/avif', 'image/webp'] },
};

Weight targetsCopy Anchor Link

These are this guide's budgets, not a standard. Pick your own, write them down, and check them in review.

Send the right sizeCopy Anchor Link

A 2400px photo on a 390px phone wastes most of its bytes. Give the browser a list of widths and tell it how wide the image will be drawn.

<img
  src="/img/hero-1200.jpg"
  srcset="/img/hero-640.avif 640w, /img/hero-1200.avif 1200w, /img/hero-2000.avif 2000w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  width="1200"
  height="800"
  alt="Two riso inks mixing in water, orange over blue"
/>

import Image from 'next/image';

<Image
  src={hero}
  alt="Two riso inks mixing in water, orange over blue"
  sizes="(min-width: 1024px) 50vw, 100vw"
  preload            // only for the LCP image (was `priority` before Next 16)
/>

• MUST set sizes on every responsive image. Without it the browser assumes 100vw and downloads the largest file.
• MUST generate widths up to 2× the largest drawn size, and no further.
• MUST use loading="lazy" on images below the fold, and MUST NOT lazy-load the LCP image.
• SHOULD use widths from one shared list, for example 640, 750, 828, 1080, 1200, 1920, 2048. These are the next/image defaults.

Reserve the boxCopy Anchor Link

.media {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--surface-raised); /* the placeholder colour */
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

• MUST give every img and video either width and height attributes or a CSS aspect-ratio.
• SHOULD use a flat placeholder colour or a tiny blurred preview, never a spinner.
• SHOULD crop with object-fit: cover and set object-position when the subject is off-centre.

VideoCopy Anchor Link

<video
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="/video/loop-poster.avif"
  width="1920"
  height="1080"
  aria-hidden="true"
>
  <source src="/video/loop.webm" type="video/webm" />
  <source src="/video/loop.mp4" type="video/mp4" />
</video>

• MUST strip the audio track from any video that autoplays muted. It is dead weight.
• MUST show a visible pause control on any decorative loop longer than 5 seconds (WCAG 2.2.2).
• MUST show the poster and no autoplay under prefers-reduced-motion: reduce.
• MUST caption any video with speech (WCAG 1.2.2) and provide a transcript for audio-only content.
• SHOULD encode loops at 1080p or less, 24 to 30 fps, H.264 MP4 plus an optional WebM (VP9 or AV1) listed first.
• SHOULD host long video on a streaming service or use HLS. A 2-minute MP4 in public/ is a bandwidth bill.

# A web-ready silent loop: H.264, no audio, streamable
ffmpeg -i in.mov -an -vf "scale=1920:-2,fps=30" -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart loop.mp4

Alt textCopy Anchor Link

• MUST give every img an alt attribute. Empty for decoration, meaningful for content.
• MUST NOT start with "Image of" or "Picture of". Screen readers already say "image".
• MUST NOT repeat the caption or the nearby text word for word.
• SHOULD keep alt to one sentence. Longer descriptions go in the page or a figcaption.

Social cards and iconsCopy Anchor Link

• SHOULD keep the OG image's text away from the outer 60px or so. Some platforms crop or round the edges.
• MUST set og:image:alt when the card carries information.
• SHOULD check the favicon at 16px. If it does not read, simplify it to one shape or one letter.

Why it worksCopy Anchor Link

Format and size rules remove most of a page's weight without anyone seeing a difference. Reserved boxes mean nothing jumps as files arrive, which is what CLS measures. Alt text rules turn "add some alt" into a checkable habit, and fixed card and icon sizes mean a link looks right wherever it is shared.

SourcesCopy Anchor Link