WebP images

Author: philwareham

src/assets/img/dark-index-plugins-machine-screen.webp

@@ -77,9 +77,11 @@
             <div class="container">
                 <p>
                     <picture>
-                        <source srcset="/assets/img/dark-index-plugins-machine-screen.png, /assets/img/dark-index-plugins-machine-screen@2x.png 2x" media="(prefers-color-scheme: dark) and (min-width: 30rem)">
-                        <source srcset="/assets/img/index-plugins-machine-screen.png, /assets/img/index-plugins-machine-screen@2x.png 2x" media="(min-width: 30rem)">
-                        <source srcset="../assets/img/com/dark-index-plugins-machine.png" media="(prefers-color-scheme: dark)">
+                        <source srcset="/assets/img/dark-index-plugins-machine-screen.webp, /assets/img/dark-index-plugins-machine-screen@2x.webp 2x" type="image/webp" media="(prefers-color-scheme: dark) and (min-width: 30rem)">
+                        <source srcset="/assets/img/index-plugins-machine-screen.webp, /assets/img/index-plugins-machine-screen@2x.webp 2x" type="image/webp" media="(min-width: 30rem)">
+                        <source srcset="/assets/img/dark-index-plugins-machine-screen.png, /assets/img/dark-index-plugins-machine-screen@2x.png 2x" type="image/png" media="(prefers-color-scheme: dark) and (min-width: 30rem)">
+                        <source srcset="/assets/img/index-plugins-machine-screen.png, /assets/img/index-plugins-machine-screen@2x.png 2x" type="image/png" media="(min-width: 30rem)">
+                        <source srcset="/assets/img/dark-index-plugins-machine.png" type="image/png" media="(prefers-color-scheme: dark)">
                         <img loading="lazy" decoding="async" alt="Textpattern Plugin Machine" src="/assets/img/index-plugins-machine.png">
                     </picture>
                 </p>