hypnagaga_old/src/docs/images.md

title
Images

Using the Eleventy 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.

1. HTML Transform

The HTML Transform automatically processes <img> and <picture> elements in your HTML files as a post-processing step during the build.

<img src="./path/to/image.jpg" alt="alt text">

2. Markdown Syntax

The Markdown syntax creates the <img> element that the HTML Transform plugin is looking for, and then transforms it to the <picture> element (if more than one format is set).

![alt text](/path/to/image.jpg)

3. Nunjucks Shortcode

In Nunjucks templates you can also use a shortcode.

{% raw %}

{% image '/path/to/image.jpg', 'alt text' %}

{% endraw %}