diff --git a/src/docs/images.md b/src/docs/images.md new file mode 100644 index 0000000..ddc0d76 --- /dev/null +++ b/src/docs/images.md @@ -0,0 +1,33 @@ +--- +title: Images +--- + +Using the [Eleventy Image](https://www.11ty.dev/docs/plugins/image/) plugin, there are three ways to handle image optimization: HTML Transform, Markdown syntax, and a Nunjucks shortcode. [See the dedicated blog post to dive deeper.](/blog/post-with-an-image/) + +## **1. HTML Transform** +The HTML Transform automatically processes `` and `` elements in your HTML files as a post-processing step during the build. + +```html +alt text +``` + +## **2. Markdown Syntax** + +The Markdown syntax creates the `` element that the _HTML Transform plugin_ is looking for, and then transforms it to the `` element (if more than one format is set). + +```markdown +![alt text](/path/to/image.jpg) +``` + +## **3. Nunjucks Shortcode** + +In Nunjucks templates you can also use a shortcode. + +{% raw %} + +```jinja2 +{% image '/path/to/image.jpg', 'alt text' %} +``` + +{% endraw %} +