hyva-render-media-image

To generate responsive images in Hyvä templates, use the Hyva Theme Media view model to create a picture element. You provide image configurations like path, width, height, and media queries to output ready-to-insert HTML markup.

Reduce CLS for Magento hero banners by rendering responsive images with explicit width and height attributes. This generates a picture element that reserves aspect-ratio space, preventing layout shifts during page load.

Yes, you can achieve art-direction in Hyvä by configuring multiple image sources with distinct media queries within the picture element. This allows serving different image crops for mobile and desktop views.

The best way to configure a fallback image in Hyvä is to include an optional fallback configuration when generating the picture element. This ensures a default image displays if the primary responsive sources are unsupported.

Yes, the Hyva Media view model supports best practices for loading attributes. You can specify lazy or eager loading when configuring CMS content images to optimize page performance.