Add next-gen image formats

[sawyerclick]

Add the ability to generate next-gen image formats such as .avif and .webp when exporting artboards as .png or .jpeg. Next-gen formats are usually a quarter of the size of older formats, so the payload will lighten dramatically and the page will load quicker.

The interface

I imagine this as a checkbox for "next-gen formats" or a dropdown in which you could select next-gen formats to generate.

The code

If selected, you would need to use a <picture> element instead of a <img/> element in the code. A .forEach() method can iterate over the selected formats.

How to do it

I normally would use Sharp.js but it runs on Node and not in the browser. I wonder if Figma has an equivalent that we could hit since they offer multiple export options?

[sawyerclick]

We've previously come to the conclusion that figma can't create next-gen formats for us. But could we write a quick NPM script to do it for us?

You could run a command like this to find images in a file, replace them with a <picture> with applicable <source>s, and then create next-gen formats that will live alongside the original (depending on how easy it is for us to trace back to a public/static folder?)

npx figma2html-nextgen --format webp avif --input ./path/to/Figma2Html.html

df-sveltekit has a convert.js script that could be a good basis for this

[sawyerclick]

This needs to happen outside of this repo. I like the idea of ^^ still. A separate script we can call to 1. change images and 2. add <source> tags and update any references