Send appropriately sized images, choose efficient formats, load critical media correctly, and keep editorial visuals useful.
Images are often the largest visible assets on a page, which makes them one of the easiest places to waste bandwidth. The goal is to send an image that is large enough for the rendered slot, encoded efficiently, and loaded at the right time.
A phone does not need a 3000-pixel-wide image for a card that renders at a few hundred CSS pixels. Responsive image markup lets the browser choose an appropriate source based on layout and device characteristics. This can save more data than small compression adjustments applied to an unnecessarily large source.
AVIF and WebP can reduce file size for many photographic and graphic images, but the best result depends on the source. Screenshots with small text should be checked visually after compression. SVG is useful for suitable vector artwork, but user-controlled SVG files require security care when embedded or processed.
A useful screenshot, diagram, or chart can increase comprehension as well as page weight. Give meaningful images appropriate alternative text or captions and remove decorative assets that do not help the reader. Performance optimization should preserve information, not reduce a guide to plain text for the sake of a score.
Primary documentation and references used to support this guide.