Roam has optimized the images to load quickly by taking advantage of features within Shopify's code and common practices for responsive images.
In this section...
- Overview
- Lazy Loading
- Focal Points
- Logo's
- Header
- Sections
- Product
- Collections
- Blogs and Posts
- Pages
- Theme Setting > General > Gift Card
- Theme Setting > Favicon
- Theme Setting > Checkout
Overview
There are 2 considerations for images:
Static: Is it a standalone image like a logo? The image container will take on the dimensions of the image
Background: Is it used as a background? The image will be cropped to use the available container. This will reduce the size of the rendered image by only loading what the customer will see:
Lazy Loading
Sections and templates have a 'Lazy load image(s)' setting. This will give complete control for "above the fold" images. Disable for any image that is not visible on the initial page load. Adjusting these per section or template will help your Google Lighthouse and Shopify Speed Score.
Focal Points
Sections and templates that utilize an image picker will have an option to set a focal point on the image. After selecting the image, click 'Edit' to add a focal point, and set custom alt text. Learn more
Some images like the featured images for collections and blog posts do not have the option to set the focal point using the edit method, so you will have a 'Focal point' theme setting dropdown with broader options
Logo's
When possible, it is always best practice to use a PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.
It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp.
Header
Mega Menu Promotion
| DESKTOP IMAGE | MOBILE IMAGE | |||||
|---|---|---|---|---|---|---|
| 'Layout' setting | Style | Height | Minimum Width | Style | Height | Minimum Width |
| Mobile | Static | Image height | 439px | Static | Image height | 439px |
| Default | Background | * | 310px | Static | Image height | 439px |
* Height varies depending on the 'Minimum Number of Desktop Link Columns' setting and the number of available links
Story Bar
The Story Bar image is a background image cropped to the following dimensions:
| 'Layout' setting | Height | Minimum Width |
|---|---|---|
| Mobile | 100px | 439px |
| Default | 180px | 620px |
Sections
Collections List, FAQ, Image with Text, Newsletter, & Search
These sections use a static image and the width is based on a 4 column design. Example is 1 column = 25% of the container width:
| Height | Width (px) based on Text Column Width | |||
|---|---|---|---|---|
| 1 | 2 | 3 | ||
| DESKTOP IMAGE | Image height | 930 | 620 | 310 |
| MOBILE IMAGE | Image height | 768 | 768 | 768 |
Image
A static image dependent on the 'Image width' setting and the height of the image file:
| Height | Width* | |
|---|---|---|
| DESKTOP IMAGE | Image height | 'Image width' setting |
| MOBILE IMAGE | Image height | 622px |
* If an image's width is less than the assigned width, the image's width will be assigned
Image Gallery
'Image column width' is based on a 4 column design. Example is 1 column = 25% of the container width:
| 'Image height' Setting | Style | Height | Width (px) based on Image Column Width | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| DESKTOP IMAGE | MOBILE IMAGE | |||||||||
| 1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | |||
| Small | Background | 25% of width* | 310 | 620 | 930 | 1240 | 156 | 311 | 467 | 622 |
| Medium | Background | 50% of width* | 310 | 620 | 930 | 1240 | 156 | 311 | 467 | 622 |
| Large | Background | 75% of width* | 310 | 620 | 930 | 1240 | 156 | 311 | 467 | 622 |
| Original Aspect Ratio | Static | Image height | 310 | 620 | 930 | 1240 | 156 | 311 | 467 | 622 |
EXAMPLE: The image for a block with the section 'Image height' set to 'Medium' and the block 'Image column width' set to 3 would have the following dimensions:
- DESKTOP: 930px width with a height of 465px (50% of 930)
- MOBILE: 467px width with a height of 234px (50% of 467)
* The gallery code looks at the tallest block of each row, to determine that rows background images height. Example is having 2 blocks next to each other, 1 'Image column width' is set to 1 & 1 'Image column width' is set to 3. Both blocks will use the height assigned to '3'
Image with Text Overlay
A background image that is dependent on the height of the container and 'Full width' option:
| Image | Height based on Section Height (SH) & Full Width | Width (px) based on Full Width | ||
|---|---|---|---|---|
| Yes/Checked | No/Unchecked | Yes/Checked | No/Unchecked | |
| DESKTOP | SH DESKTOP % of screen height | SH DESKTOP % of width | Up to 3440* | 1240 |
| MOBILE | SH MOBILE % of screen height | SH MOBILE % of width | 622 | 622 |
EXAMPLE: The image for the 'Section height' MOBILE set to 50% & DESKTOP set to 35% with 'Full width' unchecked:
- DESKTOP: 1240px width with a height of 434px (35% of 1240)
- MOBILE: 622px width with a height of 311px (50% of 622)
* Full width images will assign the image files actual width up to 3440px. Based on your analytics, you may opt to choose a smaller image. Many times, 1900px will be sufficient. No matter the size, the code will ensure the image fits the container, but smaller image quality may suffer on larger screens
Map & Slideshow
A background image that is dependent on the height of the container, image placement and 'Full width' option:
| Image | Height | Width (px) | ||||
|---|---|---|---|---|---|---|
| Section Height (SH) & Full Width | 'Outside' & Full Width | 'Overlay' & Full Width | ||||
| Yes/Checked | No/Unchecked | Yes/Checked | No/Unchecked | Yes/Checked | No/Unchecked | |
| DESKTOP | SH DESKTOP % of screen height | SH DESKTOP % of width | 50% of screen | 620 | Up to 3440* | 1240 |
| MOBILE | SH MOBILE % of screen height | SH MOBILE % of width | 622 | 622 | 622 | 622 |
EXAMPLE: The image for the 'Section height' MOBILE set to 50% & DESKTOP set to 35% with 'Full width' unchecked:
- DESKTOP: 1240px width with a height of 434px (35% of 1240)
- MOBILE: 622px width with a height of 311px (50% of 622)
* Full width images will assign the image files actual width up to 3440px. Based on your analytics, you may opt to choose a smaller image. Many times, 1900px will be sufficient. No matter the size, the code will ensure the image fits the container, but smaller image quality may suffer on larger screens
Mobile Collections
A static image that will use the dimension of the image height, but it is recommended to use a width of 40px
Testimonials
A background image will be cropped inside a 100x100px circle
Video
A background image can be assigned as a video placeholder:
| Height | Width (px) based on columns | ||
|---|---|---|---|
| 1 | 2 | ||
| DESKTOP IMAGE | 56.25% of width | 1240 | 620 |
| MOBILE IMAGE | 56.25% of width | 768 | 768 |
EXAMPLE: The image for a 2 column block:
- DESKTOP: 620px width with a height of 349px (56.25% of 620)
- MOBILE: 768px width with a height of 432px (56.25% of 768)
Product
Featured Product Images
To provide a good zoom but keep file sizes low, it is recommended to use images with a minimum width of 1024px. This will accommodate the product page, all product grid settings, and the mega menu
Custom Variant Images
40x40px
Collections
Collection Image
The minimum width is recommended to accommodate the collection page, collection list page, sections and the mega menu:
| Setting | Style | Height | Width (px) based on Products Per Row | |||
|---|---|---|---|---|---|---|
| 2 | 3 | 4 | 5 | |||
| Small | Background | 25% of width | 902 | 902 | 925 | 902 |
| Medium | Background | 50% of width | 902 | 902 | 925 | 902 |
| Large | Background | 75% of width | 902 | 902 | 925 | 902 |
| Original Aspect Ratio | Static | Image height | 902 | 902 | 925 | 902 |
EXAMPLE: The image for a section 'Image height' set to 'Medium' and 'Desktop products per row' set to 3 would have the following dimensions: 902px width with a height of 451px (50% of 902)
Promotional Image
The Promotional Image is a background image cropped to the following dimensions::
| Height varies depending on the 'Product Per Row' setting and the amount of product grid text for the title, price or metadata * | Width (px) based on Products Per Row | ||||
|---|---|---|---|---|---|
| 2 | 3 | 4 | 5 | ||
| DESKTOP IMAGE | 610 | 400 | 295 | 232 | |
| MOBILE IMAGE | 610 | 441 | 441 | 441 | |
* It would be best to measure this height using browser tools at a screen size greater than 1280px for desktop and a screen size of 959px for mobile
Filter Swatches
40x40px
Blogs and Posts
The article featured image has options for the image height. It is recommended to start with an image of at least 1240px wide to accommodate the blog category, section and article page:
| Setting | Style | Height | Minimum Width |
|---|---|---|---|
| Small | Background | 25% of width | 1240px |
| Medium | Background | 50% of width | 1240px |
| Large | Background | 75% of width | 1240px |
| Original Aspect Ratio | Static | Image height | 1240px |
EXAMPLE: The image for a section 'Image height' set to 'Medium' would have the following dimensions: 1240px width with a height of 620px (50% of 1240)
Images embedded in the content should have a max-width of 768px. This will allow the images to 'overlap' the content column
Pages
Page templates have a max width for the content of 640px
Theme Settings > General > Gift Card
A minimum of 600px wide is recommended
Theme Settings > Favicon
48x48px
Theme Settings > Checkout
Banner
1000 x 400px
Logo
There are 3 sizes available, each with a max height:
- Small: 40px
- Medium: 60px
- Large: 80px
Image Calculator
(Height setting)% of (Minimum width) = Recommended height (px)