Images FAQ

If you have come to this page to get a suggested pixel size, we have some recommended sizes.

We highly advise reading through the guide as there are some common mistakes you can avoid and information that you should be aware of when it comes to images in themes.

What size images should we use?

Short answer: As big as you can, and as consistent shape as you can (i.e. aspect ratio). Shopify takes the images you upload and creates different sized versions of them to help with loading and displaying the correct size on whichever device the customer is using.

If your customer is on mobile, Shopify will display a much smaller version than on desktop.

For products, the image is generally not going to be displayed as big as a Slideshow or Banner so you can get away with using smaller images. I will give the suggested sizes below.

Aspect ratio and why it’s important:

To get a better understanding of the aspect ratio and why you should care about it more than actual sizes, I highly suggest watching this short video by Shopify

Shopify has a great little article that explains this concept brilliantly also!

In short, the pixel size doesn’t matter, provided that the aspect ratio is the same.
As a simple example, if you have an aspect ratio of 4:5, the image can be 400px x 500px, and also 800px x 1000px – they are different sizes, but the same shape.
Equally, if your image ratio is square (1:1), you can have any size images with equal length sides – a 300px x 300px image, is still a 1:1 ratio when it’s 1000px x 1000px.

Below is an example of a collection page with images 1&2 having the same aspect ratio but 3&4 having a different one.

As you can see, the images are not of uniform shape, causing the page to extend to fit both ‘portrait’ and ‘landscape’ images in the same row.

 

A theme can do a lot of things, but it can’t take images and make them the same aspect ratio. Here is an example of 4 images being all the same aspect ratio but different sizes when uploaded. So if you follow the rule, you should always have a nice layout regardless of the size image you upload. Just make sure it’s not too small – if it gets scaled up for larger screens, you may lose quality.

Slideshow/banner: recommended 1500(min) x 1000px Full width Slideshow 1500(min) x 500px

Normal Slideshow: Aim for 1500 px wide as a minimum when using a normal slideshow that doesn’t stretch the full width across the page which some of our themes offer. The height is down to your personal preference, but as a starting point we suggest using rectangle shapes for these; aim for a 3 by 2 Aspect Ratio. So if your width is 1500 the height would be 1000. To understand the Aspect Ratio, check out the video guide above if you scrolled past it, which covers it perfectly.

Make sure all your images are the same aspect and size to get a better-looking and consistent slideshow. Experimentation is key here!

If you want your banner or slideshow to be shorter in height, you need to make the height of your image smaller. Try 3 by 1 instead, eg. 1500px wide by 500px height.

Full-Width slideshow: You should aim for a 3×1 aspect ratio of 1500 x 500px as in order to reach the width, you won’t get any of the images cut off.

Product images: recommended 1000 x 1000px (min)

These are generally best displayed in square shapes but again you can use your desired shape, just try to make them all the same Aspect Ratio to get the best look on collection pages. If you use different Aspect Ratios they may look unbalanced.

Collections images: recommended 1500 x 500 or 1000px

Collection images are best following the slideshow/banner method like above but try a 3 by 1 Aspect Ratio. If the theme displays the banner at 1500px by 500px your customers won’t need to scroll too far down the page to see your products.

Blog page images

This is theme-specific really, so my best advice here would be to look at the demo store of your theme and check out the blog section. You should be able to tell if it’s using a square or a rectangle-shaped image.

Favicon images

Favicon images need to be in PNG or ICO file format. JPG files are not supported on any themes.

The ideal size for a favicon is either 16×16 pixels or 32×32 pixels. If your favicon file is too large, then it will be reduced to 32×32 pixels when you upload it to Shopify.

Image cropping on mobile

You have a great banner image that looks amazing on Desktop but when you view it on Mobile, it’s cropped and you would like to show the full image. Sounds simple but there are some things you need to be aware of that may not seem apparent at first.

To help understand why this happens, I suggest checking out this Shopify article that paints a great picture of the reason why this happens and also gives great advice on how you can avoid it. They mention the Slideshow section but this also applies to Gallery and other image-related sections

Good Practice Guidelines for Images

In our themes, you will normally encounter options for image sizes, and one will be fixed height and your go-to thought is the bigger the better, yes if your image is square or taller, but if you are using a banner styled image, you will want to drop the number lower in order for it to fit on the screen.

Below is an example of when the height is nice and low, it can display the full image I have added on mobile

Now here is an example when it is set to a really high number.

It’s just not possible to have it nice and big and show in full. Reduce the size to reduce the cropping on the side.

Supported image formats

Shopify supports the following image formats. Uploading anything else is not going to work. This is something that is controlled by Shopify and the theme has no control over what file types can be used.

  • JPG
  • JPEG
  • Progressive JPG(Info Link)
  • PNG
  • GIF

Click to see full Shopify details on Supported Image Format Types

Image size limit

20 Megabytes is the size limit

4400 by 4400 pixels dimensions limit (Any bigger and you may receive an error from Shopify admin)

Image compression

When you upload images to the admin, Shopify will compress them. This is not controlled by the theme and there is no way to disable this. For details and a breakdown of how much compression happens based on file type, you can check out their support article linked below.

Click to see full details Compression Rates

Blurry/fuzzy images

If you have added an image but when you go to view it on the website and it looks bad. Check the size of the image. It is likely that the image is smaller than the recommended size required or that you are using the Shopify RTE section and set the image size to be too small. What happens is, the admin takes the image and stretches it like elastic. Yes, it can reach, but it won’t look the same. Try uploading a larger version of the image if this happens.

If you are inserting an image into the Shopify text editor, be sure to check the size options because you can double click the image and change the default size here.

Image colour different to original after uploading

Some images can store data known as a colour profile which Shopify may strip out because some devices may not support it. This is not something that the theme has any control over this is again controlled by Shopify.

Click to see more information on the topic of Color Profile and suggestions to help

How to change the Gift Card image

Please follow the Shopify instructions on how to change the gift card image.

Image resizing applications

If you want to make some changes to your images but don’t have access to professional and expensive tools, you can try checking out some of the following:

Resizing in Bulk

Resizes individually

Resizing Images through Shopify Apps

Some useful Shopify blog articles:

Is your awful product photography losing you sales?
Free and paid online photo editor tools for gorgeous DIY product photography

  Worthwhile reading:

Image sizes Theme updates Page speed SEO

  Looking to customise beyond our settings?

Our support covers assistance for your theme and settings as originally supplied.
If our settings don’t include a specific control you’re looking for, you can hire a developer to customise the theme code.

We recommend TaskHusky for altering your theme code:
Click here to request a custom coding quote from TaskHusky.

Be sure to read this article before changing code!