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.