ADD resize to images script, CHANGE quality in images script, FIX image template to always use the optimize images if possible

assets/build/images.sh

@@ -1,6 +1,8 @@
 #!/bin/bash
 
-PARAMS=('-quality 90')
+# Libary needed: ImageMagick
+
+PARAMS=('-quality 60')
 
 if [ $# -ne 0 ]; then
 	PARAMS=$@;
@@ -12,9 +14,18 @@ shopt -s nullglob nocaseglob extglob
 shopt -s globstar
 
 # Resize
+sizes=(320 640 960 1280)
+for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
+    DIR=$(dirname "$FILE")
+    NAME=$(basename "$FILE" | cut -d. -f1)
+    EXTENSION=$(basename "$FILE" | cut -d. -f2)
+    for size in ${sizes[@]}; do
+        convert "$FILE" -resize ${size}x${size}\> "${DIR}/${NAME}-${size}.${EXTENSION}" 
+    done
+done
 
 # Web Optimized Formats
-for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png); do 
+for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do 
     convert $PARAMS "$FILE" "${FILE}".webp;
     convert $PARAMS "$FILE" "${FILE}".avif;
 done

layouts/partials/components/image.html

@@ -4,18 +4,32 @@ url: string
 alt: string
 -->
 {{ $avatar := "avatar"}}
+{{ $sizes := slice "320" "640" "960" "1280" }}
+{{ $ext := path.Ext .url }}
+{{ $name := path.Base (replace .url $ext "") }}
+{{ $dir := path.Dir .url }}
 
 <picture>
   <source 
     type="image/avif"
-    src="{{ .url }}.avif"
+    srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
+      {{ end }}
+      {{ .url }}.avif
+    "
   />
   <source 
     type="image/webp"
-    src="{{ .url }}.webp"
+    srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
+      {{ end }}
+      {{ .url }}.webp
+    "
   />
   <img 
-    class="{{if eq .type $avatar}} avatar {{end}}" 
+    class="{{if eq .type $avatar}}avatar{{end}}" 
     alt="{{ .alt }}" 
     src="{{ .url }}"
     loading="lazy"