by Daniel Sim
Offering unlimited image storage on all plans, Shopify sounds like a great place to store all of the master image assets related to your online store. However there are some things you should be aware of before you do.
Before you clean up your hard drive or cancel your online photo storage account and move everything to Shopify take a look at our guide.
20 megapixel image upload limit
Let's take this high resolution image and upload it to the Files section of our Shopify admin.
First potential downside: if your images are larger than 20 megapixels you'll have to reduce them to be able to upload. 20 megapixels is a lot, but for unedited image files direct from a camera it isn't unusual.
That's a very generous limit given most images uploaded to Shopify will be displayed on the web where we get nowhere near to 20 megapixels. But if you're concerned that you may want to do heavy editing of the image in future there's a small chance resizing it could limit the final quality.
Shopify strips image metadata on upload
Every image contains a bunch of metadata: things that aren't part of the image but are data about the image. Image metadata can include a lot of useful information like the date and time the photo was taken, how the camera was set up, geolocation and more.
Shopify removes all of this image metadata when you upload. Why? Image metadata can get big, increasing the size of the image file requiring extra storage and download time for your shop visitors.
This metadata is often useful if you want to find out more information about the image in future. Metadata can also include tags to help you organise image collections. All of this will be deleted when you upload the image to Shopify.
An image's colour profile is removed
Colours appear differently on different devices and displays. Colour profiles are used during the photographic process to make sure that an image's colours appear as desired across displays.
An image has its own colour profile associated with it, but all images on the web use the same one: sRGB. Since the colour profile takes up space and is redundant for images displayed on the web, Shopify removes it on upload.
However if you might want to use the image in print in future or edit it, the loss of the colour profile can lead to a degraded result there.
What about compression? ...a surprising result
As you may know, image compression is where the filesize of the image is reduced in either a lossy or lossless way.
Lossy compression gives us much smaller files than lossless but we 'lose' some of the pixel definition (for example, blending similarly coloured pixels together to a single colour).
Lossless is where the pixels are unchanged.
The TL;DR is that yes, surprisingly Shopify does compress uploaded images in a lossy way. However the compression is minimal. It doesn't result in visible-to-the-human-eye differences. It also doesn't achieve as large as a reduction in file size as you can get using lossy compression in an app for speed optimisation.
That said, images uploaded to Shopify are compressed in a lossy way meaning the pixels are altered from your original.
This is where it gets quite interesting and a bit geeky.
We'll take this high resolution image again and resize it to just under 20 megapixels so it can be uploaded to Shopify.
Now we download it from Shopify and compare it with the original using Beyond Compare. This tool compares the images pixel-by-pixel and gives us a coloured picture of all of the differences. If the images are the same the picture will be grey.
As you can see, the image of the differences isn't grey, meaning that pixel-by-pixel the image after being uploaded to Shopify is different.
Could it be the removal of the metadata / colour profile or for some reason lossless compression that is making it appear differently?
We can test that by using a utility called jpegtran. This lets us strip all of the metadata and colour profile without applying any compression: lossy or lossless.
No difference. The image stripped of metadata and colour profile by jpegtran is identical to our original. This confirms it must be some kind of compression Shopify is applying.
Now let's try lossless compression. We'll use ImageOptim for this.
Again, no difference in the image after lossless compression has been applied to it.
Our conclusion then is that Shopify lossy compresses images on upload. But why? I don't have a definitive answer for this but I have a theory.
One of the most popular image optimisation utilities is ImageMagick. I found during this investigation that using it to just strip metadata and colour profile inadvertently results also in lossy compression of a similar light magnitude to Shopify!
Here's the difference between our original and the ImageMagick stripped image.
The difference with the ImageMagick stripped image looks similar to the difference that we saw from the Shopify uploaded image. The final file sizes are also very similar.
Under the hood it could be that Shopify uses the same or similar libraries (shared pieces of code) that ImageMagick does.
Digging around I found a discussion of this lossy compression side effect of stripping in ImageMagick.
The lossy image compression that Shopify uses is indeed light touch and further speed optimisation is possible with a purpose-built image optimisation app for Shopify.
Should you store your master images on Shopify?
With a backup service you'd expect the master images to be stored unchanged. As we've seen, on Shopify that isn't the case.
- You may have to reduce the image size
- Meta data is stripped
- Colour profile is stripped
- Light lossy compression is applied
If you can live with these compromises then you could save some pennies by storing your images on Shopify.
But in my opinion it's much better to use a proper image backup and storage service and save copies of images on Shopify.