Responsive Images

Sat, 15 Mar 2025 10:00:00 +0000

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:

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:

Images on Demo site for Adritian - a high performance hugo theme by Adrián Moreno

Responsive Images

Basic usage

Custom sizes hint