Add image processing support

[chrisdmacrae]

Recreate gatsby's sharp image processing using a parcel plugin and posthtml transforms.

This should enable:

• Generating image sizes
• Generating srcsets
• Generating image variants (color, etc)

[johnpuddephatt]

Using pareleventy for a site right now – great work thanks! 👏

Been having a play around with sharp and thought it would be quite straightforward to implement a shortcode which:

– specifies the image path, plus attributes like desired size, etc.
– refers to an 11ty config value specifying breakpoints
– generates the desired img tag markup with correct srcset values
– uses sharp to generates the required image sizes based on the path, attributes and breakpoints

The shortcode works, the images are generated fine... the problem is (or seems to be, my experience with node is minimal to say the least!) that sharp runs asynchronously, so when parcel comes to do its thing, the images haven't been generated yet.

Do you think there might be a way around this? Or is trying to do this with an 11ty plugin a bad idea? I don't know enough to know!

[johnpuddephatt]

Just seen there's an issue over on the 11ty repo about async shortcodes: 11ty/eleventy#429

Using this code – async-shortcode.js - over there I've got something working.

Only issue at the moment is I'm having to process the files within the src directory so that they get copied over to the dist (and .tmp) folder in the right way and processed by parcel. This feels a bit messy as I end up with two folders of images in /src... one with the original images and another full of resized/cropped images. I'd like to keep the src folder to just containing the originals.

Will keep experimenting as it feels like there's a lot of merit to this approach.