Skip to content
MI Theme Docs

Responsive Image

File: snippets/responsive-image.liquid

Used in sections: product-download, product-subscription, product-template

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

Description

Responsive Image

Renders a responsive image with aspect-ratio padding, max dimension constraints, and lazy loading via Lazysizes. Falls back to a gray placeholder when no image is provided, and includes a noscript fallback.

Features:

  • Maintains aspect ratio using padding-top technique
  • Lazy loading with Lazysizes
  • Configurable max width and height constraints
  • Noscript fallback for non-JS environments

Usage

{% render 'responsive-image' %}