Different image sizes with resources.Copy

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

The example you referenced produces this:

  <source srcset="/posts/post-1/cover.2036869910.webp" type="image/webp" />
  <source srcset="/posts/post-1/cover.1906466728.jpg" type="image/jpeg" />

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

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.

  <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" />

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

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

And you want all of them cache busted, correct?

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