Overview

Eleventy-plugin-sharp is an impressive addition for developers using the 11ty (Eleventy) static site generator, bringing the powerful capabilities of the Sharp image transformation library right into template building. This plugin enables users to efficiently manage images, offering an intuitive way to manipulate, resize, and retrieve various properties of images. Inspired by Craft CMS’s image API, this plugin is designed to streamline image handling, making the process straightforward and accessible.

With the ability to apply multiple operations through filters and shortcodes, eleventy-plugin-sharp empowers developers to create responsive images directly within their templates. Whether you’re looking to optimize images for web performance or simply need robust tools for managing visual assets, this plugin offers the flexibility and functionality to meet those needs.

Features

• Filters: Build dynamic Sharp instances through filters, allowing for extensive image manipulation like resizing, color adjustments, and more based on Sharp’s API.

• Shortcodes: Execute asynchronous functions of Sharp with shortcodes, giving you a powerful way to perform transformations that filters cannot handle.

• Image URL Retrieval: The getUrl(instanceOrFilepath) function saves images to disk and fetches the corresponding URL for easy access and usage in your templates.

• Dimension Access: Quickly obtain image width and height using getWidth(instanceOrFilepath) and getHeight(instanceOrFilepath), making it simple to adapt images to your design needs.

• Metadata Extraction: Use getMetadata(instanceOrFilepath) to retrieve detailed information about your images, helping you to make informed decisions about presentation and usage.

• Image Stats: The getStats(instanceOrFilepath) function provides crucial statistics about images, such as size, type, and more, allowing for thorough oversight of assets.

• Responsive Images: Generate responsive images effortlessly with the <picture> element using the sharp filter, ensuring your site looks great across all devices.

• Custom Output Filepaths: Get the dimensions of saved images and customize output paths seamlessly, enhancing your workflow and organization.