Replace image tags with picture tags

- Uses Wagtail 5.2 picture tags https://docs.wagtail.org/en/latest/releases/5.2.html#responsive-multi-format-images-with-the-picture-tag
- Each image now has three renditions for avif, webp and jpeg formats
- Some images now have two sizes on top of this (6 renditions in total) for different screen sizes

bakerydemo/settings/base.py

@@ -202,6 +202,8 @@ WAGTAIL_CONTENT_LANGUAGES = LANGUAGES = [
     ("ar", "العربيّة"),
 ]
 
+WAGTAILIMAGES_AVIF_QUALITY = 60
+
 ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "changeme")
 
 # Content Security policy settings

bakerydemo/templates/base/home_page.html

@@ -5,7 +5,7 @@
     <div class="homepage">
 
         <div class="container-fluid hero">
-            {% image page.image fill-1920x600 class="hero-image" alt="" %}
+            {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x900} sizes="100vw" class="hero-image" alt="" %}
             <div class="hero-gradient-mask"></div>
             <div class="container">
                 <div class="row">
@@ -55,7 +55,7 @@
                         </div>
                     {% endif %}
                     {% if page.promo_image %}
-                        <figure>{% image page.promo_image fill-590x413-c100 %}</figure>
+                        <figure>{% picture page.promo_image format-{avif,webp,jpeg} fill-590x413-c100 %}</figure>
                     {% endif %}
                 </div>
             </div>

bakerydemo/templates/base/include/header-blog.html

@@ -2,7 +2,7 @@
 
 {% if page.image %}
     <div class="container-fluid hero hero--blog">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x600} sizes="100vw" class="hero-image" alt="" %}
     </div>
 {% endif %}
 <div class="container">

bakerydemo/templates/base/include/header-hero.html

@@ -2,7 +2,7 @@
 
 {% if page.image %}
     <div class="container-fluid hero">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x600} sizes="100vw" class="hero-image" alt="" %}
         <div class="hero__container">
             <h1 class="hero__title">{{ page.title }}</h1>
         </div>

bakerydemo/templates/base/preview/person.html

@@ -9,7 +9,7 @@
 
 {% block content %}
     <div>
-        {% image object.image fill-200x200-c100 class="blog__avatar" %}
+        {% picture object.image format-{avif,webp,jpeg} fill-200x200-c100 class="blog__avatar" %}
         <h2>{{ object.first_name }} {{ object.last_name }}</h2>
         <p>{{ object.job_title }}</p>
     </div>

bakerydemo/templates/blocks/image_block.html

@@ -1,6 +1,6 @@
 {% load wagtailimages_tags %}
 
 <figure>
-    {% image self.image fill-600x338 loading="lazy" %}
+    {% picture self.image format-{avif,webp,jpeg} fill-{400x220,600x338} sizes="(max-width: 768px) 200px, 900px" loading="lazy" %}
     <figcaption>{{ self.caption }} - {{ self.attribution }}</figcaption>
 </figure>

bakerydemo/templates/blog/blog_page.html

@@ -12,7 +12,7 @@
                     {% if page.authors %}
                         <div class="blog__avatars">
                             {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                                <div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 class="blog__avatar" %}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>

bakerydemo/templates/includes/card/blog-listing-card.html

@@ -4,7 +4,7 @@
     <a class="blog-listing-card__link" href="{% pageurl blog %}">
         {% if blog.image %}
             <figure class="blog-listing-card__image">
-                {% image blog.image fill-322x247-c100 loading="lazy" %}
+                {% picture blog.image format-{avif,webp,jpeg} fill-322x247-c100 loading="lazy" %}
             </figure>
         {% endif %}
         <div class="blog-listing-card__contents">

bakerydemo/templates/includes/card/listing-card.html

@@ -4,7 +4,7 @@
     <a class="listing-card__link" href="{{ page.url }}">
         {% if page.image %}
             <figure class="listing-card__image">
-                {% image page.image fill-180x180-c100 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
             </figure>
         {% endif %}
         <div class="listing-card__contents">

bakerydemo/templates/includes/card/location-card.html

@@ -3,7 +3,7 @@
 <div class="location-card col-sm-4">
     <a class="location-card__link" href="{{page.url}}">
         <figure class="location-card__image">
-            {% image page.image fill-430x320-c100 loading="lazy" %}
+            {% picture page.image format-{avif,webp,jpeg} fill-{300x320-c100,430x320-c100} sizes="(max-width: 768px) 150px, 400px" loading="lazy" %}
         </figure>
         <div class="location-card__contents">
             <h3 class="location-card__title">{{page.title}}</h3>

bakerydemo/templates/includes/card/picture-card.html

@@ -4,9 +4,9 @@
     <a class="picture-card__link" href="{{ page.url }}">
         <figure class="picture-card__image">
             {% if portrait %}
-                {% image page.image fill-433x487-c100 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-{250x320-c100,433x487-c100} sizes="(max-width: 768px)125px,400px" loading="lazy" %}
             {% else %}
-                {% image page.image fill-645x480-c75 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width: 768px)150px,30vw" loading="lazy" %}
             {% endif %}
             <div class="picture-card__contents">
                 <h3 class="picture-card__title">{{ page.title }}</h3>

bakerydemo/templates/recipes/recipe_page.html

@@ -12,7 +12,7 @@
                     {% if page.authors %}
                         <div class="blog__avatars">
                             {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                                <div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 class="blog__avatar" %}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>

bakerydemo/templates/search/search_results.html

@@ -20,7 +20,7 @@
                                 <a class="listing-card__link" href="{% pageurl result.specific %}">
                                     {% if result.specific.image %}
                                         <figure class="listing-card__image">
-                                            {% image result.specific.image fill-180x180-c100 loading="lazy" %}
+                                            {% picture result.specific.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
                                         </figure>
                                     {% endif %}
                                     <div class="listing-card__contents">
@@ -75,6 +75,7 @@
                                     {% else %}
                                         <a class="listing-card__link" href="{{ search_promotion.external_link_url }}">
                                             <figure class="listing-card__image">
+                                                {% picture search_promotion.page.specific.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
                                             </figure>
                                             <div class="listing-card__contents">
                                                 <h3 class="listing-card__title">{{ search_promotion.external_link_text }}</h3>

bakerydemo/templates/tags/gallery.html

@@ -3,7 +3,7 @@
 {% for img in images %}
     <div class="picture-card">
         <figure class="picture-card__image">
-            {% image img fill-645x480-c100 loading="lazy" %}
+            {% picture img format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width: 768px)150px,30vw" loading="lazy" %}
             <div class="picture-card__contents">
                 <p class="picture-card__title">{{ img.title }}</p>
             </div>