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

Convert JPEG to AVIF

Images New in 1.15

Re-encodes photographic JPEGs as AVIF for browsers that accept it.

Filter convert_jpeg_to_avif,rewrite_images · 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.

Measured impact

Total bytes

240.9 KB 10.2 KB
−96%

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.TRU8DN7ruG.avif" 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,
                    

                      +     <img src="images/xCuppa.png.pagespeed.ic.FlgX5ioeLe.webp" title="A small image.  PageSpeed will inline it."/><br/>
                    

                      +     <img src="images/xBikeCrashIcn.png.pagespeed.ic.5bikBrM1SW.avif" 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/>
                    

                      +                 transform this file."/><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