Merge pull request #96 from springload/chore/image-format-improvements

Image format improvements

Author: liamjohnston

cdhweb/pages/templates/cdhpages/blocks/feature_block.html

@@ -9,9 +9,9 @@ <h2>{{ self.heading }}</h2>
       {% endif %}
     </div>
 
-    {% image self.image width-750 format-webp as img_base %}
-    {% image self.image width-1200 format-webp as img_sm %}
-    {% image self.image width-1400 format-webp as img_md %}
+    {% image self.image width-750 as img_base %}
+    {% image self.image width-1200 as img_sm %}
+    {% image self.image width-1400 as img_md %}
 
     <picture class="feature__img">
       <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">

cdhweb/pages/templates/cdhpages/blocks/image_block.html

@@ -1,20 +1,20 @@
 {% load wagtailcore_tags wagtailimages_tags l10n %}
 
 {% if self.size == 'small' %}
-    {% image self.image width-500 format-webp as img_base %}
-    {% image self.image width-700 format-webp as img_sm %}
-    {% image self.image width-750 format-webp as img_md %}
-    {% image self.image width-1000 format-webp as img_xl %}
+    {% image self.image width-500 as img_base %}
+    {% image self.image width-700 as img_sm %}
+    {% image self.image width-750 as img_md %}
+    {% image self.image width-1000 as img_xl %}
 {% elif self.size == 'medium' %}
-    {% image self.image width-750 format-webp as img_base %}
-    {% image self.image width-1200 format-webp as img_md %}
-    {% image self.image width-1700 format-webp as img_xxl %}
+    {% image self.image width-750 as img_base %}
+    {% image self.image width-1200 as img_md %}
+    {% image self.image width-1700 as img_xxl %}
 {% else %}
-    {% image self.image width-1000 format-webp as img_base %}
-    {% image self.image width-1500 format-webp as img_sm %}
-    {% image self.image width-1700 format-webp as img_md %}
-    {% image self.image width-2000 format-webp as img_xl %}
-    {% image self.image width-2300 format-webp as img_xxxl %}
+    {% image self.image width-1000 as img_base %}
+    {% image self.image width-1500 as img_sm %}
+    {% image self.image width-1700 as img_md %}
+    {% image self.image width-2000 as img_xl %}
+    {% image self.image width-2300 as img_xxxl %}
 {% endif %}
 
 <figure class="sk-image sk-image--{{ self.size }}">    

cdhweb/settings/components/base.py

@@ -315,6 +315,16 @@
     {"class": "cdhweb.pages.embed_finders.GlitchHubEmbedFinder"},
 ]
 
+WAGTAILIMAGES_WEBP_QUALITY = 80
+
+WAGTAILIMAGES_FORMAT_CONVERSIONS = {
+    "avif": "avif",
+    "gif": "gif",
+    "bmp": "webp",
+    "jpeg": "webp",
+    "png": "webp",
+    "webp": "webp",
+}
 
 # List of allowed tags in the rich text editor (tinyMCE). We need to add the
 # HTML5 <figcaption>, as it's not included by default.

templates/cdhpages/blocks/tile.html

@@ -72,18 +72,18 @@
         <div class="tile__img-wrapper">
             {% if tile_type == 'internal_page_tile' %}
                 {% if internal_page.specific.feed_image %}
-                    {% image internal_page.specific.feed_image fill-900x493 format-webp as image %}
+                    {% image internal_page.specific.feed_image fill-900x493 as image %}
                     <img src="{{ image.url }}" alt="{{ image.alt }}" />
                 {% elif internal_page.specific.hero_image %}
-                    {% image internal_page.specific.hero_image fill-900x493 format-webp as image %}
+                    {% image internal_page.specific.hero_image fill-900x493 as image %}
                     <img src="{{ image.url }}" alt="{{ image.alt }}" />
                 {% elif internal_page.specific.image %}
-                    {% image internal_page.specific.image fill-900x493 format-webp as image %}
+                    {% image internal_page.specific.image fill-900x493 as image %}
                     <img src="{{ image.url }}" alt="{{ image.alt }}" />
                 {% endif %}
             {% else %}
                 {% if tile.value.image %}
-                    {% image tile.value.image fill-900x493 format-webp as image %}
+                    {% image tile.value.image fill-900x493 as image %}
                     <img src="{{ image.url }}" alt="{{ image.alt }}" />
                 {% endif %}
             {% endif %}

templates/includes/event_hero.html

@@ -65,9 +65,9 @@ <h2 class="sr-only">Speakers</h2>
                 of via inline style.
             {% endcomment %}
 
-            {% image self.image fill-1000x563 format-webp as img_base %}
-            {% image self.image fill-1250x703 format-webp as img_sm %}
-            {% image self.image fill-1650x928 format-webp as img_xl %}
+            {% image self.image fill-1000x563 as img_base %}
+            {% image self.image fill-1250x703 as img_sm %}
+            {% image self.image fill-1650x928 as img_xl %}
 
             <picture>
                 <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">

templates/includes/person_hero.html

@@ -55,9 +55,9 @@ <h1>{{ self.title}}</h1>
             If changing this by image rendition, update aspect-ratio in the CSS instead
             of via inline style.
         {% endcomment %}
-        {% image page.image fill-1000x750 format-webp as img_base %}
-        {% image page.image fill-1250x938 format-webp as img_sm %}
-        {% image page.image fill-1650x1238 format-webp as img_xl %}
+        {% image page.image fill-1000x750 as img_base %}
+        {% image page.image fill-1250x938 as img_sm %}
+        {% image page.image fill-1650x1238 as img_xl %}
 
         <picture class="person-hero__img">
             <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">

templates/includes/project_hero.html

@@ -34,9 +34,9 @@ <h1>{{ self.title}}</h1>
             of via inline style.
         {% endcomment %}
 
-        {% image self.hero_image fill-1000x563 format-webp as img_base %}
-        {% image self.hero_image fill-1250x703 format-webp as img_sm %}
-        {% image self.hero_image fill-1650x928 format-webp as img_xl %}
+        {% image self.hero_image fill-1000x563 as img_base %}
+        {% image self.hero_image fill-1250x703 as img_sm %}
+        {% image self.hero_image fill-1650x928 as img_xl %}
 
         <picture class="project-hero__img">
             <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">

templates/includes/standard_hero.html

@@ -16,9 +16,9 @@ <h1 class="standard-hero__title">{{ self.title}}</h1>
             of via inline style.
         {% endcomment %}
 
-        {% image self.hero_image fill-1000x563 format-webp as img_base %}
-        {% image self.hero_image fill-1250x703 format-webp as img_sm %}
-        {% image self.hero_image fill-1650x928 format-webp as img_xl %}
+        {% image self.hero_image fill-1000x563 as img_base %}
+        {% image self.hero_image fill-1250x703 as img_sm %}
+        {% image self.hero_image fill-1650x928 as img_xl %}
 
         <picture class="standard-hero__img">
             <source srcset="{{ img_sm.url }}" media="(min-width: 500px)">