Compressing and optimizing images on Shopify is simply reducing their file size. Rather than your customer having to wait to download a bunch of large images, optimizing them means the images are downloaded and displayed faster, giving them a faster browsing experience.
There are two different ways the file size can be reduced: 1) removing information from the file and 2) reorganising the file. We’ll look at both along with the various options you have to optimize your images.
Removing Information From The Image File: Metadata
An image file is not just the pixels you can see, it is also additional data that includes general information about the contents, and directions about how the picture should be displayed or edited.
The general information might be the date and geographical location a photograph was taken, the camera and settings used to take it, software that manipulated it and more. This could be useful for your reference but isn’t required by your site visitors.
In the metadata there is also sometimes directions about how the image should be displayed or edited. Most often it’s a ‘colour profile’. This is used to standardise how the colours in an image look across different screens.
Removing a colour profile from your images may change how they look on your computer. But it is best practice to remove colour profiles for web images.
All metadata can and should be removed from an image file for use on the web. Doing this reduces the file size without your visitors seeing anything different.
Removing Information From The Image File: Lossy Compression
An image file is made up of rows and columns of pixels. Putting it simplistically the file contains data like row 1 column 1: red, row 1 column 2: darker red, row 1 column 3: blue, and so on down all of the rows and columns.
Lossy compression works by grouping similar (but not the same!) colours of pixels together. Some colours are so similar that the human eye cannot see the difference. The lossy compression process sees a row of 100 slightly different red pixels like this- row 1 column 1: red, row 1 column 2: darker red, row 1 column 3: lighter red. It replaces it with a single- column 1: red.
In this way we lose information about all of the slightly different reds in column 1, but since the differences may be not visible to the human eye there is no point to having it. It just takes up space.
An image can be compressed at different levels of lossy from a large file size with almost no loss of definition (or quality), down to the smallest file size with lots of definition lost.
Reorganising The Image File: Lossless Compression
As we looked at above, an image file is a grid of pixels. Lossless compression works by looking for repeated patterns in that grid and replacing the pattern with a reference.
Let’s say an image has the pattern red, dark red, dark red, red repeated 16 times throughout the image. Lossless compression can call this pattern ‘pattern 1’ and replace all occurrences of that pattern with ‘pattern 1’. When the image is displayed it appears exactly the same. The image file is reduced in size without any loss of definition.
An image can be compressed at different levels of lossless. Whatever level is chosen no definition is lost. The difference is the time it takes to compress the file: higher levels of lossy take longer to process (finding these patterns) and can result in smaller files.
How To Optimize Images On Shopify
Option 1: Manually With Desktop Software
If you already have lots of images in your Shopify store it could take a lot of time for you to download, optimize, upload all of your images. This manual option works best if you are just starting a store and don’t mind the extra couple of minutes to run your images through this software before upload.
Option 2: Automatically With A Shopify App
For a fee there are Shopify apps that can optimize your images automatically including ours, Plug in Speed. Search ‘image optimization’ in the Shopify App Store.
These work by automatically optimizing existing and new images in your shop. Generally the apps offer a choice between lossy or lossless, a way to see the image before and after, and backups of your original unoptimized images.
If you want to experiment heavily with lots of the granular options available in image optimization algorithm software, a Shopify app may not be for you. If you are looking for the best optimization without manual work and the price is reasonable a Shopify image optimization app could work well.
Option 3: Automatically With A CDN
A Content Delivery Network (CDN) is a network of servers around the world dedicated to serving ‘static’ content (content that doesn’t change per user like an image, rather than ‘dynamic’ content that does change per user like their shopping cart). A CDN aims to serve this content faster than just a single server in a single physical location could by copying it into different servers in different countries around the world. If you are in Japan your image is served from the Japanese server, Canada and it comes from Canada etc.
Shopify already serves all of your content from its fast worldwide CDN for no extra charge. Why we’re talking about CDNs for image optimization is that some CDNs can also manipulate the original static content to optimize it.
There are CDNs available that can optimize your images automatically. For example, let’s say we have yourshop.com/images/bird.jpg. We use a CDN provider ‘mycdn’ and turn on their image optimization feature.
Rather than the image URL being on yourshop.com it can point to yourshop.mycdn.com/images/bird.jpg. This image is automatically fetched by the CDN, optimized and then served to the user.
For this to work we need to change the image URLs in our Shopify store from yourshop.com to yourshop.mycdn.com. This can be done either by editing your theme templates or pointing our entire yourshop.com at the CDN rather than Shopify.
A drawback to a CDN solution is that sometimes they can be slower than serving the file from Shopify since they first have to fetch the image, optimize it and then serve it. This can be an issue the first time an image is requested.
Initial setup of a CDN optimization solution could involve the cost of a developer making changes to your theme.