Image guide
The size of your uploaded images can help ensure that they're high quality, load fast, and look good on all devices. Below you will find recommendations for image dimensions, file size, and image orientation.
Ira also includes a number of image settings to help adjust your images in the theme editor to get them looking their best for desktop and mobile.
Image dimensions (how many pixels tall or wide?)
We recommend uploading images with a minimum width of 2048px.
In general, Ira does not have required image dimensions for product or feature images, unless specified in the theme editor. However, Shopify automatically resizes all images to fit your customers' devices, so uploading images with a minimum width of 2048px will ensure optimal quality and avoid any pixelation.
File size (how large should the file be?)
Feel free to upload image files as large as Shopify can handle.
Shopify can host image files up to 20MB and will automatically resize images to balance speed and quality. While larger image files don't necessarily mean higher quality images, you can be sure they won't impact your site speed.
We recommend keeping video files (.mp4) to less than 10MB for best performance across all devices and internet connection speeds. Autoplay videos that are short — around 5 to 10 seconds — work best overall, which will limit your .mp4 file size.
Image orientation (what's the best shape to use?)
There's no single image orientation or shape required for product or feature images.
In general, Ira handles all image orientations and will adapt accordingly, whether your images are Square (1:1) (equal width and height), Landscape (3:2) (width greater than height), or Portrait (2:3) (height greater than width).
Learn about Ira's Image aspect ratio setting below, which lets you crop your uploaded images to a single uniform shape.
That said, here's a few recommendations for your uploaded images:
For product images, often the best orientation to use is square (1:1) or portrait (2:3). But above all else, consistency is key: select one orientation or shape for your product photography to keep product grids looking uniform and professional.
For feature images, often the best images are landscape (3:2) or square (1:1). We recommend avoiding portrait images for sections that span across the page, such as the Slideshow and the Images with text sections. Portrait images in these areas may look stretched, oversized, and force customers scroll down to see the whole image.
With exception, you will find recommended orientations for the following features:
Slideshow
Landscape (3:2) or Square (1:1)
Featured products
Portrait (2:3) or Square (1:1)
Image with text
Portrait (2:3) or Square (1:1)
Contact page image
Portrait (2:3)
Popup background
Landscape (3:2)
Video featured image
Landscape (3:2)
Image settings available in Ira
In Ira, most feature sections include some image settings to adjust their size or shape and help your images look great.
The Image aspect ratio setting lets you crop your uploaded images to make them all Square (1:1), Landscape (3:2), or Portrait (2:3). You can select the Natural option to show all images with their original orientation.
Below is an example of how the Image aspect ratio setting can make your product photos with different original orientations look uniform and consistent.
See our articles about the Slideshow, Carousel, Image with text, and Text columns with images sections to learn about additional image settings for Mobile-specific images, Image height, and Image width.
Below you'll find a list of image settings available for all Ira features and sections:
Logo
Custom logo size (70px - 370px) Recommended: set custom width to actual logo image width.
Blog pages
Image aspect ratio
Collection image
Image position (focal point)
Collection product grid
Image aspect ratio
Collection list
Image aspect ratio
Recommended Products
Image aspect ratio
Blog posts
Image aspect ratio
Collection list
Image aspect ratio
Featured collection
Image aspect ratio
Carousel
Mobile Height
Gallery
Image aspect ratio
Image with text
Media width (1/2 or 2/3) Media position
Slideshow
Mobile image Height (Desktop and Mobile)
Featured products
Image position (Left or Right)
Text columns with images
Max image width (slider)
Templates
Theme Settings