Eleventy Markdown shortcode I use for responsive images

eleventy-md-responsive-img.js

// Shortcode for responsive images in blog posts
eleventyConfig.addShortcode("responsiveImage", function(baseSrc, ext, max, alt, classes) {
  let fullBaseSrc = '/assets/images/content/' + baseSrc;
  var sources = '<source media="(min-width: 501px)" srcset="' + fullBaseSrc + '-m.' + ext + '">';
  if (max !== 'm') {
    sources = '<source media="(min-width: 801px)" srcset="' + fullBaseSrc + '-l.' + ext + '">' + sources;
  }
  if (max === 'xl') {
    sources = '<source media="(min-width: 1201px)" srcset="' + fullBaseSrc + '-xl.' + ext + '">' + sources;
  }
  return `<div class="c-media ${classes}"><picture>${sources}<img src="${fullBaseSrc}-s.${ext}" alt="${alt}" /></picture></div>`;
});

/*
EMBED LIKE THIS (third attribute is max size "m", "l" or "xl"):
{% responsiveImage "baseImageSrcWithoutExtOrSize", "jpg", "xl", "Alt text", "your-classes space-separated" %}
*/