Automatic Image Optimization in Miva 26R3 and Later
Starting with Miva 26R3, PageBuilder automatically generates multiple image sizes for supported Flex Components. This allows shoppers' browsers to load an appropriately sized image based on how it's displayed, reducing unnecessary image data and helping storefront pages load faster, especially on mobile devices.
For example, a Hero Banner displayed on a desktop may need a larger image than the same banner on a phone. Instead of downloading the same large image for both, the browser can load a smaller version when appropriate.
You don't need to create and upload each image size yourself. PageBuilder handles this automatically for supported components.
Requirements: Your store must be running Miva 26R3 (26.03.00) or later and use supported Flex Components updated to their 26R3 versions. Images hosted outside Miva are not automatically optimized through this functionality.
Using an earlier version of Miva? See Image Sizing Guidelines for Earlier Versions for guidance on choosing image dimensions for Hero Banner and Image Across components.
Supported Flex Components
Automatic image optimization is available for supported image properties in the following PageBuilder Flex Components:
- Hero Banner
- Hero Slider
- Image and Text
- Image Across
- Text Banner
- Contact Form
- Combination Facet
- Category Carousel
Choosing Images for PageBuilder
PageBuilder handles much of the resizing automatically, but starting with a high-quality image helps ensure it looks good across different screen sizes.
Keep these tips in mind:
- Choose an image that's large enough. Start with an image that can fill the largest space where it will be displayed. PageBuilder can make images smaller, but it can't restore detail that's missing from a low-resolution image.
- Consider the image's shape. Wide images work well for banners, while square or portrait images may be better suited to other layouts.
- Preview different screen sizes. Check how your images appear on desktop, tablet, and mobile, especially if important details might be cropped.
- Use separate mobile images when needed. Some components let you upload a different image for smaller screens, which can help when a wide desktop image doesn't display well on mobile.
Hero Banner Flex Component
The Hero Banner Component displays promotional images across desktop, tablet, and mobile screens.
A wide banner may look great on desktop but crop important details on smaller screens. Preview your banner at different screen sizes and, if needed, upload a separately cropped mobile image.
Image Across Flex Component
The Image Across component arranges images in a flexible layout with one or more columns. Unlike Hero Banner, there are no specific recommended image dimensions because the available space depends on your layout settings.
Column Count
Location: In PageBuilder under Advanced Settings > Column Count
Choose how many columns appear in the component, from 1 to 8, or select Auto.
- Auto: Sets the number of columns based on the images added to the component.
- Fewer columns: Give each image more horizontal space.
- More columns: Divide the available space into narrower image areas.
Column Count affects how much space each image occupies, so it's worth previewing different layouts to see what works best for your images.
Image Height
Choose how tall images appear within the component.
- Determined by Smallest Image: Uses the shortest image to set the displayed height, keeping images aligned.
- Small, Medium, or Large: Uses predefined heights for the image area.
Choose the option that works best for your images and layout.
Image Fit
Choose how images fill the available space:
- Cover: Fills the available space, cropping parts of the image if necessary.
- Contain: Displays the entire image without cropping.
- Fill: Stretches the image to fill the available space, which may change its proportions.
- None: Displays the image without automatically resizing it to fit.
- Scale Down: Reduces the image size when necessary while preserving its proportions.
Miva Pro Tip: Preview your layout on desktop, tablet, and mobile after adjusting these settings. This helps you catch cropping or alignment issues before publishing.
Image Formats and Quality
You can also choose the format and quality of resized images generated by Miva under Domain Settings → Image Settings.
For more information about the available formats, including WebP and AVIF, see Domain Details.
Image Sizing Guidelines for Earlier Versions
PageBuilder Image Size Guidelines: Hero & Image Across Components
Miva’s PageBuilder makes it easy to create beautiful, responsive pages using visual components. Two of the most popular flex components, Hero and Image Across, are designed to showcase images in flexible, eye-catching ways across desktop, tablet, and mobile screens.
This guide will help you understand how these components work, how images are sized to fit within these components, and how to determine the best image sizes to use for each specific layout.
How PageBuilder handles image resizing
Components like the Hero Banner Flex Component have predefined dimensions for images, there are recommended width/height for desktop, table, and mobile. These are more than just recommendations, PageBuilder will resize images larger than the predefined dimensions, so choosing images that are close in size will make images appear more crisp and less pixelated, will keep the image from stretching or appearing distorted, and help your site to load more efficiently.
Hero Flex Component: For more on this component click here.
1440×580 for desktop
640x595 for mobile
960×425 for tablet
Remember, images that to not meet these dimensions or exceed them can appear, stretched, pixelated, even blurred.
Miva Pro tip: When choosing a hero image, start by designing for the largest expected width (desktop). Test how it behaves in tablet and mobile previews. Sometimes you may want to upload a re-cropped mobile version for better composition.
Image Across Flex Component - Flexible layouts
Image Across has no dimensional recommendations displayed in the flex component settings. This is because the layout of the Image Across is flexible, making there a great variability in the size & aspect-ratio of images. The layout, design, and size of the container is determined by the amount of Columns selected in the Column Count dropdown, the Image Height dropdown, and the Image Fit dropdown.
Miva Pro Tip: Add images to your media library. Select the Column Count from the Advanced settings. Configure the Image Height from the Properties settings, then use the inspect feature in your browser to inspect the images to get the image dimension measurements for the settings you configured. Additionally, you can resize the browser to the largest width for the desktop, tablet, & mobile viewports, then inspect the images get their sizes.
Column Count
Path: Advanced settings > Column Count dropdown
Column Count creates placeholders in the Image Across container. You can choose Auto, or, between 1 and 8 columns. If you select Auto, Miva will automatically add the amount of columns to the container that match the amount of images you have uploaded to the Image Across Component.
Selecting Image Sizes: Remember, each number of Columns has a different set of dimensions.
The Column Count affects the image sizes because the total horizontal space available (typically the full width of your site container) is divided evenly among however many columns you choose.
Fewer Columns = Wider Image Slots
If you select 1 column, the image gets the entire row’s width (up to ~1440/ 1410 px on desktop). You should upload a large, wide image. A small image here might get stretched or pixelated.
More Columns = Narrower Image Slots
If you select 8 columns, each image only gets 1/8 of the row’s width. You need to upload smaller, narrow images. A very wide or tall image will likely get cropped or squished.
Your image dimensions need to match the number of columns you choose. See the table below to determine the recommended width measurement of an image for the number of columns.
Width Dimensions Table for Image Across
Height Dimensions for Image Across
Once the recommended width is determined, calculate the height by multiplying the width by a number between 0.5 and 2 (ex. a 440 wide image could work with an image-height anywhere around 220px to 880px range).
Image Height
Image Height – This setting defines how tall each image appears within the column grid. It either sets a fixed height (small, medium, large) or allows the images to size themselves dynamically based on the smallest image provided.
Determined by Smallest Image – Makes all images in the row match the shortest image height, to maintaining alignment.
Small / Medium / Large – Predefined height settings. These assign a fixed height to the image container. Add your images and test for best results.
Image Fit Setting – controls how the image fills the container box, how the image is scaled, or cropped to fit the space available. Select from Cover, Contain, Fill, None, and Scale Down.