What benefits does image compression bring to Shopify uploads?

Store Design
,
1

Hi, I asked this same question on reddit, but figured its better to come to the source.

I am curious about uploading images to shopify. Apart from the load speeds been affected and also saving space, what would be the real benefit of uploading lets say the maximum resolution file 20Mpx maybe at 20MB. From what I can tell shopify’s CDN system seems to resize and recompress the files anyway which I take it is to cater for the various devices and screens out there. An example from one of the jpeg uploads I tested with:

Original image uploaded to products: 5000x2813 -9.08MB> > Processed by Shopify and displaying on the products page: small preview is 300x169 -19.1KB> > Processed by Shopify and displaying on the products page: medium preview is 899x506 -88.0KB> > Processed by Shopify and displaying on the products page: large preview is 1920x1080 -419KB

I am on a 1080p screen so I expected the max image resolution that would be presented to me to be only the 1920x1080 one.

I then uploaded the same test jpeg image reprocessed to 1920x1080 at highest quality.

Original image uploaded to products: 1920x1080 -1.48MB> > Processed by Shopify and displaying on the products page: small preview is 300x169 -15.3KB> > Processed by Shopify and displaying on the products page: medium preview is 900x506 -106KB> > Processed by Shopify and displaying on the products page: large preview is 1920x1080 -401KB

With the 1080p image I was expecting to get the full quality image displayed on the screen which was the original 1.48MB file but as can be seen its still compressed to 401KB. Even the file that was originally uploaded is no longer 1.48MB but is 404KB, so from this I take it that any original images that are uploaded to shopify will be resized, recompressed and then deleted from shopify leaving only the recreated files.

Also from this I would guess that a 20Mpx and 2Mpx file will undergo the same compression level which is why the original 9.08MB and 1.48MB files end up with almost the same file size at 1920x1080 (419KB and 401KB respectively)

I am also not sure if the theme been used will also affect the size of the images available.

Based on the above results, I have two questions below:

Since it seems like a waste of time to preprocess the files before uploading to shopify as shopify will just reprocess the files anyway, my question is what is the standard followed by merchants. Do they just upload the image as is without any pre-image processing so long as its within shopify’s limits, or do you eitherway preprocess the image to your preference before you upload?

The quality of the compressed files from the CDN seems OK but I would have liked some the images to have a bit more detail in certain sections instead of looking grainy. From what I have read this is done at server level and cant be changed within the store. Is this correct?

2

Hi, I think you have to use the compressor software there are lots of free compressor software on the internet.

3

Hi, the problem I have is that even after using compression (in my case photoshop 2020) and getting the image to the quality and size I want, Shopify will further compress the image I upload which as a result will degrade the image quality even further.

The tests I did as per my OP was to see if compressing/optimizing the image is a waste of time since shopify will also do its own compression on upload. I would never think of uploading a 9MB image file to my store. My store upload for the 9MB is optimized to around 500KB which still looks good but shopify ends up further degrading the quality during upload.

From the results I got in the , optimizing the files myself does seem like a waste of time as one could spend a couple of hours optimizing a few images only for shopify to undo all that work and apply its own compressions which even though the file size is slightly smaller than what I would have gotten, the quality is also worse off for it.

At the end of the day it becomes a compromise between faster load speeds or better image quality, but I believe the choice should be on the merchant to decide, and the uploaded image shouldn’t be modified by the CDN unless the merchant activates such an option.

4

David,

yes, there is no control of how shopify engine resizes your images. Your theme code can only specify the size and format.

And yes, even master size is a recompressed image. So there is no point in doing some extra special compression before uploading – this effort will be lost. The best you can do is to blur not-in-focus parts of your image a bit more, flatten the background, but do not use sophisticated compression tools.

Most current themes has provision for Retina screens, so even if your screen is 1920px wide, it’s possible that your visitors may need 3840. Or more.

If you really need better control over your image processing, it’s possible to modify your theme to use Sirv instead of Shopify image CDN, as Sirv can fetch master image from Shopify, cache it, process as you like and serve to your visitors.

5

Thank you Tim. That does clarify things for me.

For now we are still working on building the store so will only know if we should go the Sirv route after launch. It will be something for us to research in the interim incase the image output for some images is subpar..

6

Yep. here is the link about Sirv fetching – I guess it should be not that difficult to implant in theme code. This way you work with your Shopify back-end as usual and all the magic happens automatically.

7

It does seem pretty straight forward. Might setup a development store just to test it out even before launch.

Thank you again

8

Let me know if you do :slightly_smiling_face: – have it in mind for quite some time, but had no chance to implement it so far :))

9

Definately will. Take care

10

Please help.

I tried uploading a PNG image that I edited with the Paint program to the product description. The image was supposed to be 750 x 1160, but the one that showed up in Shopify is really really small like 480 in width. Is there a restriction on upload image width? I just want to get the original image size to show up properly.

The first image is the original one from the supplier. I edited the text and re-upload it (as shown in the second image below). Why does Shopify not keep the original size?

11.JPG
11.JPG1127×698 72.1 KB

11

I know this is an old thread, but I’m curious too.

For product images, I don’t really mind - whatever Shopify foes looks good enough.

But I’m having a hell of a time with Collection Page banners, which Shopify reduces the resolution of down to levels that look terrible. How do people get their banners in original resolution?

12

Nowadays most themes use srcset with img tag or picture tag to serve responsive images.

However, sometimes they are implemented improperly.

Even Dawn had(? – may be it still has, did not check recently) problems with this.

So, it would be necessary to see your exact case to tell whether it can be improved and how complex the fix can be.

Also note that sometimes banners are implemented in a way which may cause heavy cropping, etc.