Responsive images
ImagesServes a srcset so each device downloads an image sized for its screen.
Filter
responsive_images,responsive_images_zoom,rewrite_images,inline_images,resize_images,insert_image_dimensions
· Filter docs
A mod_pagespeed 1.1 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.
Both frames render identically — that's the goal. The win is in the bytes and requests
below, not the look. They're served live by mod_pagespeed 1.1 on
demo-httpd-1.1.modpagespeed.com; the optimized frame
applies only this filter. Right after a cache purge it may briefly match the original while
the worker rewrites it — reload to see the result.
Measured impact
This filter changes how the page is structured or delivered, not its size — so there's no byte or request reduction to chart. The change shows in the source diff below.
What changed in the source
The page's HTML, before and after this filter. Red lines are removed, green lines are added.
… 4 unchanged lines …
<body>
<p>An 1023x766 image displayed in a 256x192 thumbnail. PageSpeed
will resize it and also serve with a srcset for other sizes.</p>
- <img src="images/Puzzle.jpg" width="256" height="192"/><br/>
+ <img src="images/256x192xPuzzle.jpg.pagespeed.ic.DtRDtXfOsk.jpg" width="256" height="192" srcset="images/384x288xPuzzle.jpg.pagespeed.ic.Rz49rPSCYp.jpg 1.5x,images/512x384xPuzzle.jpg.pagespeed.ic.W34hnj2wwA.jpg 2x,images/768x576xPuzzle.jpg.pagespeed.ic.wpb3cHLM09.jpg 3x,images/xPuzzle.jpg.pagespeed.ic.YsUBdV-i_6.jpg 3.996x"/><br/>
<p>An 1023x766 image displayed at full size. PageSpeed may recompress it,
but will not add a srcset.</p>
- <img src="images/Puzzle.jpg" width="1023" height="766"/><br/>
+ <img src="images/xPuzzle.jpg.pagespeed.ic.YsUBdV-i_6.jpg" width="1023" height="766"/><br/>
<p>An 1023x766 image displayed at 682x511 (2/3 scale). PageSpeed will
resize it and also serve a 1.5x version in srcset (but not 2x since
that would be redundant).</p>
- <img src="images/Puzzle.jpg" width="682" height="511"/><br/>
+ <img src="images/682x511xPuzzle.jpg.pagespeed.ic.dhNj4L_e-Q.jpg" width="682" height="511" srcset="images/xPuzzle.jpg.pagespeed.ic.YsUBdV-i_6.jpg 1.5x"/><br/>
<p>A small image. PageSpeed will inline it and not set a srcset.</p>
- <img src="images/Cuppa.png" width="10" height="10"/><br/>
+ <img src="images/10x10xCuppa.png.pagespeed.ic.BFzBcDIOfZ.png" width="10" height="10" srcset="images/15x15xCuppa.png.pagespeed.ic.SA9Uuz31bD.png 1.5x,images/20x20xCuppa.png.pagespeed.ic.Pp-WwRSGDS.png 2x,images/30x30xCuppa.png.pagespeed.ic.ngOS148PKn.png 3x,images/xCuppa.png.pagespeed.ic.jf3PtqQ39N.png 6.5x"/><br/>
<p>A medium size image with no listed width nor height. PageSpeed
will losslessly re-encode it, but not resize it nor add a srcset
for other sizes.</p>
- <img src="images/BikeCrashIcn.png"/><br/>
+ <img src="images/xBikeCrashIcn.png.pagespeed.ic.-f3rxqdUg6.jpg" width="100" height="100"/><br/>
<p>An image with data-pagespeed-no-transform. PageSpeed will not
transform this file.</p>
- <img src="images/disclosure_open_plus.png" width="11" height="13"
- data-pagespeed-no-transform/><br/>
- </body>
+ <img src="images/disclosure_open_plus.png" width="11" height="13"/><br/>
+ <script src="/pagespeed_static/responsive.ZqAADX1zHQ.js"></script></body>
</html>