Zola auto-webp image with lightweight preview

image.html

{% if src %}
  {%- if src is matching("[.](jpg|jpeg|png|webp)$") -%}
  
    {# The trick is to resize first, which provides the original size for the 1:1 size format conversion #}
    {% set converted_small = resize_image(path=src, width=800, op="fit_width", format="webp") %}
    {% set converted_full = resize_image(path=src, width=converted_small.orig_width, height=converted_small.orig_height, format="webp") %}  
    
    {% set url_full = converted_full.url %}
    {% set url_small = converted_small.url %}

  {%- else %}
    {# Conversion unsupported, just use the source #}
    
    {% if src is not starting_with("http") %}
      {# ... then prepend the site's base URL to the image's URL. #}
      {% set url_full = config.base_url ~ src %}
    {% endif %}
    
    {% set url_small = url_full %}
  {%- endif %}

  <div class="post-img">
  <a href="{{ url_full }}" target="_blank">
  
  <img src="{{ url_small | safe }}"
  {% if alt %} alt="{{ alt }}"{% endif %} 
  {%- if style %} style="{{ style | safe }}" {%- endif %} 
  decoding="async" loading="lazy"/>

  </a>
  </div>
{% endif %}

main.scss

.post-img {
  display: block;
  text-align: center;

  a {
    img {
      max-width: 100%;

      width: 100%;
      @media screen and (min-width: 768px) {
        width: 75%;
      }

      border-radius: 1em;
    }
  }
}

https://www.getzola.org/documentation/content/shortcodes/