Jan 26, 2022
Whenever I’m doing Speed or SEO optimization for a Shopify store, I always start with checking the images. And usually I will find at least one or two images on the homepage that are way too heavy, and also missing SEO details like alt text.
There are many factors involved in loading speed and SEO, but fixing images is the absolute easiest thing you can do.
I’m going to explain the steps you should take in-between getting the photo from your camera (or photographer) and uploading them to your store.
I will also show you how you can bulk optimize the images that are already on your store, by using an app called Crush Pics.
You should be aiming for around 400kB for large images that take up the whole page and much less than that for any smaller images that don’t take up the whole page.
As a general rule - JPG images should never weigh more than a megabyte. If they do weigh more, then you need to compress them. And the image dimensions are probably too large (more on that below).
As for PNG - if you are using them for their intended purpose (see JPG vs PNG section below) then they will have a small file size, usually under 100kB for things like logos.
The one exception is if the image is a photograph with the background removed. In this case you will need to use PNG and the file size will likely be over a megabyte in size.
Understand that with this type of design, you are trading your loading speed for aesthetics. You can still compress these images though.
Let's get started.
JPEG or PNG? Do you know the difference and when to use each?
If not, I highly recommend watching my video on this exact topic.
If you don’t have time to watch, here is the summarized version:
If this all made sense to you - great! But if you want some real-life examples and more details, you should check out the video above.
The most common mistake I see on many Shopify sites is to save photographs as PNG when they don’t even need transparency.
This results in each photo weighing at least 2MB, when they should have been saved as JPG, and then they will weigh only around 300kB.
If you need to convert a PNG to JPG, I recommend a free tool called https://squoosh.app/. I will talk more about this tool below.
There are two main types of images on your Shopify store:
For product images don’t worry about the size. You can upload very large images because Shopify does something called ‘image scaling’. This is where it knows what size image your customer needs.
So basically the full size image you upload will exist on the Shopify server, and it will automatically load a smaller image for anyone browsing your store. So your customer won’t have to download a huge one.
However, there is no reason to upload ridiculous sizes like 10,000 pixels width. Usually around 2000px width is the most you would want for product images.
For theme images, you sometimes do need to pay attention to the pixel size, because sometimes images won’t be scaled. The largest images on your site will usually be hero images - full-width and used as the first section on the home page - and these usually need to be at least 1200px width, but usually not much larger than 2000px.
You also still need to optimize or compress those images first, to get the file size down. You don’t want to be uploading pictures that are several megabytes in size.
Alright so this part is the easiest but also the most time-consuming if you do it manually. So I'm going to explain the manual way and then the faster way.
These are both free tools that compress your images. Just drag them in and then download the compressed version.
Personally, I prefer Squoosh for a few reasons:
On the other hand, the advantage of TinyPNG is that you can drag in multiple images at a time, (up to 20 images on the free plan). But with Squoosh you need to drag in one image at a time. By the way, you can ignore the name - TinyPNG works for both PNG and JPG images.
Lastly, if you have photoshop you can choose the image quality during export, but I think Squoosh or TinyPNG are much easier/quicker and maybe have better compression.
After compressing your images, you can upload them to your Shopify store.
But what should you do with the images that are already live on the website? Good question! There is actually an app that will compress images that are already on your Shopify store, and it’s called Crush Pics.
If you were to manually compress all your images, you would need to go into each product, delete the old ones and upload the new ones. This would take a long time, especially if you have a large store with a hundred or more products.
Luckily you can automate this process with an app called Crush Pics. It works almost the same way as TinyPNG or Squoosh, except as a Shopify App.
After installing the app it will spend some time analyzing your store to find all the images, after that you can tell it to compress all of them, and it will get started compressing every image on your store, and telling you the before/after size and the percentage saved.
You also have options to choose individually which images will be compressed, and the level of compression used.
The pricing is based on the amount of images you have, more specifically the total megabytes you need compressed, per month. The free plan gives you 25MB, which is enough for about 100 images.
The next plan up is 500MB, for $5/month. This should be more than enough for most stores with up to about 400 products.
If you’re not sure what plan you need, it will actually show you a notification saying how many MB of uncompressed images you have on your store - mine says 558MB, and this is a store with over 700 products.
It is a huge time saver and I highly recommend it.
The two main things you can do for image SEO, and you can do them either manually or automate them with an app.
Many are familiar with this tip and understand its importance. Despite this, they don’t do it because it’s so boring to sit there and come up with short descriptions of your images.
It’s also very time consuming in Shopify. In your admin, you have to go into each product, click on each image to expand it, and fill out the alt text field, then click out, go to the next image, save the product, and so on for every product. There should be a faster way, right?
Not many people know about this one, but yes the name of the actual image file does affect SEO. So don’t leave your images named something like ‘DC123123.jpg’.
The main rules are that they should contain keywords relevant to the image or page, and instead of spaces you should use dashes. So something like “nike-jordan-sneakers-black-red.jpg” will be perfect.
Both of these things are a hassle and a lot of manual work, but you can actually automate both with Crush Pics - the app I was talking about earlier.
How does the app know what text to use? Well it’s pretty smart. It lets you create a template out of various pieces of product information it has access to. So for example - vendor + product title + SKU number.
Once you create this template, you let it run and it will bulk rename your image files, and add alt text according to the template for each.
And it lets you control this by setting the template. Very useful! This makes it a great all-in-one app for image optimization.
That’s all you really have to know about image optimization for Shopify.
If you have any questions leave a comment below, and check out my Youtube channel for more Shopify tips & tutorials.
.jpg)
Have any questions?