Custom Eleventy Plugin Development
A client once spent two weeks manually optimizing images during build — we wrote a custom Eleventy plugin in a day that automatically generates WebP and AVIF. After that project, we formalized the process and now offer turnkey custom Eleventy plugin development. Standard Eleventy gives a lot, but not everything: custom image processing, headless CMS integration, multilingual support — without a plugin, this turns into copy-pasta and fragile helpers. Our custom Eleventy plugin development service focuses on creating custom Eleventy plugins that are efficient and tailored. A custom Eleventy plugin provides reusable, testable logic that reduces development and maintenance time. Due to modularity, this approach scales easily: a plugin written once can be used in dozens of projects, saving hundreds of hours.
Common Challenges Addressed
Custom image processing with compression, multiple formats and sizes — up to 40% reduction in build size. In one project, we lowered the final site size from 150 MB to 90 MB just with the image plugin. This led to up to 30% savings on hosting, or roughly $200/month on a typical plan. For a client in the publishing industry, we built a plugin that reduced image payload by 60% and improved Lighthouse scores by 15 points. Integration with external APIs with caching and error handling — fetching products from a headless CMS. The plugin handles timeouts and retries, ensuring a stable build. Complex HTML transformations — removing unused styles, adding critical CSS, injecting metadata. This reduces page load time by 20% according to Lighthouse. Multilingual support with dynamic routes and locale in URLs — the plugin generates pages for each language, pulling translations from JSON.
Without a plugin, these tasks are handled by one-off scripts that are hard to maintain and test. A custom Eleventy plugin encapsulates the logic and can be reused in other projects.
How to Develop an Eleventy Plugin for Image Optimization?
Let's take a real case: an e-commerce site on Eleventy with hundreds of images. Need to generate WebP and AVIF, multiple sizes, with transparent PNG sources. We wrote a plugin based on @11ty/eleventy-img. In one project, build time dropped from 5 minutes to 2 minutes (a 60% reduction). We optimized 200+ images in under 30 seconds.
const Image = require("@11ty/eleventy-img");
const path = require("path");
module.exports = function(eleventyConfig, options = {}) {
const cfg = {
widths: [320, 640, 960, 1280, 1920],
formats: ["avif", "webp", "jpeg"],
outputDir: "./_site/assets/images/",
urlPath: "/assets/images/",
sharpOptions: { quality: 82 },
...options
};
eleventyConfig.addAsyncShortcode("img", async function(src, alt, sizes = "(max-width: 768px) 100vw, 1200px", classList = "") {
const srcPath = src.startsWith("http") ? src : path.join("src", src);
try {
const metadata = await Image(srcPath, cfg);
return Image.generateHTML(metadata, { alt, sizes, loading: "lazy", decoding: "async", class: classList });
} catch (e) {
console.warn(`[img] Error: ${src}`);
return `<img src="${src}" alt="${alt}" loading="lazy">`;
}
});
};
The shortcode {% img "src", "alt" %} in templates generates a <picture> with AVIF, WebP, and JPG. The plugin replaced manual optimization and reduced build size by 40%. A similar approach can be applied to any repetitive tasks: from Markdown conversion to sitemap generation.
Testing a Custom Eleventy Plugin
Use Jest or Mocha for testing. Run Eleventy in test mode, passing the plugin configuration, and check output files. Also test individual plugin functions: filters, shortcodes, async operations. Example test for our plugin:
const plugin = require('./img-plugin');
const Eleventy = require('@11ty/eleventy');
test('generates picture with AVIF', async () => {
const elev = new Eleventy('./test/src', './test/_site', {
config: function(eleventyConfig) {
eleventyConfig.addPlugin(plugin, { widths: [640] });
}
});
const result = await elev.toJSON();
expect(result[0].content).toContain('<picture>');
});
This ensures the plugin works correctly under changes. For complex plugins, add error handling tests: for example, when an external API is unreachable or an image is corrupted. Use mock objects to simulate network requests.
Custom Plugin vs Ready-Made: Performance Comparison
Ready-made plugins are often overloaded: include unnecessary features, are hard to configure, rarely updated. A custom plugin is written for a specific task, easier to maintain, and faster due to no dead code. For example, a ready-made image plugin may pull dependencies for formats you don't need, while a custom one includes only what's necessary. Comparison:
| Feature | Ready-made plugin | Custom plugin |
|---|---|---|
| Functionality | Bloated | Only needed |
| Configuration | Complex, many options | Simple, your parameters |
| Performance | Slower due to extra code | Optimal (up to 3x faster) |
| Support | Depends on author | Full control |
A custom Eleventy plugin is an investment in build speed and quality. With a custom plugin, you get tailored functionality and avoid unnecessary bloat.
Our Process
- Analysis: We review your current project, identify repetitive tasks.
- Design: We design the plugin API — input parameters, config, return values.
- Implementation: We write code with tests (Jest), using async/await, error handling.
- Testing: We run the build with the plugin, verify output files.
- Deployment: We integrate the plugin into your project, document usage.
What Is the Timeline and Cost?
| Plugin Type | Complexity | Timeline | Cost Range |
|---|---|---|---|
| Simple (filters, 2-3 shortcodes) | Low | 1-2 days | from $500 |
| Medium (async operations, images) | Medium | 3-5 days | $1,200–$2,500 |
| Complex (API, multilingual, tests, npm publish) | High | 1-2 weeks | $3,000+ |
Cost is calculated individually. Typical ROI: one client saved $2,400/year on hosting after investing $1,500. Project estimation is free. Contact us — we'll find the best solution for your budget.
What's Included in the Result
- Source code of the plugin with comments.
- Installation and configuration documentation.
- Tests (Jest) for key scenarios.
- One week of support after deployment.
Common mistakes in plugin development: forgetting to handle errors in async shortcodes, not checking input parameter types, using synchronous operations where async is needed. Our process eliminates these.
We guarantee quality: over 10 years on the market, 40+ projects implemented. Get a free consultation — we'll discuss your project and propose an optimal solution. Budget savings and reduced maintenance time — that's what you get with a custom Eleventy plugin. Your benefit: lower hosting costs and faster development.
Learn more about the Eleventy API on GitHub.