50 lines
No EOL
1.1 KiB
HTML
50 lines
No EOL
1.1 KiB
HTML
<!--
|
|
type: string - default
|
|
url: string
|
|
alt: string
|
|
width: int
|
|
height: int
|
|
-->
|
|
{{ $sizes := slice "320" "640" "960" "1280" }}
|
|
{{ $ext := path.Ext .url }}
|
|
{{ $name := path.Base (replace .url $ext "") }}
|
|
{{ $dir := path.Dir .url }}
|
|
|
|
<picture>
|
|
<source
|
|
type="image/avif"
|
|
srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w,
|
|
{{ end }}
|
|
{{ .url }}.avif {{ .width }}w
|
|
"
|
|
/>
|
|
<source
|
|
type="image/webp"
|
|
srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w,
|
|
{{ end }}
|
|
{{ .url }}.webp {{ .width }}w
|
|
"
|
|
/>
|
|
<img
|
|
class="{{ .type }}"
|
|
width="{{ .width }}"
|
|
height="{{ .height }}"
|
|
srcset="
|
|
{{ range $i, $size := $sizes }}
|
|
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w,
|
|
{{ end }}
|
|
{{ .url }} {{ .width }}w
|
|
"
|
|
src="{{ .url }}"
|
|
alt="{{ .alt }}"
|
|
loading="lazy"
|
|
decoding="async"
|
|
>
|
|
</picture>
|
|
|
|
|
|
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}} |