TMI Responsive Image

File: snippets/tmi-responsive-image.liquid

Used in sections: page-engage-home-bottom

Screenshot not yet added.
Save as docs/src/assets/screenshots/snippet-tmi-responsive-image.png

Description

Renders a responsive image with lazy loading support via Lazysizes. Generates a set of image width breakpoints capped at the source image’s actual width, outputs a wrapper div with configurable classes and attributes, and includes a noscript fallback for non-JS environments.

Features:

Dynamic srcset generation with widths from 180px to 3024px
Width breakpoints limited to source image’s actual dimensions
Lazy loading via Lazysizes (lazyload class)
480px initial src for fast initial load
Noscript fallback with 2048x2048 image
Configurable wrapper class and attributes
Configurable image class

Usage

{% render 'tmi-responsive-image' %}