The Adritian theme includes a responsive-image shortcode that generates optimized <picture> elements with WebP conversion, multiple srcset widths, and lazy loading.

Basic usage

Place your images in the assets/ directory and reference them with the shortcode:

Sample responsive image

The shortcode above produces a <picture> element with:

  • WebP srcset at 400w, 800w, and 1200w (up to the original image width)
  • Original format srcset at the same widths
  • Lazy loading via loading="lazy" and decoding="async"
  • CLS prevention via width and height attributes

Custom sizes hint

Use the sizes parameter to give the browser a layout hint for which srcset entry to pick:

Dashboard analytics

Adding CSS classes

Use the class parameter to style the image:

Radity Finance project

Static and external images

Images in static/ or external URLs fall back to a plain <img> with lazy loading (no srcset processing):

{{< responsive-image src="/img/blog/my-photo.jpg" alt="Static image" >}}

Parameters

ParameterDescriptionDefault
srcImage path relative to assets/, page-bundle resource, or static/external URLrequired
altAlt text""
classCSS class(es) for the <img> element–
sizesThe sizes attribute for the browser layout hint"100vw"

For best results, place images in assets/ (e.g. assets/images/blog/) so Hugo Pipes can generate optimized variants.