# Inline preview images (inline_preview_images)

Inserts low-quality image placeholders. The inline_preview_images filter: what it does, its risks and the Apache, nginx and IIS directives.

Canonical URL: https://modpagespeed.com/docs/filters/inline_preview_images/

- 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**

```apache
ModPagespeedEnableFilters inline_preview_images
```

**nginx**

```nginx
pagespeed EnableFilters inline_preview_images;
```

**IIS (pagespeed.config)**

```text
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](https://modpagespeed.com/docs/filter-selection/).

## Live example

See the before and after, with the source diff: [inline_preview_images example](https://modpagespeed.com/examples/inline_preview_images/).

## 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.

## Related filters

- [`dedup_inlined_images`](https://modpagespeed.com/docs/filters/dedup_inlined_images/): Deduplicate inlined images
- [`inline_images`](https://modpagespeed.com/docs/filters/inline_images/): Inline images
- [`resize_mobile_images`](https://modpagespeed.com/docs/filters/resize_mobile_images/): Resize images for mobile
- [`convert_gif_to_png`](https://modpagespeed.com/docs/filters/convert_gif_to_png/): Convert GIF to PNG
- [`convert_jpeg_to_avif`](https://modpagespeed.com/docs/filters/convert_jpeg_to_avif/): Convert JPEG to AVIF
- [`convert_jpeg_to_progressive`](https://modpagespeed.com/docs/filters/convert_jpeg_to_progressive/): Progressive JPEG
- [`convert_jpeg_to_webp`](https://modpagespeed.com/docs/filters/convert_jpeg_to_webp/): Convert JPEG to WebP
- [`convert_png_to_jpeg`](https://modpagespeed.com/docs/filters/convert_png_to_jpeg/): Convert PNG to JPEG

This page is drawn from the [inline_preview_images entry on Image filters](https://modpagespeed.com/docs/image-filters/#inline_preview_images). Every filter in one table: [PageSpeed filters](https://modpagespeed.com/docs/filters/).