# Responsive images (responsive_images) Generates srcset for multiple resolutions. The responsive_images filter: what it does, its risks and the Apache, nginx and IIS directives. Canonical URL: https://modpagespeed.com/docs/filters/responsive_images/ - Category: Image - CoreFilters: No - OptimizeForBandwidth: No - Risk: Test first `responsive_images` adds a `srcset` to `` tags so a high-density screen fetches a sharper file and a 1x screen stops paying for pixels it cannot show. The module generates a resized variant for each configured pixel density, plus the full-sized original, and offers them as `url N.x` candidates; the browser picks by viewport and device pixel ratio. Not a core filter; enable it by name. ## How it works Live demo: [responsive_images](https://modpagespeed.com/examples/responsive_images/). ### When it helps and when it does not It helps where the same page serves both ordinary screens and phones or high-density displays: the 1x visitor downloads the small file instead of the oversized original, and the 2x visitor gets a file that is actually sharp. It adds nothing for an image whose declared dimensions already equal the source file's size: every candidate then resolves to the same file and no srcset is emitted. Every variant is a resized copy in the cache, so a page with many large images multiplies its storage; the `responsive_images_zoom` companion adds a script and refetches on zoom. ### How it decides The filter needs `src`, `width` and `height` on the ``; an image without declared dimensions, an image that already carries a `srcset`, one marked `data-pagespeed-no-transform`, and 1x1 tracking pixels are all left alone. Densities come from `ResponsiveImageDensities` (default `1.5,2,3`, each must be above zero). Each candidate is resized to the declared dimensions scaled by its density, and the full-sized original joins the list at the resolution its width actually represents. Candidates whose URL or final dimensions equal the previous candidate's are dropped, so an image whose source file is only slightly larger than the 1x size gets a shorter list. If the highest-density variant turns out small enough to inline as a `data:` URI, it becomes the single `src` and no `srcset` is emitted. The filter is wired up only when `resize_images` is also enabled, which it is under CoreFilters through `rewrite_images`. ## When to use it - Not in CoreFilters: it runs only when you enable it by name. - Risk rating on these docs: **Test first**. ## Risks - Generating multiple variants per image increases storage and cache requirements on the server. - If images have many density variants, the total bytes served across all variants can exceed the original single image. Monitor cache size and bandwidth. - Requires `width` and `height` attributes on `` tags to calculate variant dimensions. - Verify with the `X-Mod-Pagespeed` response header and a `?PageSpeedFilters=-responsive_images` comparison; [Is it working?](https://modpagespeed.com/docs/is-it-working/) has the steps. ## Configuration Enable it in the module configuration, at server, virtual-host or location scope: **Apache** ```apache ModPagespeedEnableFilters responsive_images ``` **nginx** ```nginx pagespeed EnableFilters responsive_images; ``` **IIS (pagespeed.config)** ```text pagespeed EnableFilters responsive_images ``` ```html ``` To control which pixel densities are generated (default `1.5,2,3`), use `ResponsiveImageDensities` with a comma-separated list of numbers: ```apache ModPagespeedResponsiveImageDensities 1.5,2,3 ``` ```nginx pagespeed ResponsiveImageDensities 1.5,2,3; ``` ### On the worker The worker runs its own pipeline, configured by flags. Its equivalent of this filter is the [image pipeline](https://modpagespeed.com/docs/worker-configuration/#image-pipeline) transform. Always-on baseline under `pagespeed on;`; there is no per-transform off switch. 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: [responsive_images example](https://modpagespeed.com/examples/responsive_images/). ## Frequently asked questions **What does the responsive_images filter do?** `responsive_images` adds a `srcset` to `` tags so a high-density screen fetches a sharper file and a 1x screen stops paying for pixels it cannot show. The module generates a resized variant for each configured pixel density, plus the full-sized original, and offers them as `url N.x` candidates; the browser picks by viewport and device pixel ratio. Not a core filter; enable it by name. **Is responsive_images enabled by default?** No. `responsive_images` is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with `EnableFilters`. **How do I enable responsive_images on Apache and nginx?** Add `ModPagespeedEnableFilters responsive_images` on Apache or `pagespeed EnableFilters responsive_images;` on nginx. On IIS, add `pagespeed EnableFilters responsive_images` to pagespeed.config. ## Related filters - [`resize_images`](https://modpagespeed.com/docs/filters/resize_images/): Resize images - [`lazyload_images`](https://modpagespeed.com/docs/filters/lazyload_images/): Lazy-load images - [`prioritize_critical_images`](https://modpagespeed.com/docs/filters/prioritize_critical_images/): Prioritize critical images - [`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 [responsive_images entry on Image filters](https://modpagespeed.com/docs/image-filters/#responsive_images). Every filter in one table: [PageSpeed filters](https://modpagespeed.com/docs/filters/).