instead of having to pass them in. It depends on whether you want to βforceβ to fit a passed in size, or if you just want to know what the size is.
(Does not work with SVG though, nor does the resize and so on that operates on an image resource).
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images /}}
{{/ set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden */}}
img
sizes=β(min-width: 35em) 845px, 100vwβ
srcset=β
{{ if ge $src.Width β500β }}
{{ with $tiny }}{{.}} 500w{{ end }}
{{ end }}
{{ if ge $src.Width β845β }}
{{ with $small }}, {{.}} 845w{{ end }}
{{ end }}
{{ if ge $src.Width β1200β }}
{{ with $medium }}, {{.}} 1200w{{ end }}
{{ end }}
{{ if ge $src.Width β1500β }}
{{ with $large }}, {{.}} 1500w {{ end }}
{{ end }}β
src=β{{ $src.RelPermalink }}β alt=β{{ .alt }}β loading=β{{.loading}}β width=β{{ $origWidth }}β height=β{{ $origHeight }}β
Thank you everyone who helped especially Daniel F. Dickinson