There’s no denying that images are some of the most important content in Shopify themes — after all, they’re how your virtual customers see, “feel” and explore your products and business.
Because of that, having the best image quality possible is always — rightfully so — an important factor.
There’s a common misconception that Shopify themes modify or compress the images you upload. While this is untrue, there are, however, some changes that Shopify’s servers make to the files.
Meanwhile, Shopify themes do, however, use special code to access various resized versions of your image files that Shopify’s servers generate.
To understand how images and Shopify work together, it’s first important to understand there are two distinct “sizes” an image can have — the file size or the image’s dimensions.
The file size is just that — how much storage space the file takes up. This can be anywhere from a few kilobytes (KB) to hundreds of megabytes (MB). This “size” has a direct affect on how long it takes to load the image over the internet.
On the other hand, the dimension size is the number of pixels wide and high the image is. While images with larger dimensions generally also have higher file sizes, it’s not always the case or proportional. This type of image “size” is referred to by numerical values, which are expressed as pixels.
Shopify’s CDN
When you upload an image to Shopify, a copy of the file gets created on a specially designed server configuration known as a content delivery network, or CDN (that’s why, if you look at your theme source code, you see lots of references to cdn.shopify.com).
For example, we’ve uploaded a 2048 pixel by 2048 pixel product image to the Out of the Sandbox Shopify store, and Shopify creates its copy of it at https://cdn.shopify.com/s/files/1/1126/4122/products/sample-image.jpg.
There are plenty of advantages to using a CDN — your image files are automatically distributed to servers across the world and then, the server closest geographically to your customer sends the image (believe it or not, despite how fast the internet is, traveling long distances can add small delays that can add up quickly).
Images can also be cached, or temporarily stored on servers within the CDN, which can also improve loading times.
Normally setting up a CDN is complex — but with Shopify it’s all taken care of for you without requiring any changes to how your site is coded or configured.
At this time, Shopify doesn’t support using your domain or subdomain to serve images or let you control the various numbers in the URLs except for the dimension ones mentioned below.
Shopify’s image resizing ‘magic’
Shopify’s CDN also has a “magic” feature that lets it provide versions of your original image at a variety of sizes and formats — on demand and without any actions on your part.
For example, by adding “_200x200” to the end of the filename (but before the extension), Shopify’s server will take the original file and resize it to a 200 pixel by 200 pixel square — without requiring any image editing software: https://cdn.shopify.com/s/files/1/1126/4122/products/sample-image_200x200.jpg
Shopify responsive image feature
Shopify’s ability to automatically generate multiple image sizes for you comes in particularly handy with the responsive images feature that’s included in most modern Shopify themes, including all of the latest versions of Out of the Sandbox themes when accessed using a compatible browser.
To accomplish this, your Shopify theme will automatically generate a block of HTML that looks something like this:
If look closely, you’ll see a variety of references to numbers that instruct browsers to load image files at the dimensional size that’s best for the particular device the user is on.
In this example, you’ll see the code references image URLs for versions of the original image that are 200, 400, 600, 800, 1,200 and 2,000 pixels wide.
It’s important to note that browsers do not load all of these images (that wouldn’t make any sense in terms of making your site as fast as possible).
Instead, this code, through some more “magic,” knows which image file is best for the device.
For example, if the code detects your user is on a large screen desktop computer with high resolution, it will provide the 2,000 pixel wide version in order to make the image look its best.
On the opposite end of the spectrum, if someone is using your store from an older mobile phone over a wireless signal, it will opt to load to 200 pixel wide version instead since that’s all that’s needed to make the image look good on smaller, lower resolution screens.
And don’t worry — the code takes care of so called “@2x” devices such as Apple devices with Retina displays. If a user accesses your Shopify store with one of these types of devices, the “magic” is smart enough to load an image that’s twice as big as the device screen width so the images renders ultra sharp.
Incidentally, you can also thank Shopify’s CDN for serving images using the more efficient WebP format — without any intervention on your part.
Image compression and Shopify
When you upload an image to Shopify, the servers do perform some light compression on your files.
However, much of this compression is based on the original size and quality of your image file. Shopify’s servers also convert all images to 72dpi, the web standard.
As a general rule of thumb, for best results you should upload the highest quality image you have within the 20MB or 20 megapixel limit but at 72dpi. For product images, Shopify has an additional limit of 4,472 by 4,472 pixels.
However, 2,048 by 2,048 pixels is often cited as an acceptable size if you don’t have access to image files that large.
While it’s unlikely your current users will ever need images as large as the 4,472 pixel limit, using images of this size can be a smart move to help “future proof” your site for device screens that haven’t even been invented yet.
Also keep in mind that, thanks to Shopify’s resizing magic, users won’t ever actually have to load the 4,472 pixel image files (at least not yet).
It’s also worth noting that there’s no way to control how Shopify compresses images. Theme developers also don’t have any way to control this because it’s all handled on Shopify servers that can’t be reconfigured for individual store preferences.
Color profiles and Shopify
Some images are generated with embedded color profiles, which is a fancy way of saying how each color is displayed on screen or, if applicable, printed.
Shopify works best with plain RGB or sRGB color profiles, which are often default for web image editing programs. However, if you use a professional photographer, you’ll want to check with them to make sure they remove or convert any special color profiles (sometimes referred to as ICM and ICC).
Uploading image files with non-standard color profiles can often result in color shifts or changes or, in some cases, even a failed upload.
Shopify image compression, Part II
Before you upload your original image file, it’s often a good idea to run it through some kind of optimization or compression tool first.
This is something that can be done in many image editing programs, including Photoshop, as well as free and paid online tools. You could also ask your photographer for help with this.
Compressing your image before uploading it to Shopify can often result in even more efficient image load times with little to no quality reduction.
Our example image above was originally 491.33KB, but after running it through an image compressor, it was reduced to 83.24KB, a savings of 83% and it looked nearly identical. In contrast, Shopify’s compression reduced the image to 100KB.
While 16.76KB may not seem like a lot — it does, as they say, all add up.
In many cases, by following Shopify’s compression guidelines and using your own software or tools, you can also maintain closer control over how your images look and keep your images as close to your vision as possible.
At the end of the day, there are numerous variables that will affect how your image looks once it makes it to Shopify’s servers — including how it’s used within your theme — so it’s always a good idea to experiment and test to see what works best while also getting file sizes down.
The sky isn’t always blue?
When dealing with web images — even without any compression or color profile issues involved — it’s always important to keep in mind that colors can appear differently on various devices.
Sometimes this is due to “brightness” or “contrast” settings the user has made to their device. Ambient lighting in the room or outdoor space can also affect how colors look — as can the quality of the monitor or screen being used.
Because of this, it’s essentially impossible to get images to always look identical for every user — and this is a limitation of all websites, not just Shopify or Shopify themes.
Custom image dimensions
Some store owners discover that the default image sizes the Shopify theme requests don’t result in the best quality for their store.
It is possible to modify your theme code to “force” it to load files with larger image dimensions which can sometimes help improve image quality.
However, this type of modification is an unsupported customization that you’d have to work with a developer on. Also, keep in mind that this change requires editing multiple files and will also typically result in your pages taking longer to load.
