Online shopping is very visual. It is incredibly important that you have great images on your store. When it comes to Shopify product images sizes it can be a bit confusing but it is important that you plan out your image sizes from day one.
Themes vary greatly and how and where product images are displayed also varies quite a bit.
Most themes will display product images in a square format and that is what we will stick with. You could find the odd theme that have portrait image formats but the challenge with this is that if you ever decide to switch back it will be a nightmare to edit all images.
What is the Perfect Shopify Product Image Size?
The “perfect” Shopify product image size is 600px x 600px at 72dpi (I usually stick to 150dpi because I want to use these images elsewhere and 72dpi is too limiting).
Some themes will display 800px x 800px but to be as flexible as possible I recommend you stick to 600 x 600.
Shopify actually has a limit on the product image sizes you can upload.
In terms of file types, it is recommended that you use JPG instead of PNG as PNG files tend to be much bigger in size.
The size of your product images is a big deal since it accounts for much of the load speed on your product pages.
A fast store converts better.
It’s as simple as that. Shoppers are impatient and if your product pages load slower than 3 seconds it will start hurting your conversion rate.
Optimizing Your Shopify Image Sizes For Faster Load Times
If you have products with a lot of size and/or colour variants then you could quickly build up a huge amount of images on your store. Just 10 products in five sizes and with five colours will be 250 images.
Keeping your files sizes as small as possible is incredibly important. This is where image compression comes in.
Image compression allows you to compress the files sizes without losing (much) of the image quality. On average, image compression will lower your files sizes by 30% and this can make a huge difference in how fast your Shopify product pages load.
The easy way to do image file compression is to simply add an app like Minifier. Set it to automatically compress all new images and your job is done.
If you are afraid of the app overspending then you can do it manually. It will always only compress new images so there’s no risk of re-optimizing images.
It will also keep backups of the original image in case you need to do a rollback if the quality of the images are too bad.
To be honest, the quality is still more than good enough and this is not something you need to worry about. Your main concern should be to reduce the image sizes as much as possible since speed is the name of the game.
Optimizing Other Images on Your Store
Most of the image compression apps on the Shopify App store will only compress product image sizes.
Home page images and especially slider images on your home page could well be un-optimized and slow your site down significantly.
With full-screen featured images they can be huge files – and they need not be.
You can optimize these images yourself (for free) using a website like Optimzilla. Just upload your images, compress them and re-upload back to Shopify.
Its a bit of a hassle but well worth it.
Using Gif Images on Your Product Pages
Using animated Gif images on products pages has become a bit of a trend. Using short video clips in Gif format can be great to quickly explain how a product works.
An image truly is worth a thousand words – especially if its a good Gif.
The problem is that Shopify does not really support Gifs. So, how do you upload a Gif image to your Shopify store’s product pages?
You have to host your Gif image outside of Shopify. This is quite easy since there are a ton of image hosting sites that will allow you to do this.
But, firstly you need to optimize your Gif images. They tend to be large files and it can really slow down your product pages – use them sparingly.
To do, this head over to ezgif.com.
It gives yu a lot of option to create gifs from video’s, cut, crop and optimize your Gifs for optimal performance.
Play around with all the different settings they have and try and get your file sizes down as much as possible.
Once the size and quality is acceptable, download the Gif to your computer.
Head over to your favourite image hosting site. I prefer Amazon S3 because it is so fast. Once you’ve uploaded the Gif image, grab the URL of the image and go back to Shopify.
In Shopify, go back to insert image but instead of trying to Upload it from your computer, select the URL option. Simply paste the URL of your hosted Gif image here.
Then, upload the image to your store’s product page by selecting the file by URL option.
Done! You have your perfect Gif image on your Shopify product page.