- Canary
4.0.0-alpha.10- Stable
3.1.6- Pro
- Coming Soon
- Guide
Guide
- Get Started
- Command Line Usage
- Add a Configuration File
- Copy Files to Output
- Add CSS, JS, Fonts
- Importing Content
- Configure Templates with Data
- Using Data in Templates
- Template Languages
- Template Features
- Environment Variables
- Internationalization (i18n)
- Watch Files and Dev Servers
- Common Pitfalls
- Advanced
- Plugins
- Services
Image (WebC)
On this page
Eleventy Image Usage Types
- Image HTML Transform: Recommended—start with this one! It’s the easiest to configure and is compatible with all template syntax.
- Image Data Files: Use images to populate data in the Data Cascade.
- Image JavaScript API: Low-level JavaScript API works independent of Eleventy.
- Image Shortcodes: Use universal shortcodes in Nunjucks, Liquid, or 11ty.js templates.
Feature Removed
Due to and maintenance cost and feature overlap with the Image HTML Transform, the
<eleventy-image> WebC component was retired in Eleventy Image v7. Read more at GitHub Issue #305. The HTML Transform method is recommended moving forward. You can also create your own Image component using an approach similar to Asynchronous Shortcodes using webc:type="js".