Image and Font Strategy

Match the format to the content: JPEG for photographs, PNG when flat artwork needs exact pixels or transparency, SVG for vector art such as logos and icons that must stay crisp at any size and any screen density.

The browser downloads a 2000px image's full bytes no matter how small CSS draws it, so a phone that needs roughly 800 pixels of width pays for several times the pixels it can show. Serving a ladder of widths recovers that budget.

Each value sets two windows. block gives a short blocking window then swaps whenever the font lands; swap blocks for almost nothing and swaps at any time; fallback blocks briefly and swaps only within a short window; optional blocks briefly and never swaps on that load.

Both compress photographs far better than JPEG — WebP typically around a quarter to a third smaller, AVIF usually smaller again — and both support alpha. AVIF costs much more CPU to encode, can smear fine detail, and can inflate tiny flat images.

A CSS background image is discovered only after the stylesheet downloads, parses and matches the element, so its request starts much later than an <img> the preload scanner finds in the raw HTML. Put the LCP photo in an <img>.

An image CDN keeps one high-resolution master at an origin and derives every variant at request time: it reads the transformation parameters from the URL, resizes and re-encodes the master, returns that derivative, and caches it at the edge for later requests.

Subsetting rebuilds a font file so it contains only the glyphs a site actually renders. Retail fonts ship thousands of glyphs covering scripts, symbols and typographic alternates most pages never use, so dropping them commonly removes more than half the bytes.

The cache key is the master's path plus the transformation parameters, and sometimes request headers the response varies on. Any change to that key — computed widths, extra tracking parameters, reordered or re-cased parameters — mints a new derivative, forcing an origin fetch and a re-encode.

Use the document.fonts font set: call document.fonts.load('1em Brand') to force a face to download and await the returned promise, or construct a FontFace, await its load() and add it to document.fonts. document.fonts.ready resolves when pending font work has settled.

The unicode-range descriptor declares which codepoints a font face covers. The browser downloads that face only if the page actually renders at least one character in the range, so a family split into per-script faces fetches only the scripts the page uses.

A variable font stores one set of outlines plus delta data describing how they change along an axis, so it beats three or four separate static weight files but loses to one or two. Using few weights, or shipping the full axis range when you need a slice of it, makes it heavier.

Serve a muted, looping, inline video, or an animated WebP if it must stay an image element. Video codecs compress across frames and lossily, so the same animation typically costs a tenth of the GIF's bytes or less.

With CSS font-display: block the headline stays invisible until the font arrives, so LCP waits for the font. With swap it paints immediately in a fallback, giving an early LCP but a reflow when the real font arrives, which lands in CLS.

Going from 2x to 3x costs about 2.25 times the pixels for a perceptual gain most people cannot see, so most teams cap at 2x. The lever that matters more is compressing high-density variants harder, since their artifacts fall below one CSS pixel.

Derive widths from the image's own maximum layout width at each breakpoint times the highest pixel density you commit to, not from viewport breakpoints. Space steps by a roughly constant percentage so savings are even, and cap the ladder where the largest layout can use it.

A response whose encoding depends on the request must tell shared caches so, with Vary: Accept or an equivalent normalized cache key. Without it a cache can hand AVIF bytes to a client that cannot decode them; with a naive Vary it fragments into many near-identical copies.

Fonts are discovered late because the browser requests one only after downloading and parsing the stylesheet and finding an element that uses the family. A rel=preload link with as="font", the right type and crossorigin starts the fetch alongside the CSS instead.

They retune a fallback font's metrics to match the webfont's. size-adjust scales glyph outlines and advance widths so text occupies the same width; ascent-override and descent-override replace the metrics that set line-box height. Matched metrics mean the swap changes glyphs without moving anything.

The shared-cache argument is dead: browsers now partition the HTTP cache by top-level site, so a font fetched on another site is refetched on yours. Self-hosting removes a third-party stylesheet-then-font request chain and two extra connection setups from the critical path.

A quality number is an encoder-specific dial, not a shared scale, and different content degrades at different points. Set per-format defaults, tune per content class, and target a perceptual quality measure or a byte budget rather than one magic number.

Transfer is only part of the cost. Decoding, rasterizing and holding an image in memory scale with pixel count, not file size, so a 4000x3000 image costs roughly eleven times the work and memory of a 1200x900 one after the bytes arrive.

Fine granularity buys a few kilobytes per request while splitting traffic across dozens of URLs, so each variant is requested less, cache hit rates fall and cold misses land on real users. Five or six widths per image role captures nearly all the saving.

Build-time generation fits a known, bounded set of images and yields plain static files with no runtime dependency; request-time generation is required for content that arrives after deployment. Most real sites end up hybrid, split on whether the image set is enumerable at build.

Decide from the role of the face and how visibly different the fallback is: swap for body copy, where readable text beats a restyle; block-like behaviour only for icon or symbol faces; optional when a mid-read restyle is worse for the product than some first-time visitors never seeing the brand font.

Decide with data: find how much of real page weight images actually are, rank candidates by traffic times bytes, and convert only where the saving beats the encode, storage and fallback cost. Then apply the policy automatically rather than asset by asset.

Treat the poster image as the real hero: it is the LCP candidate and gets full image discipline. Reserve the video box with a fixed aspect ratio so nothing shifts, defer the video bytes until after the poster paints, and agree a field-data kill criterion up front.

An open transformation endpoint lets anyone mint unlimited novel derivatives, each forcing an origin fetch and a CPU-heavy encode that you pay for. Teams close it with signed URLs, an allowlist of permitted transformations or named presets, dimension caps, and edge rate limiting.