Convert all jpg pictures to webp

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/scripts/build/pictures.sh

@@ -30,11 +30,6 @@ convert_image () {
     convert -geometry "$resolution"x $file $output
 }
 
-produce_webp () {
-    name=$(file_name)
-    output="$output_dir/$name.webp"
-    cwebp $file -quiet -o $output
-}
 
 progress() {
     local w=80 p=$1;  shift
@@ -68,23 +63,3 @@ do
     fi
 done
 echo -e "\nDone!"
-
-echo "Generating optimized versions of the pictures…"
-
-if ! command -v cwebp &> /dev/null
-then
-    echo "$(tput setaf 1)ERROR: The cwebp command could not be found. You need to install webp.$(tput sgr 0)"
-    exit 1
-fi
-
-nb_files=$( shopt -s nullglob ; set -- $output_dir/* ; echo $#)
-i=1
-for file in $output_dir/*
-do
-    if [[ -f $file ]]; then
-        produce_webp
-        progress $(($i*100/$nb_files)) still working...
-        i=$((i+1))
-    fi
-done
-echo -e "\nDone!"

js/src/components/Categories/CategoryCard.vue

@@ -15,17 +15,17 @@
       class="brightness-50"
     >
       <source
-        :srcset="`/img/categories/${category.key.toLowerCase()}.jpg 2x, /img/categories/${category.key.toLowerCase()}.jpg`"
+        :srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}.webp`"
         media="(min-width: 1000px)"
       />
       <source
-        :srcset="`/img/categories/${category.key.toLowerCase()}.jpg 2x, /img/categories/${category.key.toLowerCase()}-small.jpg`"
+        :srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}-small.webp`"
         media="(min-width: 300px)"
       />
       <img
         class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
-        :src="`/img/categories/${category.key.toLowerCase()}.jpg`"
-        :srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
+        :src="`/img/categories/${category.key.toLowerCase()}.webp`"
+        :srcset="`/img/categories/${category.key.toLowerCase()}-small.webp `"
         width="384"
         height="384"
         alt=""

js/src/components/ErrorComponent.vue

@@ -8,13 +8,8 @@
               :srcset="`/img/pics/error-480w.webp  1x, /img/pics/error-1024w.webp 2x`"
               type="image/webp"
             />
-            <source
-              :srcset="`/img/pics/error-480w.jpg 1x, /img/pics/error-1024w.jpg 2x`"
-              type="image/jpeg"
-            />
-
             <img
-              :src="`/img/pics/error-480w.jpg`"
+              :src="`/img/pics/error-480w.webp`"
               alt=""
               width="480"
               height="312"