Theres no denying that images are some of the most important content in Shopify themes after all, theyre 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.
Theres a common misconception that Shopify themes modify or compress the images you upload. While this is untrue, there are, however, some changes that Shopifys servers make to the files.
Meanwhile, Shopify themes do, however, use special code to access various resized versions of your image files that Shopifys servers generate.
To understand how images and Shopify work together, its first important to understand there are two distinct sizes an image can have the file size or the images 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, its not always the case or proportional. This type of image size is referred to by numerical values, which are expressed as pixels.
Shopifys 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 (thats why, if you look at your theme source code, you see lots of references to cdn.shopify.com).
For example, weve uploaded a 2048 pixel by 2048 pixel product image to the Out of the Sandbox Shopify store, and Shopify creates its copy of it athttps://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 its all taken care of for you without requiring any changes to how your site is coded or configured.
At this time, Shopify doesnt 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.
Shopifys image resizing magic
Shopifys 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), Shopifys 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
Shopifys ability to automatically generate multiple image sizes for you comes in particularly handy with the responsive images feature thats 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, youll see a variety of references to numbers that instruct browsers to load image files at the dimensional size thats best for the particular device the user is on.
In this example, youll 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.
Its important to note that browsers do not load all of these images (that wouldnt 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 thats all thats needed to make the image look good on smaller, lower resolution screens.
And dont 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 thats twice as big as the device screen width so the images renders ultra sharp.
Incidentally, you can also thank Shopifys 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. Shopifys 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 dont have access to image files that large.
While its 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 havent even been invented yet.
Also keep in mind that, thanks to Shopifys resizing magic, users wont ever actually have to load the 4,472 pixel image files (at least not yet).
Its also worth noting that theres no way to control how Shopify compresses images. Theme developers also dont have any way to control this because its all handled on Shopify servers that cant 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, youll 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, its 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, Shopifys 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 Shopifys 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 Shopifys servers including how its used within your theme so its always a good idea to experiment and test to see what works best while also getting file sizes down.
The sky isnt always blue?
When dealing with web images even without any compression or color profile issues involved its 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, its 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 dont 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 youd 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.
