Skip to main content
mod_pagespeed 2.1 is here — open source (Apache-2.0): the module you know, plus the optimizer worker

Inline preview images

Images

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

Filter inline_preview_images,insert_image_dimensions · Filter docs

A module filter.

Original Open in new tab
Optimized Open in new tab

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 the mod_pagespeed module 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. This filter is beacon-driven: mod_pagespeed instruments the page, a real browser reports back, then it serves the optimized form and re-measures every few minutes — so the optimized frame can take a reload, or briefly revert to the original, before it reflects the change.

Measured impact

Total bytes

60.0 KB 42.1 KB
−30%

What changed in the source

The page's HTML, before and after this filter. Red lines are removed, green lines are added. 

                
                  

                      … 5 unchanged lines …
                    

                            <br/>
                    

                            <p>A 1023x766 image.  PageSpeed will serve an inlined, low-quality
                    

                               image until the original is loaded.</p>
                    

                      -     <img src="images/Puzzle.jpg"/><br/>
                    

                      +     <img src="images/Puzzle.jpg" width="1023" height="766"/><br/>
                    

                            <p>An image with srcset.</p>
                    

                      -     <img src="images/Puzzle2.jpg" srcset="images/Puzzle.jpg 2x"/><br/>
                    

                      +     <img src="images/Puzzle2.jpg" srcset="images/Puzzle.jpg 2x" width="512" height="384"/><br/>
                    

                          </body>
                    

                        </html>

Run this on your own site

This is one of 49 filters the mod_pagespeed module applies in place — self-hosted on Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an the optimized response headers shown above. Open source under the Apache License 2.0 — free in development and in production.

Download & run
← All optimization examples