Inline images (inline_images)

• inline_preview_images replaces full-size images with a low-quality inline placeholder that loads instantly, then swaps in the full image via JavaScript.

• dedup_inlined_images replaces repeated inline data: URIs on the same page with JavaScript references to the first occurrence, reducing HTML size.

• resize_mobile_images serves smaller images to mobile devices based on the User-Agent header. Enabling it also enables inline_preview_images, which it depends on.

inline_preview_images serves a low-quality preview first and the real image after. For each image the critical-images beacon has marked as above the fold, whose optimized size is between MinImageSizeLowResolutionBytes (default 3072 bytes) and MaxImageSizeLowResolutionBytes (default 1 MB), the optimizer encodes a tiny low-resolution version at quality 10, with profile, metadata and provenance stripped from the throwaway preview. The original src (and srcset, when present) is renamed to data-pagespeed-high-res-src (and -srcset). The preview is used only when it is small: it must fit MaxLowResImageSizeBytes (default: no cap) and be smaller than the full image under MaxLowResToFullResImageSizePercentage (default 100). On desktop the preview becomes the src and an onload handler on the image swaps in the full image; on mobile with aggressive rewriters on, the previews are injected as scripts after the last previewed image in the flush window, and a script at the end of the body swaps in the full images, on scroll when LazyloadHighresImages is enabled. The filter is beacon-driven: until the critical-images finder has data it does nothing, so a site’s first views are unchanged. It stands down when the page’s Content-Security-Policy forbids the inline scripts the swap relies on.

dedup_inlined_images shrinks pages that repeat the same inlined image. When two or more references have become identical data: URIs, the first occurrence keeps its bytes and gets an id; every later occurrence of the same data URI loses its src and instead carries a one-line inline script that copies the first image’s src back onto the element at run time. There is a floor below which dedup does not pay: a data URI must be longer than 185 bytes, roughly the size of the restoring snippet, or it is left as it is. The filter needs JavaScript, so it is disabled for user agents that cannot lazy-load images and for XMLHttpRequests, and it stands down inside <noscript> or when the page’s Content-Security-Policy forbids inline scripts. The num_dedup_inlined_images_candidates_found and num_dedup_inlined_images_candidates_replaced statistics in the admin console show how much it found and how much it replaced.