Eleventy Transform: optimize img srcset directly (not indirectly)

[olets]

Current

The eleventy-img Eleventy Transform transforms img srcs but not img srcsets.

Desired

The eleventy-img Eleventy Transform transforms img srcs and img srcsets.

Motivation

Currently, the transform can be used to reduce the reliance on external resources by saving remote srcs locally. If an img has a remote source in srcset, that source is not transformed and the browser may select the remote source. Optimizing srcset sources would make the Eleventy Transform a (Twig macro-friendly) drop-in solution for local-ifying images with remote sources.

Solution

To get the ball rolling, here's a possible approach to the normalization piece https://github.com/olets/eleventy-img/compare/main..transform-srcset

The optimization piece appears to be more complex. I skimmed the code, and paused. Could be down to make an attempt if given some pointers. But maybe that piece should be part of #215.

[zachleat]

Eleventy performs image optimization from <img src> and soon <picture><img src> #214. It outputs <img srcset> and <picture><source srcset><img srcset> for you automatically based on your plugin configuration options.

So, it isn’t quite accurate to say that we don’t optimize srcset but it is accurate to say that we don’t use srcset as input. We could use srcset values to find larger input sources to the transform. I’ve modified the title to reflect this, thanks!

[olets]

(If you first read this comment in email, ignore that and read fresh here. Sorry about that. This was my first dev work after returning from a vacation, and it took many edits before my brain fully woke up!)

Choose largest input source from img src and img srcset and source srcset

That's also an interesting feature idea, but not the one for my use case.

It outputs <img srcset>…for you automatically based on your plugin configuration options.

Not for all configurations, and for this request I'm interested in the cases where input srcset is respected.

To clarify my request: I'd like the transform to parse srcset for urls, fetch those urls, write those files locally, and rewrite the srcset attribute, ideally deduping against src.

Say, for example, the input srcset specifes versions for different densities (in the real project that inspired this request, the srcset value has more complex logic)

<!-- src/my-page.html -->

<img
  alt="My cool image"
  src="https://my-cool-cdn.com/1.jpg"
  srcset="https://my-cool-cdn.com/1.jpg, https://my-cool-cdn.com/1.jpg&dpr=2 2x, https://my-cool-cdn.com/1.jpg&dpr=3 3x"
>

Currently, adding the transform

// eleventy.config.js

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyImageTransformPlugin);
}

fetches the src url, saves the file locally, and rewrites the src attribute. But it leaves the input srcset untouched.

<!-- dist/my-page.html -->

<img
  alt="My cool image"
  src="/hashed-a.jpg"
  srcset="https://my-cool-cdn.com/1.jpg, https://my-cool-cdn.com/1.jpg&dpr=2 2x, https://my-cool-cdn.com/1.jpg&dpr=3 3x"
>

My desired behavior would result in this entirely local img

<!-- dist/my-page.html -->

<img
  alt="My cool image"
  src="/hashed-a.jpeg"
  srcset="/hashed-a.jpeg, /hashed-b.jpeg 2x, /hashed-c.jpeg 3x"
>

[zachleat]

Renamed yours back and created #266 for mine