Waste less effort transforming images

[benmccann]

Right now we generate every combination of image transformations and apply them all from the base image

imagetools/packages/vite/src/index.ts

Line 134 in a337cdf

for (const config of imageConfigs) {

Let's say we have ?w=100;200;400&format=avif;webp&as=picture

Right now we make 6 clones of the starting image and then apply w=100&format=avif, w=200&format=avif, w=400&format=avif, w=100&format=webp, w=200&format=webp, w=400&format=webp for a total of 12 sharp operations.

It would be smarter to instead make 2 clones of the base image for format=avif and format=webp then make clones of each of those and do w=100, w=200, w=400 for a total of 8 sharp operations.

It's a bit complicated to think about the number of operations here, but you can think of it like a graph with edges and count the number of edges. In the first case you have a root node, going to 6 child nodes, which in turn each have 1 child node with a total of 12 edges. In the second case you have a root node, going to 2 child nodes, which each have three child nodes of their own with a total of 8 edges.

I'm not 100% sure this savings is there and would work that way, but I think it might be possible to get some savings. I think some operations you need to apply at the same time and some are safe to split. E.g. if you crop and resize those might not be transitive operations. But things like outputting different formats, which is our most common use case could probably be split out separately - whether they need to be applied first or last or we could choose would have some effect on the amount of savings, but there'd be some decent savings in any of the cases.

Related: lovell/sharp#241