Produce and use webp pictures with different sizes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2020-12-11 15:27:04 +01:00
parent c8987df7af
commit 6a52ca0d91
15 changed files with 267 additions and 17 deletions
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -1,6 +1,22 @@
 <template>
  <footer class="footer" ref="footer">
-    <img :src="`/img/pics/footer_${random}.jpg`" alt="" />
+    <picture>
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
+        type="image/webp"
+      />
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.jpg 1x, /img/pics/footer_${random}-1920w.jpg 2x`"
+        type="image/jpeg"
+      />
+      <img
+        :src="`/img/pics/footer_${random}-1024w.jpg`"
+        alt=""
+        width="5234"
+        height="2189"
+        loading="lazy"
+      />
+    </picture>
    <ul>
      <li>
        <b-select