Modern image formats here, with fallback

Author: philwareham

src/mockups/index.html

@@ -232,7 +232,12 @@ <h6>Advertisements</h6>
 
                         <div class="ads">
                             <a rel="external" href="https://www.digitalocean.com/?utm_source=opensource&amp;utm_campaign=textpattern" itemprop="url">
-                                <img width="300" height="250" itemprop="image" alt="DigitalOcean" src="../assets/img/com/digitalocean-300x250.png" srcset="../assets/img/com/digitalocean-300x250@2x.png 2x">
+                                <picture>
+                                    <source srcset="../assets/img/com/digitalocean-300x250.avif, ../assets/img/com/digitalocean-300x250@2x.avif 2x" type="image/avif" />
+                                    <source srcset="../assets/img/com/digitalocean-300x250.webp, ../assets/img/com/digitalocean-300x250@2x.webp 2x" type="image/webp" />
+                                    <source srcset="../assets/img/com/digitalocean-300x250.png, ../assets/img/com/digitalocean-300x250@2x.png 2x" type="image/png" />
+                                    <img width="300" height="250" itemprop="image" alt="DigitalOcean" src="digitalocean-300x250.png">
+                                </picture>
                             </a>
                         </div>