AVIF and optipng!

content/posts/cad-shootout-fusion360.md

@@ -77,7 +77,7 @@ All the functions I needed were easy to find and worked out of the box just like
 
 I have a lot of tools I use daily that I keep around in my desk, on their side, loosely. I would like a stand where they can be popped in and out and take less footprint.
 
-![The tools](/media/fusion360/tools.png)
+![The tools](/media/fusion360/tools.jpg)
 
 Let's design something for that!
 

content/posts/cad-shootout-onshape.md

@@ -103,7 +103,7 @@ Keep in mind that there are a lot of tools that I didn't exploit properly (like
 
 I like taking SATA SSDs out of their housing and giving them a smaller one. You see, most cheap SATA SSDs nowadays only take a small part of the SATA 2.5" enclosure:
 
-![BX500 outside of its plastic enclosure](/media/onshape/smol.png)
+![BX500 outside of its plastic enclosure](/media/onshape/smol.jpg)
 
 I like using these as powered up pendrives to bring around, so I usually try to come up with a less space wasting, more quirky enclosure... let's make one!
 

themes/fesite/layouts/_default/_markup/render-image.html

@@ -1,7 +1,25 @@
 <figure width="100%">
   <a href="#{{ .Destination | md5 }}-lightbox"
-    ><img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}"
-  /></a>
+    ><picture>
+      {{ $avifPath:= replace .Destination (path.Ext .Destination) ".avif" }} {{
+      $avifPathStatic:= printf "static/%s" $avifPath }} {{ if (fileExists
+      $avifPathStatic) -}}
+      <source srcset="{{ $avifPath | safeURL }}" type="image/avif" />
+      {{- end }} {{ $isPNG := eq (path.Ext .Destination) ".png" }} {{ if eq
+      (path.Ext .Destination) ".jpg" }}
+      <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+      {{ end }} {{ if eq (path.Ext .Destination) ".jpeg" }}
+      <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+      {{ end }} {{ if eq (path.Ext .Destination) ".png" }}
+      <source
+        type="image/png"
+        srcset="{{
+      .Destination | safeURL }}"
+      />
+      {{ end }}
+      <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" />
+    </picture>
+  </a>
   <figcaption>
     {{ if .Title }}
     <p>{{ .Title | markdownify }}</p>
@@ -11,5 +29,23 @@
   </figcaption>
 </figure>
 <a href="#_" class="lightbox" id="{{ .Destination | md5 }}-lightbox">
-  <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" />
+  <picture>
+    {{ $avifPath:= replace .Destination (path.Ext .Destination) ".avif" }} {{
+    $avifPathStatic:= printf "static/%s" $avifPath }} {{ if (fileExists
+    $avifPathStatic) -}}
+    <source srcset="{{ $avifPath | safeURL }}" type="image/avif" />
+    {{- end }} {{ $isPNG := eq (path.Ext .Destination) ".png" }} {{ if eq
+    (path.Ext .Destination) ".jpg" }}
+    <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+    {{ end }} {{ if eq (path.Ext .Destination) ".jpeg" }}
+    <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+    {{ end }} {{ if eq (path.Ext .Destination) ".png" }}
+    <source
+      type="image/png"
+      srcset="{{
+    .Destination | safeURL }}"
+    />
+    {{ end }}
+    <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" />
+  </picture>
 </a>