Eleventy Sharp Images Plugin | Free Image Optimization Plugin for Developers
We recently launched a free plugin that can save developers hours of work and edits on their sites. You can read the documentation and download it here:
Check out our tutorial video showing how to add it to any project and use it effectively:
What makes this plugin special is that once it's set up, all you need to do is specify the image's height and width attributes at a given screen size. The plugin will automatically crop the image, center the main focus, convert it to modern formats (WEBP and AVIF with fallbacks), and compress the images for optimized performance.
The plugin leverages the {% getUrl %} shortcode, allowing you to apply transformations to an image using Sharp's image processing filters, like so:
<picture>
<source srcset="{% getUrl '/assets/images/image.jpg' | resize({ height: 50, width: 50 }) | avif %}" media="(max-width: 600px)" type="image/avif">
<source srcset="{% getUrl '/assets/images/image.jpg' | resize({ height: 50, width: 50 }) | webp %}" media="(max-width: 600px)" type="image/webp">
<source srcset="{% getUrl '/assets/images/image.jpg' | resize({ height: 400, width: 400 }) | jpeg %}" media="(min-width: 601px)" type="image/jpeg">
<img src="{% getUrl '/assets/images/image.jpg' | resize({ height: 400, width: 400 }) | jpeg %}" alt="Description of the image">
</picture>
In this example, we set up responsive image HTML with three
The processed image is then cached to prevent unnecessary regeneration. And whats super helpful is if you change the image in the source file paths, you dont need to resize or compress the new image. The plugin will do it automatically every time you change the image. This makes editing sites and swapping images much easier and faster since you don't have to do it anymore - the plugin will!
Each Sharp transformation can also be used as a filter, with options passed as an object. For example, to adjust the image position during resizing:
{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50, position: "top" }) | avif %}
And now the top of the actual image will always be at the top position of the newly cropped image.
How It Works
To support environments where async features aren't allowed (like processing an image in a Nunjucks Macro), the shortcode doesn't directly generate the image. Instead, it creates a comment with a JSON configuration object. At the end of an Eleventy build, a Transform uses a regex to find all instances of these comments and process the images.
The configuration is hashed, and the file is renamed to include this hash. If an image path or its transformations change, the hash/filename will change, invalidating the cache. This works with netlify-plugin-cache to prevent reprocessing between builds in a live environment.
We hope you find this tool useful, and if you haven't visited CodeStitch in a while, we made a bunch of updates, edits, and added 100's of new templates that only continue to get better every month. Come see what we've been working on:
We’re excited to share this with the community! Visit CodeStitch to check out our latest updates, including 100s of new templates to help developers build better websites faster.
Thank you for your continued support! We look forward to bringing you even more tools to enhance your development workflow.
Thanks,
Ryan Postell
Founder/CEO CodeStitch
