Venue - General - Optimize your image sizes and ratios

A word about image sizes

Before we get into specific pixel sizes it's important to note:

Our themes are responsive so image containers will change shape as your store is viewed on different devices and different orientations. This guide is more aimed at desktop resolution but will translate well into mobile resolution too.
The following images are the minimum recommended sizes - images smaller than this might look pixelated. The Shopify platform and our themes will automatically resize large images if needed, so, for example, you can use a 2048x2048 product image without any issues.

Minimum recommended image sizes

Product images - 900x900 if you opt for a 1:1 ratio, otherwise 900 wide by whatever height you prefer.
Blog post featured images - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here.
Images in the body of post and pages -1200x675 if you are opting for 16:9 ratio, otherwise 1200 wide by whatever height you prefer. Square 1:1 ratio works well in posts & pages too so 1200x1200. Pro tip: when inserting images into a page or blog post use the 1024x1024 preset to make your images fill the full width of the page/post.
Collection images - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here.
Collection list - These will be automatically generated from the Collection images (as above). Pro tip: You can override the collection images used in this section in the theme editor - 800x450 for 16:9 ratio, otherwise 800 wide by whatever height you prefer.
Image grid with text - This section is very flexible so 1400 wide by whatever height you prefer. Pro tip: 'Image with grid' utilises background images and as such is using a piece of CSS called ‘background cover’. This means that the image will adapt to whatever device it is being viewed on and at whatever orientation. Sometimes. depending on the device, some images won't display the left and right far edges. We don't recommend using 'graphic' images with embedded text in this section.
Image slideshow - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here. Pro tip: This section maintains the original ratio of your images whatever device it is viewed on - so is good for graphics and images containing text.
Image with text - 800x450 for 16:9 ratio, or 800x533 for 6:4 ratio which also works well here. Try and make all images used in this section the same ratio.
Image with text overlay - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here. The inline image which sits on top of the background can be any ratio but we recommend you upload an image at least 800px wide.
Slideshow - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here. Pro tip: This section has a 'Mobile image' upload option. You can select a alternative image for mobile devices and choose your preferred image alignment. 800 width recommended. PLEASE NOTE - from version 4.8.3 the slideshow displays your images using ratios which prevents unwanted 'cropping'. Please see the article linked at the bottom of this page.
Featured product - this is generated automatically from your product images and so 900x900 if you opt for a 1:1 ratio, otherwise 900 wide by whatever height you prefer.
Events - If you are linking to your Eventbrite feed, images are pulled automatically from Eventbrite. If you are using the 'manual' events then 800x450 for 16:9 ratio, or 800x533 for 6:4 ratio which also works well here.
Delivery - 1400x788 if you are opting for 16:9 ratio, otherwise 1400 wide by whatever height you prefer. Landscape ratio images are best here. The logo image which sits at the top of the text and heading can be any ratio but we recommend you upload an image at least 800px wide.
Map - This section allows you to upload an image which replaces the 'live' map. We recommend 800x533 for a 6:4 ratio.
Text columns with images - 400x400 if you opt for a 1:1 ratio, otherwise 400 wide by whatever height you prefer.
Video gallery - The images are automatically generated from your thumbnails on the YouTube site. We will soon adding the ability for you to select a alternative image so you don't have to depend on the YouTube thumbnail.
Custom content - You can upload any image size and ratio. As stated above, Shopify stores often look much more professional when you use the same ratio for certain groups of images. So if you you are adding three images here make them all 16:9 or 6:4.

Images still pixelated?

Sometimes the Shopify image compression can be a little over eager with certain images, particularly those with graphics and text. Try saving your image in the PNG format rather than JPEG and re-uploading. However PNGs are usually much bigger in file size so use a service like Tiny PNG https://tinypng.com/ to reduce file size where possible.

Image ratios

Shopify stores often look much more professional when you use the same ratio for certain groups of images - mixing image ratios is often much more problematic than mixed image sizes.

You can edit your image ratios, particularly the white/transparent 'canvas' that the image is sitting on in Photoshop or a similar program.

For example:

Keep all product images the same ratio - 1:1 square ratio works well, or 4:3 always looks great too. This will keep your 'grids' such as your collection pages more uniform and stop your product page slideshow jumping as it resizes to fit different ratios.
Keep all header and slideshow images 16:9 or a similar wide ratio
Keep all 'featured' images used in the blog post headers 16:9 or similar wide ratio
Try to keep all images used in the 'Image with text' section 6:4 or similar

White space around products

Fixing mixed ratios

You might take the design decision to make your product grids asymmetric and non-uniform by using different image ratios. Or perhaps you don't have the software or design skills to make your product images a uniform ratio. We have added a piece of software called 'Masonry' to help in these instances. Please refer to this article for more on this : Make mixed ratio product images more compatible

If you need any advice about images please send an email to support@safeasmilk.co