Start using webp format

scipost_django/scipost/templates/scipost/_hx_participates_in.html

@@ -5,10 +5,32 @@
     <h2 class="my-2">SciPost participates in</h2>
   </div>
   <div class="card-body logos">
-    <a href="https://www.crossref.org" target="_blank" rel="noopener"><img src="https://assets.crossref.org/logo/crossref-logo-200.svg" width="100" alt="Crossref logo"></a>
-    <a href="https://www.doaj.org" target="_blank" rel="noopener"><img src="{% static 'scipost/images/doaj_logo_200.jpg' %}" width="90" alt="DOAJ logo"></a>
-    <a href="https://www.clockss.org" target="_blank" rel="noopener"><img src="{% static 'scipost/images/clockss_original_logo_boxed_ai-cropped-90.png' %}" width="80" alt="Clockss logo"></a>
-    <a href="https://i4oc.org/" target="_blank" rel="noopener"><img width="100" src="{% static 'scipost/images/I4OC.png' %}" alt="I4OC logo"></a>
-    <a href="https://freejournals.org" target="_blank" rel="noopener"><img width="100" src="{% static 'scipost/images/FJN-logo-long.png' %}" alt="FJN logo"></a>
+    <a href="https://www.crossref.org" target="_blank" rel="noopener">
+      <img src="https://assets.crossref.org/logo/crossref-logo-200.svg" width="100" alt="Crossref logo">
+    </a>
+    <a href="https://www.doaj.org" target="_blank" rel="noopener">
+      <picture>
+	<source type="image/webp" srcset="{% static 'scipost/images/doaj_logo_200.webp' %} 90w">
+	<img src="{% static 'scipost/images/doaj_logo_200.jpg' %}" width="90" alt="DOAJ logo">
+      </picture>
+    </a>
+    <a href="https://www.clockss.org" target="_blank" rel="noopener">
+      <picture>
+	<source type="image/webp" srcset="{% static 'scipost/images/clockss_original_logo_boxed_ai-cropped-90.webp' %} 80w">
+	<img src="{% static 'scipost/images/clockss_original_logo_boxed_ai-cropped-90.png' %}" width="80" alt="Clockss logo">
+      </picture>
+    </a>
+    <a href="https://i4oc.org/" target="_blank" rel="noopener">
+      <picture>
+	<source type="image/webp" srcset="{% static 'scipost/images/I4OC.webp' %} 100w">
+	<img width="100" src="{% static 'scipost/images/I4OC.png' %}" alt="I4OC logo">
+      </picture>
+    </a>
+    <a href="https://freejournals.org" target="_blank" rel="noopener">
+      <picture>
+	<source type="image/webp" srcset="{% static 'scipost/images/FJN-logo-long.webp' %} 100w">
+	<img width="100" src="{% static 'scipost/images/FJN-logo-long.png' %}" alt="FJN logo">
+      </picture>
+    </a>
   </div>
 </div>