update

Author: Liudon

layouts/shortcodes/figure.html

@@ -22,22 +22,25 @@
     {{ with $src := $.Page.Resources.GetMatch (.Get "src") }}
     <picture>
         {{- if $responsiveImages -}}
+            {{- $imageTypes := slice -}}
             {{- if and hugo.IsExtended (ne $src.MediaType.Type "image/webp") -}}
-            <source type="image/webp" srcset="
-            {{- with $respSizes -}}
-                {{- range $i, $e := . -}}
-                    {{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x webp " $hint " " $filter) ).RelPermalink | absURL }} {{ . }}w
-                {{- end -}}
-            {{- end -}}" sizes="{{ $dataSzes }}" />
+                {{- $imageTypes = $imageTypes | append "avif" -}} // avif need the first
+                {{- $imageTypes = $imageTypes | append "webp" -}}
             {{- end -}}
-            <source type="{{ $src.MediaType.Type }}" srcset="
-            {{- with $respSizes -}}
-                {{- range $i, $e := . -}}
-                    {{- if ge $src.Width . -}}
-                        {{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x jpg " $filter) ).RelPermalink | absURL}} {{ . }}w
-                    {{- end -}}
+            {{- range $imageType := $imageTypes -}}
+            <source type="image/{{ $imageType }}" srcset="
+                {{- $compressedImage := printf "%s_1080x.%s" $Destination $imageType -}}
+                {{- $cmSrc := $Page.Resources.GetMatch $compressedImage -}}
+                {{- if $cmSrc -}}
+                    {{ $cmSrc.RelPermalink | absURL}} 1080w
+                {{- else -}}
+                    {{- with $respSizes -}}
+                        {{- range $i, $e := . -}}
+                            {{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x " $imageType $hint " " $filter) ).RelPermalink | absURL }} {{ . }}w
+                        {{- end -}}
+                    {{- end -}}" sizes="{{ $dataSzes }}" />
                 {{- end -}}
-            {{- end -}}, {{$src.Permalink }} {{printf "%dw" ($src.Width)}}" sizes="{{ $dataSzes }}" />
+            {{- end -}}
         {{- end }}
         <img loading="lazy" src="{{ $src }}{{- if eq ($align) "center" }}#center{{- end }}"
          {{- if or ($alt) ($caption) }}