This starter uses Eleventy’s build-time image transformations. Find more info on and edit settings in config/shortcodes/imagePlaceholder.

For now there are three image sizes: 320px, 570px and 820px.
820px is the maximum size, equivalent to the width set for our content wrapper in prose.css: --wrapper-max-width: 55rem;.

The sizes attribute is set to sizes = '(min-width: 55rem) 820px, 100vw'.

If you want to adjust the wrapper width you should also adjust the image size in the shortcode accordingly.


{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Add your own sizes attribute (note how I set an empty string for the caption):

{% imagePlaceholder "path to image", "alt text", "", "(min-width:30em)  50vw, 100vw" %}

Example image with a caption

The preview for social media

An interesting caption text.


You can change the CSS for the page and blog post images in ./src/assets/css/blocks/page.css and ./src/assets/css/blocks/blog.css:

.page img {
max-inline-size: 100%;
block-size: auto;

.blog img {
max-inline-size: 100%;
block-size: auto;