6. Vantage Theme: Understanding Image Sizes and Ratios
The Vantage Theme will adapt to a diverse range of image sizes, each store may vary but as a guide, the following image sizes will render good results for most users. In this article, we will go through the different images throughout the theme with suggested sizes/ratios.
Our themes let you create a slideshow of images on your homepage. You can set the rotation frequency, and provide text over the slideshow image that links to a page in your store. Slideshow images should always be landscape orientation (wider than they are tall). The height of the slideshow on your site is completely dictated by the height of the tallest image you use.
To avoid the extra white space below an image you must make all your slideshow images the same ratio (or size).
The + content within the slideshow section will allow for 2 different slideshow images
- For these two features, we recommend a 2000px x 1200px image as a recommendation, feel free to test this feature with your preferred images. These recommendations are based on the image sizes used within our theme demos.
- This feature will work best with landscape style images, using portrait style images can scale very tall and do not present in an aesthetically
There are no fixed heights for images, the width is an important factor in order to ensure high quality. You can use any height images that you would like. When using more than 1 image within a row of images, however, it is imperative to make the images the same height to ensure a grid layout is maintained. Here are some suggested sizes…
- 1 image - 1600 x 900px (W x H)
- 2 images - 900px x 600px (W x H)
- 3 images or more - 600px x 400px (W x H)
Keep in mind that each image in the gallery has a % scale option now which can allow for some images to appear larger as the demo seen here we used more square images at 1280 x 1280
Blog post featured images
Landscape images will always look better, 1200px wide x any height you like here.
To ensure a high quality of product images across the site and to ensure that the zoom function on your product pages can display at a satisfactory level we suggest using the following sizes for product images…
- 650px x 1000px (for horizontal images)
- 1000px x 650px (for vertical images)
- 1000px x 1000px (for square images)
The featured in images used within our theme demo is 900px x 300px. You can experiment with smaller sizes as long as they are the same size you should find this works as intended.
We strongly recommend using similar image sizes with images of the same category as this will help them appear uniform across all pages and devices. If you need help cropping your images check out our tutorial here.