---
type: Article
title: 11ty image shortcode best practice
description: Simon Cox outlines how to properly set up and use the 11ty image shortcode, fixing issues with high-res sources, spacing in markdown, and rendering bugs.
resource: https://www.simoncox.com/short-articles/2023-06-06-11ty-image-shortcode-best-practice/
tags: [Shorticles, Eleventy]
timestamp: 2023-06-06
---

Just deployed a site using the [11ty image plugin](https://www.11ty.dev/docs/plugins/image/) and it is working well. I did have some issues with set up - wanted the hi-res images in a separate folder outside of src and public folders and acheived that by setting an  external source -  would be nice if this were in the base set up:

```
let imageSrc = `hi-res-images/${src}`;
let metadata = await Image(imageSrc, {    
widths: [180, 343, 647, 1200],
```

And then the shortcode in the functions:

```
eleventyConfig.addAsyncShortcode("image", imageShortcode);
```

But then I was having issues where the image shown on full screen was the low res version - not good! Took me an age to work out the issue till I noticed some errant code in the source.

In Markdown please leave a space before and after the image shortcode - else it gets mixed up and bits of the picture element get wrapped in a p tag and become not a picture element!

This doesn't work:

~~~
Lorum ipsum dolar bla bla
% image "image.jpg", "alt text" %
Lorum ipsum dolar bla bla
~~~

But this does:

~~~
Lorum ipsum dolar bla bla

% image "image.jpg", "alt text" %

Lorum ipsum dolar bla bla
~~~

Leave some space!


[Read full article](https://www.simoncox.com/short-articles/2023-06-06-11ty-image-shortcode-best-practice/)