Add image processing support

[ia3andy]

automatic change format, resize, crop, ...

[ia3andy]

We already added some feature in Qute to be able to support this

[FroMage]

Oh really? In Qute?

[ia3andy]

@FroMage you remember we need some part of the tree to be able to detect the image tag at buildtime. We discussed it at the f2f. AFAI rememebr @mkouba implemented that part.

[FroMage]

What tree? What image tag? I'm not following how this relates to image processing.

[mkouba]

@FroMage you remember we need some part of the tree to be able to detect the image tag at buildtime. We discussed it at the f2f. AFAI rememebr @mkouba implemented that part.

Yes, I did. It's the Template#findNodes(Predicate<TemplateNode>) method. And here's an example how to use it: https://github.com/quarkusio/quarkus/blob/main/independent-projects/qute/core/src/test/java/io/quarkus/qute/TemplateNodesTest.java#L32-L59

[FroMage]

OK, so this should help with responsive images.

What we need to do is convert, at build time, a set of images to a range of sizes and formats.

For example, given a foo.jpg file of 6000x8000 pixels, we would like to generate various smaller sizes for devices of varying sizes, in order to optimise the size of images being transfered:

<img
  srcset="
    foo-320.jpg   320w,
    foo-640.jpg   640w,
    foo-960.jpg   960w,
    foo-1280.jpg   1280w,
    foo-2560.jpg   2560w
  "
  src="foo.jpg"
/>

It would be very nice if we could get a Qute tag that would generate the scaled images (to be bundled) but also the previous HTML, all from:

{#responsive 'foo.jpg' /}

Assuming the 320, 640… sizes are defined somewhere (config or default).

We can look at Jekyll for inspiration, but in general, what WB needs to do is:

• Collect all the occurrences of the responsive tag (or whatever it ends up being named) from Qute
• Extract the image source from them, and compute the images that need to be generated from that
• Generate the images (resize, crop, convert, whatever)
• Store them at some location
• Pass that information to Qute so that invoking {#responsive 'foo.jpg' /} will list the generated files

I think we could go a long way with the JDK's ImageIO for the image generation.

As an alternative to collecting all occurrences of the responsive tag, we could limit these transformations to all images placed in a specified folder like web/static/responsives but this is generally less useful, even though it does centralise all higher-res versions of the source images.

Note that this only adresses images we know at build time. We could provide an API for the same generation at runtime if the images are dynamic and not static, but this can wait until later.

[ia3andy]

quarkiverse/quarkus-qute-web#213