1 files changed, 46 insertions, 0 deletions
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
new file mode 100644
index 0000000..8b1a006
--- /dev/null
+++ b/templates/shortcodes/image.html
@@ -0,0 +1,46 @@
+{# /templates/shortcodes/image.html (Version 7 - The Final Quality Fix) #}
+
+{# --- Manually check for required 'src' and 'alt' parameters --- #}
+{% if not src %}
+    {{ throw(message="The 'src' parameter is required for the image shortcode.") }}
+{% endif %}
+{% if not alt %}
+    {{ throw(message="The 'alt' parameter is required for the image shortcode.") }}
+{% endif %}
+
+{# --- Get optional parameters, with sensible defaults --- #}
+{% set lazy = lazy | default(value=true) %}
+{% set fetch = fetch | default(value="auto") %}
+{% set quality = quality | default(value=60) %} {# <-- New: Set a default quality #}
+
+{# --- Let Zola process the image into ALL necessary formats and sizes --- #}
+{% set image_meta = get_image_metadata(path=src) %}
+
+{# Create small versions (PNG and WebP) with higher compression #}
+{% set image_small_png = resize_image(path=src, width=383, op="fit_width", quality=quality) %}
+{% set image_small_webp = resize_image(path=src, width=383, op="fit_width", format="webp", quality=quality) %}
+
+{# Create large versions (PNG and WebP) with higher compression #}
+{% set image_large_png = resize_image(path=src, width=682, op="fit_width", quality=quality) %}
+{% set image_large_webp = resize_image(path=src, width=682, op="fit_width", format="webp", quality=quality) %}
+
+<picture>
+    {# --- MODERN FORMATS FIRST (WebP) --- #}
+    <source media="(max-width: 600px)" srcset="{{ image_small_webp.url }}" type="image/webp">
+    <source media="(min-width: 601px)" srcset="{{ image_large_webp.url }}" type="image/webp">
+
+    {# --- FALLBACK FORMATS (PNG) --- #}
+    <source media="(max-width: 600px)" srcset="{{ image_small_png.url }}">
+    <source media="(min-width: 601px)" srcset="{{ image_large_png.url }}">
+
+    {# --- FINAL FALLBACK <img> --- #}
+    <img
+        src="{{ image_large_png.url }}"
+        width="{{ image_meta.width }}"
+        height="{{ image_meta.height }}"
+        alt="{{ alt }}"
+        {% if lazy %}loading="lazy"{% else %}loading="eager"{% endif %}
+        fetchpriority="{{ fetch }}"
+        style="width: 100%; height: auto; border-radius: 4px; margin: 1.5rem 0;"
+    >
+</picture>