As of Miva 26.03.00, these Shadows flex components output srcset and sizes on their images:
mmx-herommx-hero-slidermmx-image-textmmx-image-acrossmmx-text-bannermmx-contact-formmmx-combination-facetmmx-category-carousel
The browser downloads the smallest file that still looks sharp on the shopper’s screen. Merchants don’t configure anything new.
Size ladder#
When a merchant uploads an image, Flex generates up to 8 sizes from it:
| Step | Width |
|---|---|
| 1 | 320px |
| 2 | TODO |
| 3 | TODO |
| 4 | 960px |
| 5 | 1440px |
| 6 | 1920px |
| 7 | TODO |
| 8 | 2560px |
Images are never upscaled. If the upload is 1600px wide, sizes wider than 1600px aren’t generated.
The width and height attributes still come from the original upload, so the page doesn’t shift while images load. Image paths are now URL-encoded once. Earlier versions encoded them twice.
sizes by component#
mmx-hero#
The <picture> sources and <img> use sizes="auto, 100vw", since the hero is full width. A phone at 390px and a device pixel ratio of 3 gets the 1440px file.
The optional mobile and tablet images use the same ladder. If only the main image is uploaded, all 3 slots share the same 8 files on disk.
mmx-hero-slider#
Each slide uses the mmx-hero markup with sizes="auto, 100vw":
| Device | File chosen |
|---|---|
| Phone, 390px, DPR 3 | 1440px |
| Tablet, 768px, DPR 2 | 1920px |
| Desktop, 1920px | 1920px |
mmx-image-across#
Each list item’s <picture> uses sizes="auto, calc(100vw / <columns>)". The server works out the column count for mobile, tablet and desktop. If the desktop column count is “auto”, it uses the number of images, up to 8.
On smaller screens the CSS reduces the column count, and wrap and scroll modes reduce it differently. The template follows the same rules, so sizes matches the layout:
| Desktop setting | Mobile | Tablet |
|---|---|---|
| 4 across, wrap | 1 column | TODO |
| 8 across, scroll | 3 columns | 5 columns |
At 4 across on a 1920px desktop, each image gets the 480px file. On a 390px phone at DPR 3, where 4 across becomes 1 column, it gets the 1440px file.
The placeholder image is a plain <img>.
mmx-image-text#
On desktop the image sits beside the content in a 2-column grid. sizes uses the image’s share of the screen from the content-width slider (9 steps), for example auto, 50vw. If the slider isn’t set, it uses 50vw.
Below desktop, the image and content stack, so both sources use auto, 100vw.
On a 1920px desktop with a 50/50 split, the browser picks the 960px file. On a 390px phone at DPR 3, it picks the 1440px file.