Different image sizes with resources.Copy

support
1

As a follow-up to this answer, I would like to know if it is possible to generate different sized webP images from it. cc @jmooring

2

The example you referenced produces this:

<picture>
  <source srcset="/posts/post-1/cover.2036869910.webp" type="image/webp" />
  <source srcset="/posts/post-1/cover.1906466728.jpg" type="image/jpeg" />
  <img
    src="/posts/post-1/cover.1906466728.jpg"
    width="300"
    height="275"
    alt=""
  />
</picture>

What do you want it to produce? Please provide an example of what you want to the rendered HTML to look like.

3

I would like to generate a second smaller image for mobile because I am having LCP issues in core web vitals. Essentially, responsive images that works for smaller screens.

<picture>
  <source media="(max-width: 767px)" srcset="elva-480w.webp" type="image/webp" />
  <source media="(min-width: 768px)" srcset="elva-800w.webp" type="image/webp" />
  <source media="(max-width: 767px)" srcset="elva-480w.jpg" type="image/jpeg"/>
  <source media="(min-width: 768px)" srcset="elva-800w.jpg" type="image/jpeg" />
  <img src="elva.jpg" alt="" width="768" height="402" />
</picture>
4

Based on the filenames this looks like you’re starting with two source images, one landscape and one portrait.

5

Corrected the code. Image orientation not necessary (landscape by default).

6

And you want all of them cache busted, correct?

7

Correct. (I reverted to Hugo’s own image processing without resources.Copy for now).