One of the things we've been doing a bit of recently is optimisation reports for Shopify stores. This is where we look at how a site is performing and then make suggestions on how to improve the page load speed with the goal of a better user experience and an increase in sales. In doing this we've started seeing a few trends, one of which is how images are optimised, or more to the point: how images are not being optimised.
Really good image optimisation does require a few steps. However, with a proper workflow it is possible to make considerable performance gains and still keep the quality of your images super high. So I'm going to show you my workflow and include a couple of tricks I've learnt along the way, which will help you to squeeze the most out of your images while still looking amazing.
I'm going to break this workflow down into two main steps:
- The things you'll need to do before uploading your images to Shopify.
- The things you can do to get the best results once you start uploading them to Shopify.
To start off you'll want to have the best quality, highest res image that you can get. The bigger they are the better.
It's also important to know where your image is going to be used on your site and how big it's going to be. If it's a large full-bleed banner we will have less room to move when it comes to tweaking the quality than we will if it's a product shot that is only going to be shown at 600px wide.
A note on file types: We are going to create JPG's because they are the best suited file type for photos. PNG's are only recommended if you absolutely need transparency, even then you should try to make the background colour match its intended surroundings and save out your image as a JPG. JPG's will generally give you smaller file sizes than a PNG. GIF's are only recommended for animations. If your image is vector artwork or line drawing these should be created as SVG.
The pre-Shopify workflow
To begin you will need:
The first thing we are going to do is to open our image in Photoshop. Head to the 'Image' menu and select 'Image size'. We are going to resize the image so that the longest side is 2048px. If the image is landscape that will be the width, if it is portrait then the height.
The reason we set it to 2048px is that this is the biggest image that Shopify will give back to us when we use it on the website. Any smaller and we won't get the gains we want or retain the quality. Any bigger will be overkill. This also means that should we need to get a bigger version of the image then we have access to it.
Next you'll want to go to the 'File' menu and open Photoshops 'Save for web' function. In newer versions this may be under 'File' > 'Export'.
We are going to set the output to JPG if it isn't already. Before we make any changes, at 100% quality, the file size is around 2.5MB. So how do we make this better?
Check the 'Progressive' option. This will help with how the image is loaded onto the site and also shave a little bit off the file size.
Now here is my first trick: we are going to add a blur of 0.2%. This has effect of shaving a little more off the file size while not noticeably reducing the quality.
So far the adjustments we've made have not done that much, they have given us a little bit of a win, but nothing to get excited about. However, I'm about to show you the real magic trick to all of this. Are you ready? …Drop the quality slider down to 15%.
Wait, what?! Now our image looks stink! Yes, it does.
But if you look at the file size it has dropped from around 2.5MB to less than 250KB. That's huge, so let me explain the method behind this madness:
Unless this is a large full-bleed banner our image is not going to be viewed at 2048px tall when it's on the website. When we scale down the images width and height to what it will be viewed at the pixels compress. For every 1 pixel in the screen you now have 2 or 4 pixels from the photo. When this happens all the nasty compression artefacts are no longer visible and the image—at least to the eye—looks like it is very high quality again. You can see this at play if you change the zoom setting in the 'Save for web' window to 25%–30%. Magic!
Now that we have set the zoom to be close to the size it will be viewed at on the website we can tweak the settings even further. For my image I've pushed the blur to 0.5% and the quality down to 10%. This takes our image size down to about 200KB.
If it is a large full-bleed banner then you may need to bump your quality back up. There will be some gains but they won't be as massive.
Save out your image.
Once this is done, drag your image into Image Optim to squeeze out that last little bit of performance. Your milage may vary, but even a couple of percent is better than nothing. Even when we have a few images on the page it all adds up.
Uploading to Shopify
We are now ready to upload our image to Shopify, so go ahead and do this.
Shopify will also do a bit of optimising to your image as it's uploaded. I've taken two copies of the same image. One has been output with no optimisations and at 100% quality, it's around 2.5MB in weight. The other is our highly optimised low quality image weighing in at around 200KB. They both have the same width and height: 2048px tall.
The unoptimised image now becomes about 1MB or 1008KB, thats less than half of what it was before uploading. Good, but nowhere as good as we can get.
The highly optimised image, well… for some strange reason that puts on weight. It becomes 489KB.
Why does this happen? I don't actually know. But it doesn't matter, 489KB is still way better than 1008KB. Moving on!
Setting the right width (or height)
As I said earlier the images are not going to be viewed at their original size, so we need to set them to the largest size that they will be viewed at. In my case it's 415px wide by 625px wide.
The way this is set will depend on if your image is going on a product, a page, or a blog post. Sometimes it will be done inside the theme code and sometimes you'll be asked to pick a size when you place it into your content. If the size is being set in the theme code now might be a good time to check with your developer if you are using the responsive images
srcset attribute and the
format: 'pjpg' parameter in the images Liquid tags.
At the right size our image is now only 70KB and when viewed side-by-side with the non optimised image there is barely any quality loss. For the performance gains we've made I think this is more than acceptable.
But my images don't look good on retina screens?!
Ahh yes, when viewed on Retina and other high pixel density screens the compression artefacts are visible again. We can fix this by doubling the size of our image and having it scale down to our viewed size. This uses the same principle as before where there are more pixels in the image than what are being shown on the screen. Where it was 625px tall before, our image is now 1250px.
Again, how you do this will depend on where your image is being used. If you are picking a size when adding it to the content, select the bigger size. If it's being done in the theme then you can add the
scale: 2 parameter to the images Liquid tags.
In the end our image is 261KB when loaded and has no visible loss of quality.