Responsive shortcode - image not found

[manas96]

I’m trying to insert responsive images into my blog, using this shortcode taken from here:
layouts/shortcodes/img.html

<!-- How the shortcode is used: -->

<!-- The shortcode functionality - in layouts/shortcodes/img.html -->
<div class="picture">
  {{ if .Get "caption"}}
  <figure>
  {{ end }}
    <picture>
      <!-- Large screens -->
      <source
        media="(min-width: 535px)"
        data-original-set="{{ .Get "src" }}.{{ .Get "type" }} 1x,
                {{ .Get "src" }}@2x.{{ .Get "type" }} 2x">
      <!-- Small screens -->
      <source
        media="(max-width: 534px)"
        data-original-set="{{ .Get "src" }}-sm.{{ .Get "type" }} 1x,
                {{ .Get "src" }}-sm@2x.{{ .Get "type" }} 2x">
      <!-- Fallback -->
      <img
        data-original="{{ .Get "src" }}.{{ .Get "type" }}"
        data-original-set="{{ .Get "src" }}@2x.{{ .Get "type" }} 2x"
        alt="{{ .Get "alt" }}"{{ if .Get "caption"}} class="img-fluid figure-img"{{ end }}>
    </picture>
  {{ if .Get "caption"}}
    <figcaption>{{ .Get "caption" }}</figcaption>
  </figure>
  {{ end }}
</div>

I use it in my post markdown as such:
{{< img src="/images/f1_guide/track" type="jpg" alt="" caption="test" >}}

But when I render the page, I get no image and only the alt caption.
I am confused because as far as I understand, Hugo looks in static/ for images, so I believe I am providing the correct path:

For the image to render, do I also need to provide the other sizes of my image? My assumption is that it would default to the provided image different sized versions are not found.

[cshoredaniel]

That looks like it’s using some kind of JavaScript library rather than ‘pure’ HTML. I think you might want to review:

: The Picture element - HTML: HyperText Markup Language | MDN

[manas96]

Ah I see, I missed the part where the author mentions an asset build pipeline.

[andrewd72]

Github would suggest that the shortcode you are looking at was written 6 years ago.
I think now the usual approach now is have a good quality image asset and get Hugo to process to various sizes and quality (and webp if you wanted).

The only reason to use something external would be for progressive jpgs (doesn’t really matter if webp is shown in preference) or to provide avif images (good performance, less detail).

Image Processing