Why does images look blurry after being uploaded onto Shopify? Principle of Shopify Image Processing

Many people feel that Shopify modifies or greatly compresses the image files you upload. Although this method is very popular, we sometimes explain it to our customers (it saves our time in communication tbh lol). But technically, this is a very common misunderstanding. While this is a misconception, Shopify's servers do make some changes to the image files you upload. At the same time, Shopify does use their custom code to adjust the image files of various sizes.

Quick reading

• How does Shopify process image files?
• Shopify's CDN
• Shopify's Image Resizing Techniques
• Why does Shopify automatically resize my image file?
• Shopify's image compression principle
• Shopify's Best Color Profile Settings
• Further improve Shopify store image loading speed

How does Shopify  process image files?

To understand how your uploaded images and Shopify work together, you first need to understand that images can have two different "sizes".

1. File size: It is "how much storage space the file occupies". This can be anywhere from a few kilobytes (KB) to hundreds of megabytes (MB). This size directly affects the time it takes to load an image over the Internet. (So please don't upload images larger than 1mb to your online store.)

2. Image size: "the number of pixels in the width and height of the image". While larger sized images also typically have larger file sizes, this is not always the case or disproportionate. The size of this type of image is represented by a numerical value, in pixels.

Shopify's CDN

When you upload an image to Shopify, Shopify creates a copy of the same image on their CDN server (Content Delivery Network). That's why when you look at the site code, you see a lot of links to cdn.shopify.com.

For example, if we upload a 2048 x 2048 pixel product image to the Shopify store, Shopify will create a copy of this image at https://cdn.shopify.com/s/files/1/1126/4122/products /sample-image.jpg. Copies of images can be temporarily stored in the CDN, drastically reducing the loading time of the website.

Why does Shopify use a CDN? The main reason is to improve the loading speed of the online store. Your image files are automatically distributed to CDN servers around the world, and then, when your customer views your website, the customer's device will look for the CDN that is physically closest to him to access your website's material. (Yes, the farther away your web server is from your customers, the slower it will load!)

Setting up a CDN yourself can be complicated. But if you use Shopify, then you don't need to set up a CDN yourself, because your monthly fee already includes Shopify CDN  maintenance fees.

The above picture is a relatively brief Shopify image CDN technical description.

Image source: Image Engine

Shopify's Image Resizing Techniques

Shopify's CDN has another very useful feature, which is that it can provide image versions in various sizes and formats according to the actual needs of the layout, without requiring you to modify any image size. (Of course, we say it again here, please don't upload extremely large pictures, the loading speed will definitely be slower)

For example, by adding "_200x200" at the end of the file name, Shopify's servers are then able to take the original image file and automatically resize it to a 200 x 200 pixel square without any image editing software.

Example: https://cdn.shopify.com/s/files/1/1126/4122/products/sample-image_200x200.jpg

Why does Shopify automatically resize my image file?

Why: Shopify's responsive design makes the website usable on both computers and mobile phones.

If you look closely at the image links on your Shopify website, you will see various URLs with numbers ending in (such as 200x, 400x, etc.), these numbers are used to indicate the screen size of the browser on a specific device Load an appropriately sized image file.

It seems complicated, so here we give a little example.

If the code detects that your user's device is on a high-resolution, large-screen computer, it will choose to load a 2,000-pixel wide version to make the image look better.

On the other hand, if someone enters your Shopify store from a mobile phone, the system will choose to load a 200-pixel wide version of the image to match the display on a lower-resolution screen. Because loading a 2,000-pixel-wide image on a screen as small as a phone isn’t fun, customers won’t be able to see it, and it will slow down loading.

By the way, Shopify's CDN will automatically convert your images to the more efficient WebP format, making loading even faster.

Shopify's image compression principle

When you upload an image to Shopify, Shopify 's servers perform some very light compression on your file. Much of this compression is based on the original size and quality of the image file, which is normally not a major factor in the appearance of the image in theory.

It's worth noting that you have no control over how Shopify compresses your images. The work of Shopify compressing images is all handled on the Shopify servers. Although you can't reset your image compression preferences, these features are also included in the monthly fee, which is a very cost-effective feature.

Shopify's best color profile settings

Shopify works best with RGB or sRGB color profiles, which are the default settings most often used by web pages. However, if you use a professional photography service, you'll want to check with the photographers to make sure they don't use special color profile settings (such as ICM and ICC). Because uploading an image with a non-standard color profile profile has a high chance of causing color shifts, making the image look weird, or even causing the upload to fail, requiring you to spend extra time reprocessing all images.

Further improve the loading speed of Shopify online store images

Before uploading any images, it's a good idea to reduce the image file size through some sort of optimization or compression tool. You can do this with different image editing programs, such as Photoshop, and free online image compression tools like TinyPNG. Alternatively, you can ask your photographer to compress the image for you. By doing this, you can reduce image load times without degrading the quality of the image.