Images are usually the heaviest assets on a page, and they are also the assets most directly tied to perceived speed and layout stability. Three choices matter: format, size, and loading timing. AVIF now offers the best compression for most photographic content, with WebP as the broadly compatible fallback and JPEG or PNG reserved for legacy systems. The picture element lets the browser pick among sources by media query or file type, while srcset combined with sizes lets the browser choose a resolution that matches the device and viewport. Setting width and height attributes on the tag, or an aspect-ratio in CSS, reserves space so the image cannot push other content around as it arrives, which directly improves CLS.
Beyond format and resolution, loading behavior shapes both speed and stability. Native lazy loading defers off-screen images and iframes until they are near the viewport. The decoding async attribute on an image hints the browser to decode off the main thread, protecting input latency. A hero image meant to be the LCP element benefits from being preloaded and flagged with fetchpriority set to high so the browser knows to start it immediately. Image CDNs such as Cloudinary, Imgix, and Cloudflare Images transform and optimize assets on demand via URL parameters, which removes manual resizing and format conversion from the build. Progressive JPEGs that load in passes can feel faster than baseline JPEGs for the same total size, and animated GIFs should generally be replaced by muted autoplay loop video, which is one or two orders of magnitude smaller for the same visual effect. Long pages with embedded YouTube iframes should use a facade such as lite-youtube-embed, deferring the iframe until the user actually clicks.
Fonts deserve the same care. Slow web fonts can delay the first useful paint or trigger layout shifts when a fallback is replaced by the real face. The font-display property controls this swap: optional avoids any blocking at the cost of missing the font for some users, while swap shows fallback text immediately and replaces it when the web font arrives, trading a Flash of Unstyled Text for avoiding a Flash of Invisible Text. A Flash of Faux Text shows a synthetic weight or style until the real font loads. Matching metrics with size-adjust and other descriptors further reduces shift on swap.
WOFF2 uses Brotli internally and is typically thirty percent smaller than plain WOFF; subsetting keeps only the glyphs the product actually uses; and variable fonts can replace several weight files with a single one. Self-hosting fonts has largely overtaken third-party font CDNs, because cross-site cache partitioning means a CDN hit is unlikely in modern browsers. Preconnecting to the font origin closes the connection setup gap. SVG icons should be run through SVGO to strip editor metadata, small icons inlined directly, and larger icons served via a single SVG sprite referenced through use. Every one of these choices trades a small amount of build complexity for substantial end-user wins.