AVIF and WebP ad image

Author: philwareham

src/mockups/index.html

@@ -236,14 +236,14 @@ <h6>Advertisements</h6>
                                     <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">
+                                    <img loading="lazy" width="300" height="250" itemprop="image" alt="DigitalOcean" src="../assets/img/com/digitalocean-300x250.png">
                                 </picture>
                             </a>
                         </div>
 
                         <div class="ads">
                             <a href="https://textpattern.com/contact" itemprop="url" title="Want to advertise here? Please contact us to discuss.">
-                                <img class="prefers-color-scheme" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png" data-src-light="/assets/img/com/ad-300x250-placeholder.png" data-src-dark="/assets/img/com/dark-ad-300x250-placeholder.png" srcset="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-light="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-dark="/assets/img/com/dark-ad-300x250-placeholder@2x.png 2x">
+                                <img loading="lazy" class="prefers-color-scheme" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png" data-src-light="/assets/img/com/ad-300x250-placeholder.png" data-src-dark="/assets/img/com/dark-ad-300x250-placeholder.png" srcset="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-light="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-dark="/assets/img/com/dark-ad-300x250-placeholder@2x.png 2x">
                             </a>
                         </div>
 

src/templates/pages/default.txp

@@ -193,7 +193,12 @@ echo '<a class="count-bubble" rel="external" href="https://github.com/textpatter
                     <h6>Advertisements</h6>
                     <div class="ads">
                         <a rel="external" href="https://www.digitalocean.com/?utm_source=opensource&amp;utm_campaign=textpattern" itemprop="url">
-                            <img loading="lazy" 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 loading="lazy" width="300" height="250" itemprop="image" alt="DigitalOcean" src="/assets/img/com/digitalocean-300x250.png">
+                            </picture>
                         </a>
                     </div>
                     <div class="ads">