As image sizes vary according to grid context and designer whim, specifying responsive image sizes for each is a chore (and its easy to make a mistake, or forget to change a definition after a design change).

all-grid includes lazysizes.js, which calculates the optimal values for each image when the page loads.

SLIR (a highly efficient and capable php image-resizing script) is included. It generates preset image sizes and makes them available for lazy sizes to interpret.

All image markup is passed through a single form forms/misc/figure.txp, which includes basic lightbox functionality eg. <txp::figure lightbox … /> like the image above.