Optimize images

Images

Recompresses images, resizes them to their display size, and inlines small ones.

Filter 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

Total bytes

264.3 KB 16.6 KB

−94%

What changed in the source

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


                
                  
                      … 2 unchanged lines …
                    

                            <title>rewrite_images example</title>
                    

                          </head>
                    

                          <body>
                    

                      -     <img src="images/Puzzle.jpg" width="256" height="192"
                    

                      -          title="An 1023x766 image displayed in a 256x192 thumbnail. PageSpeed
                    

                      +     <img src="images/256x192xPuzzle.jpg.pagespeed.ic.DtRDtXfOsk.jpg" width="256" height="192" title="An 1023x766 image displayed in a 256x192 thumbnail. PageSpeed
                    

                                        will resize it so it is served in fewer bytes."/><br/>
                    

                      -     <img src="images/Cuppa.png"
                    

                      -          title="A small image.  PageSpeed will inline it."/><br/>
                    

                      -     <img src="images/BikeCrashIcn.png"
                    

                      -          title="A medium size image, PageSpeed will losslessly re-encode it,
                    

                      -                 so it can be served in fewer bytes."/><br/>
                    

                      -     <img src="images/disclosure_open_plus.png"
                    

                      -          title="A small image with data-pagespeed-no-transform.  PageSpeed will not
                    

                      -                 transform this file."
                    

                      -          data-pagespeed-no-transform/><br/>
                    

                      +     <img src="images/xCuppa.png.pagespeed.ic.jf3PtqQ39N.png" title="A small image.  PageSpeed will inline it." width="65" height="70"/><br/>
                    

                      +     <img src="images/xBikeCrashIcn.png.pagespeed.ic.-f3rxqdUg6.jpg" title="A medium size image, PageSpeed will losslessly re-encode it,
                    

                      +                 so it can be served in fewer bytes." width="100" height="100"/><br/>
                    

                      +     <img src="images/disclosure_open_plus.png" title="A small image with data-pagespeed-no-transform.  PageSpeed will not
                    

                      +                 transform this file."/><br/>
                    

                          </body>
                    

                        </html>

← All optimization examples