Pratikkumar P. Gaikwad | 05 min read | Nov 28, 2019
The truth about how Shopify themes handle and convert images
There is no denying the fact that the pictures are one of the most important ingredients in Shopify themes — that is how your virtual customers see, feel and explore your products, services and business.
Because of this, having the best possible image quality is always an important factor — understandably so.
There is a common misconception that the images you submit will be changed or compressed by Shopify themes. While this is untrue, certain changes are made to the files by the servers of Shopify, though.
In the meantime Shopify themes use special code for accessing various resized variants of the image files that are generated by Shopify servers.
It is important to understand how pictures and shopify operate together, first of all, there are two different “sizes” the images can have — file size or image dimensions.
How much storage space the file takes up is the file size. This can be from several kilobytes (KB) to several hundred megabytes (MB). This “size” directly influences the time required to load the image through the internet.
On the other hand, the dimensional size is the number of pixels wide and high the picture is. Although images with larger dimensions typically also have larger file sizes, this is not always the case. Numerical values, expressed as pixels, refer to this form of image “size.”
1. Shopify’s CDN
When you upload an image to Shopify, a copy of the file will be created on a specially designed server configuration known as a content delivery network or CDN (that’s why, if you look at your source code theme, you’ll see lots of cdn.shopify.com references).
There are many benefits to using a CDN — the image files are immediately sent to servers around the world, and then the server nearest to your customer geographically sends the image (believe it or not, given how swift the internet is, traveling long distances will cause minor delays that can quickly add up).
Images can also be cached or temporarily stored within the CDN on servers, which may also boost load times.
Setting up a CDN is usually complicated — but Shopify takes care of everything without making any modifications to how the page is designed or installed.At this point, Shopify does not enable the use of your domain or subdomain to display photos or allow you to monitor the different numbers in the URLs except for the dimensions below.
2. Shopify’s image resizing ‘magic’
Shopify’s CDN also has a “magic” feature that allows you to provide a variety of sizes and configurations of variations of your original image — on demand and without any actions on your part.
For eg, by inserting ” _200x200″ at the end of the filename (but before the extension), Shopify’s server can take the original document and resize it by 200 pixel square to 200 pixel — without needing any image editing Software:
3. Shopify responsive image feature
The ability of Shopify to generate multiple image sizes automatically for you is particularly useful with the responsive image feature included in most modern Shopify themes.
To do this, your Shopify theme will automatically generate an HTML block that looks like this:
If you look closely, you will see a variety of numerical references that instruct browsers to load image files at the size that is best for the user’s device.
For versions of the original image which are 200, 400, 600, 800, 1,200 and 2,000 pixels wide, you will see the code references image URLs in this example.
It is important to note that all these images are not loaded by browsers (which would make no sense to make your site as fast as possible).
Instead, this code knows what image file is best for the device through some more “magic.”
For example, if the code detects that your user is on a high-resolution large screen desktop computer, the 2,000-pixel wide version will be provided to make the image look its best.
On the opposite end of the spectrum, if someone uses your store over a wireless signal from an older mobile phone, they choose instead to load it to 200 pixel wide edition as that’s all it takes to make the image look good at smaller lower resolution displays.
And don’t forget — the code is liable for so-called “@2x” devices such as Retina displays on Apple devices. If a consumer accesses the Shopify shop with one of these device types, the “technology” is clever enough to load an object twice as large as the display width of the phone, rendering the photos incredibly sharp.
Incidentally, you can also thank Shopify’s CDN for delivering photos using the more powerful WebP format — without your own intervention.
4. Image compression and Shopify
The servers do some light compression on your files when you upload an image to Shopify.
Much of this compression, however, is based on your image file’s original size and quality. The servers of Shopify also convert all images to the web standard 72dpi.
As a general rule of thumb, the highest quality image you have within the 20 MB or 20 megapixel limit but at 72dpi should be uploaded for best results. Shopify has an additional limit of 4,472 to 4,472 pixels for product images.
Nevertheless, if you don’t have access to such large image files, 2,048 by 2,048 pixels are often quoted as an appropriate scale.
Although the current users are unlikely to ever need images as big as the 4,472 pixel mark, utilizing images of this scale can be a good move to help “future proof” for computer displays that have not yet been created.
Always keep in mind that consumers will never have to load the 4,472 pixel image files (at least not yet) owing to the resizing power of Shopify.
There is also no way to control how Shopify compresses images. Also, theme developers have no way of controlling this because everything is handled on Shopify servers that can not be reconfigured for individual store preferences.
5. Color profiles and Shopify
Many photos are created with embedded color profiles, which is a sophisticated way to tell how each color is shown on the display or printed if appropriate.
Shopify works best for flat RGB or sRGB color profiles that are often common for applications for web image editing. If you’re using a professional photographer, though, you’re going to want to consult with them to make sure they delete or transform any unique color profiles (sometimes named ICM and ICC).
Uploading non-standard color profile image files can often result in color shifts or changes, or even a failed upload in some cases.
6. Shopify image compression, Part II
It is often a smart idea to run it first through some kind of optimization or compression method before you upload the original image file.
In many image editing applications, including Photoshop, this is something that can be accomplished as well as on free and paid online tools. You might also ask your photographer for support with this.
Until posting to Shopify, compressing the picture can often result in even more effective photo load times with little to no reduction in quality.
In many instances, you can also have better command over how the pictures appear and keep the photos as similar to your vision as possible by using the compression requirements of Shopify and using your own code or equipment.
There are numerous variables at the end of the day that will affect how your image looks when it makes it to Shopify’s servers — including how it is used within your theme — so it’s always a good idea to experiment and test to see what works best while also getting down file sizes.
7. The sky isn’t always blue?
It is always important to keep in mind that colors can appear differently on different devices when dealing with web images — even without any compression or color profile issues involved.
This is sometimes attributed to the user’s “brightness” or “contrast” settings on their phone. Ambient lighting can also affect how colors look in the room or outdoor space — as can the quality of the monitor or screen being used.
Because of this, making objects to always appear the same for each client is essentially impossible — and this is a weakness on all platforms, not just shopify or shopify themes.
8. Custom image dimensions
Several store owners find that the default picture sizes of the applications for the Shopify app do not result in their store being of the best quality.
The template software can be changed to force it to load files with larger image measurements that can sometimes help improve image quality.
This form of alteration, though, is an incomplete enhancement for which you would have to deal with a developer. However, bear in mind that this move would require multiple file editing and will usually result in your sites taking longer to load.
Dec 2nd, 2019|
Click to show more