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

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"