Is inline_preview_images enabled by default?

No. inline_preview_images is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with EnableFilters.

How do I enable inline_preview_images on Apache and nginx?

Add ModPagespeedEnableFilters inline_preview_images on Apache or pagespeed EnableFilters inline_preview_images; on nginx. On IIS, add pagespeed EnableFilters inline_preview_images to pagespeed.config.

filter · Image filters

Inline preview images (inline_preview_images)

Q: What does the inline_preview_images filter do?

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

Category:: Image
CoreFilters:: No
OptimizeForBandwidth:: No
Risk:: Test first

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

How it works

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.

When to use it

Not in CoreFilters: it runs only when you enable it by name.
Risk rating on these docs: Test first.

Risks

Inlining increases HTML size. Inlined images are not cached separately by the browser. Set ImageInlineMaxBytes conservatively.
inline_preview_images adds JavaScript and a visible quality transition. Users see a blurry image before the full-resolution variant loads.
resize_mobile_images relies on User-Agent detection. Incorrect UA classification can serve wrong-sized images. It also pulls in inline_preview_images, so expect that filter’s placeholder-then-swap behavior when enabling it.

Configuration

Enable it in the module configuration, at server, virtual-host or location scope:

Apache

ModPagespeedEnableFilters inline_preview_images

nginx

pagespeed EnableFilters inline_preview_images;

IIS (pagespeed.config)

pagespeed EnableFilters inline_preview_images

Parameter	Default	Description
`ImageInlineMaxBytes`	3072	Maximum image size in bytes to inline as a data: URI

Scoping, ForbidFilters and the thresholds filters read: Choosing filters .

Live example

Shows an inlined low-quality placeholder until the full image loads.

Measured on the demo page, original against optimized:

Total bytes

60.0 KB → 42.1 KB −30%

See the before and after, with the source diff →

Frequently asked questions

What does the inline_preview_images filter do?: inline_preview_images replaces full-size images with a low-quality inline placeholder that loads instantly, then swaps in the full image via JavaScript.
Is inline_preview_images enabled by default?: No. inline_preview_images is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with EnableFilters.
How do I enable inline_preview_images on Apache and nginx?: Add ModPagespeedEnableFilters inline_preview_images on Apache or pagespeed EnableFilters inline_preview_images; on nginx. On IIS, add pagespeed EnableFilters inline_preview_images to pagespeed.config.

dedup_inlined_images — Deduplicate inlined images
inline_images — Inline images
resize_mobile_images — Resize images for mobile
convert_gif_to_png — Convert GIF to PNG
convert_jpeg_to_avif — Convert JPEG to AVIF
convert_jpeg_to_progressive — Progressive JPEG
convert_jpeg_to_webp — Convert JPEG to WebP
convert_png_to_jpeg — Convert PNG to JPEG

This page is drawn from the inline_preview_images entry on Image filters. Every filter in one table: PageSpeed filters.