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.

filter · Image filters

Responsive images (responsive_images)

Q: 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.

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

responsive_images adds a srcset to <img> 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.

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 <img>; 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 <img> tags to calculate variant dimensions.
Verify with the X-Mod-Pagespeed response header and a ?PageSpeedFilters=-responsive_images comparison; Is it working? has the steps.

Configuration

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

Apache

ModPagespeedEnableFilters responsive_images

nginx

pagespeed EnableFilters responsive_images;

IIS (pagespeed.config)

pagespeed EnableFilters responsive_images

<!-- before -->
<img src="/photos/team.jpg" width="400" height="300" />

<!-- after: the source file is 1600x1200, so the full-size candidate is 4x -->
<img
  src="/photos/400x300xteam.jpg.pagespeed.ic.HASH.jpg"
  width="400"
  height="300"
  srcset="/photos/600x450xteam.jpg.pagespeed.ic.HASH.jpg 1.5x,/photos/800x600xteam.jpg.pagespeed.ic.HASH.jpg 2x,/photos/1200x900xteam.jpg.pagespeed.ic.HASH.jpg 3x,/photos/xteam.jpg.pagespeed.ic.HASH.jpg 4x"
/>

To control which pixel densities are generated (default 1.5,2,3), use ResponsiveImageDensities with a comma-separated list of numbers:

ModPagespeedResponsiveImageDensities 1.5,2,3

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 transform. Always-on baseline under pagespeed on;; there is no per-transform off switch.

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

Live example

Serves a srcset so each device downloads an image sized for its screen.

This filter changes how the page is structured or delivered, not its size, so the example shows a source diff rather than a byte or request reduction.

See the before and after, with the source diff →

Frequently asked questions

What does the responsive_images filter do?: responsive_images adds a srcset to <img> 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.

resize_images — Resize images
lazyload_images — Lazy-load images
prioritize_critical_images — Prioritize critical images
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 responsive_images entry on Image filters. Every filter in one table: PageSpeed filters.