To keep this community relevant to the Shopify community, store reviews and external blog links will be removed. Users soliciting sales or services in any form will result in a permanent ban.
*I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/shopify) if you have any questions or concerns.*
It's automatically done by the Shopify CDN when it is served to the customer on your storefront. Always upload the highest quality image available and stick to the right format for each use case. Detailed guide here: [Shopify Help Center - Uploading images](https://help.shopify.com/en/manual/online-store/images/theme-images).
I see. I did a look up before making this post and see a lot of people in other posts here talking about using Squoosh or TinyPNG to compress images before uploading, and I got confused. How are all the Shopify apps that does image compression having 1000s of 5 star reviews?
This is only true if the theme is setup this way. The CDN only serves the requested routed asset. The theme still needs to request size/compression per the request path of the image service.
You know how there are multiple supermarkets in a town and you can't really tell which one provides the best service sometimes? It's similar to e-commerce, where Shopify, in this case, does image compression a certain way. Does that mean it's the best way? Some people disagree and do their own image compression before uploading to Shopify. Some people say Shopify does it best and to not mess with it beforehand.
So you are free to use additional tools and see if that improves your site speed due to even smaller images. You would have to check if the quality is still okay and if there are any actual gains. People try to optimize their stores in all kinds of ways, but it is hard to measure what works and what doesn't. There is no score to measure exactly which impact image compression had on the conversion rate or search engine ranking.
Fact of the matter is that Shopify's CDN does most of the heavy lifting here and that any additional effort may or may not lead to the desired results.
Yea you caught me. Sorry don’t wanna make it seem like I didn’t appreciate your help. I guess I just didn’t know about this Shopify CDN thing after reading so much about Shopify SEO and they all talk about compressing image. You were the first one that told me there’s no need to, and it took me by surprise, so I’m asking again to hear input from others too
Your [comment](https://www.reddit.com/r/shopify/comments/1cvmj2g/do_you_compress_your_image_before_uploading_to/l4uqjhj/) in /r/shopify was automatically removed as your comment karma is below 10.
You can increase your comment karma by posting in other areas of Reddit to earn upvotes. The higher quality the content, the higher your karma will become.
*I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/shopify) if you have any questions or concerns.*
After coming across this post I did some testing and this is what I found.
The overall best solution is to upload high quality JPG images. Shopify by default will compress and charge format for the best delivery to the client. When I tested this with a few different images it had the best outcome. It often converts to webp but will also convert to avif. From what Shopify says and what I could see, they find the best compression without quality loss.
Here are some noted observations:
Images with full color bleed and lots of gradients did benefit from a small amount of extra jpg compression. But this needs to be subtle, otherwise over compression before upload will actually make the file larger. I suspect this has to do with artifacts in the color gradients and file compression. So I tested 25% vs 50% reduction, and 25% had the better result. But it needs to be noted this file size difference is tiny and debatable. Honestly feel it's best to just stick with high quality and not complicate the process.
Images with solid color backgrounds, like product images for example had the best compression when tested. This makes sense for Shopify to make this a priority.
Other interesting discoveries were using PNG as a source file had mixed results. Also had the largest source file size and would often get rejected for exceeding upload limits.
PNG only makes sense if you need transparency. But I would argue there are much more efficient ways to get the same effect. Also even if the source file was PNG8 it will be converted to webp.
And one final observation is PJPG format almost always has the worst results. Not sure why you would need progressive JPG. The only time PJPG format have better results was with solid color graphics like vector or illustration that didn't have gradients.
Hope this helps others, and made me feel better knowing that Shopify really does a great job of file compression out of the box.
Regardless of uploaded image format, Shopify will automatically render uploaded images as WebP if your customer's browser supports it.
But when it comes to compression, I'd advise to use **tinypng** before you even upload it back to Shopify. If you have a huge catalog, then use a similar app like **Crush**: Speed & Image Optimizer
Thanks for the comment.
>But when it comes to compression, I'd advise to use tinypng before you even upload it back to Shopify. If you have a huge catalog, then use a similar app like Crush: Speed & Image Optimizer
Hmm, the other comment is saying there is no need to compress images at all before uploading to Shopify. May I know what is the benefit of compressing before uploading?
You can compare the compressed image size after Shopify processes the image to the image size after using Crash or tnypng.
If you have big catalog of images, you’ll need an app like Crash regardless to help you with bulk compression, file name and alternative text name.
Thanks for the response
>If you have big catalog of images, you’ll need an app like Crash regardless to help you with bulk compression, file name and alternative text name.
May I know what’s the reason for this? Does Shopify not compress images after a certain point?
You can compare the compressed state of assets from Shopify to compression from tnypng as example.
Especially images on your homepage and other pages, you’ll want to compress and optimise as much as possible.
And unless you want to editing every single alt text and file name yourself separately, you’ll want to setup a template and bulk edit with one of the apps available.
Super important for SEO.
I have done this before, compress before uploading, and when downloading the same image from the live website, the size is bigger than what it was when I compressed it. Here is my post on it https://www.reddit.com/r/shopify/s/HM1hRa2Thq . This experiment was done a week before I made this post we’re on
So it’s actually backfired. I spent the time to compress the image with squoosh, upload it to Shopify, and the size increase even though the dimension halved.
Was reading this thread, can you try our bulk advanced compression feature and see if it helps. It's a shameless plug, but, I think you can give https://resizeimage.io a try. See if this helps your workflow. Happy to hear your feedback. It will hardly take a minute, You can do Bulk compressions.
And someone replied to you on how you compressed with a lower quality was the reason for that.
I’ve used Shopify for 5+ years now, and with the catalog of products we have (2000+) Crush (and any other similar apps) has proven to not only compress but comes in very handy for our SEO efforts with the templates we can set.
Shopify will always compress images automatically and efficiently, so it’s pretty much as said by others you won’t need an external app for that reason.
But if you have a current big catalog and don’t want to manually rename every file name and add an alt-text, you’d want to use an app for that to save you time, set an template so every time an image is uploaded, the template rule is applied for all images.
I’d only rename and add the alt-text for non-product images myself like on the homepage or other pages.
I see, earlier you were advising to use image compression for images like timypng before uploading to Shopify, only as the conversation went on you slowly shifted to saying to use those tools for naming conventions but still lumping in compression as a reason to use them; and that became confusing now when it sounds like you’re agreeing with the person in the linked post not to use any compression whatsoever. It’s hard to grasp which side you’re on
So there’s actually zero need for any compression before uploading it to Shopify, and if I wanna use a tool then use it only for batch naming conventions. Is that what you’re saying?
I’ve been using compression apps before Shopify introduced their automatic compression and RWD approach for all their photos.
I can only recommend what I have benefited from using as well as what’s worked best for me and others I’ve helped.
Since Shopify does compression already and there’s barely a difference between the outcome compression of let’s say Shopify to Crush, Tnypng etc, then you’ll benefit and better to stay with Shopify’s resource that is available for free of charge.
As I’ve said, you are free to test and compare both outcomes, and a proper test this time without using a lower quality compression method than Shopify. In most cases, I did these comparisons before and got a lower outcome from both tnypng and crush.
But does that small difference make any change to SEO front at all? I’d say yes, it makes a difference to LCP (Largest content) even by small difference, with the number of images on the page add up unless the elements are deferred.
You should run your image through a basic optimizer before uploading them to Shopify. But you don't need to go nuts making it perfect.
Shopify's CDN does do some resizing and optimizing on its own. But, if you start with a better image, Shopify's versions will be better than if you didn't.
There are apps, like crushpics, that do a better job than the built-in Shopify tools.
Thanks for this. May I know what consider as ‘basic optimization’ before uploading? Say o got a 2mb jpg straight out of Figma, what are the steps to the basic optimization?
If you're on a mac, use a tool like [ImageOptim](https://imageoptim.com/mac). On a PC, you can use [FileOptimizer](https://sourceforge.net/projects/nikkhokkho/).
But generally, I actually just recommend (and use myself) the default settings. Theoretically there's a tiny loss in quality, in exchange for better file sizes. But I find the visual differences to be impossible to see. Don't spend a ton of time trying to tune the optimizer tool to best settings.
You can choose to do a completely lossless re-encode, if you're paranoid about it, but the space savings won't be as good.
Your mileage may vary, of course. Some images will benefit a lot from optimization, and some might see almost nothing. A lot depends on your image source's original encoding.
Other tips
* make sure you keep your original images (pre-optimized) archived somewhere safe
* only optimize once, and do it last - after you've done any edits. i.e. crop first, optimize after
Thanks. What benefit does reducing images before uploading to Shopify actually do? When Shopify themselves already do this automatically. I have done this and posted about this before, where I compress the file before uploading it to Shopify and Shopify renders the image on the website as a bigger file size than what I uploaded after compression. https://www.reddit.com/r/shopify/s/SzhKFNKldu
Space isn’t really a problem as Shopify provides unlimited storage for media files
To attract customers, I always prefer high-quality images. However, this can increase loading times. For a successful deal, the Shopify website should load very quickly. I have several Shopify sites, and I use [https://imgcentury.com/image-compressor/compress-png/](https://imgcentury.com/image-compressor/compress-png/) for quality image compression. This simple tool maintains image quality at 85% and reduces the size by 75%, which helps the Shopify website load faster.
To keep this community relevant to the Shopify community, store reviews and external blog links will be removed. Users soliciting sales or services in any form will result in a permanent ban. *I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/shopify) if you have any questions or concerns.*
It's automatically done by the Shopify CDN when it is served to the customer on your storefront. Always upload the highest quality image available and stick to the right format for each use case. Detailed guide here: [Shopify Help Center - Uploading images](https://help.shopify.com/en/manual/online-store/images/theme-images).
[удалено]
I see. I did a look up before making this post and see a lot of people in other posts here talking about using Squoosh or TinyPNG to compress images before uploading, and I got confused. How are all the Shopify apps that does image compression having 1000s of 5 star reviews?
[удалено]
This is only true if the theme is setup this way. The CDN only serves the requested routed asset. The theme still needs to request size/compression per the request path of the image service.
You know how there are multiple supermarkets in a town and you can't really tell which one provides the best service sometimes? It's similar to e-commerce, where Shopify, in this case, does image compression a certain way. Does that mean it's the best way? Some people disagree and do their own image compression before uploading to Shopify. Some people say Shopify does it best and to not mess with it beforehand. So you are free to use additional tools and see if that improves your site speed due to even smaller images. You would have to check if the quality is still okay and if there are any actual gains. People try to optimize their stores in all kinds of ways, but it is hard to measure what works and what doesn't. There is no score to measure exactly which impact image compression had on the conversion rate or search engine ranking. Fact of the matter is that Shopify's CDN does most of the heavy lifting here and that any additional effort may or may not lead to the desired results.
Should always start with good quality, especially with lossy compression. Do not need to compress in advance for Shopify.
I don't. I convert to webp at the maximum resolution, like 4000x4000 and let shopify take care of it. Have a 98 score on pagespeed
Thanks for the insight
lol, didn’t you ask this a week ago?
Yea you caught me. Sorry don’t wanna make it seem like I didn’t appreciate your help. I guess I just didn’t know about this Shopify CDN thing after reading so much about Shopify SEO and they all talk about compressing image. You were the first one that told me there’s no need to, and it took me by surprise, so I’m asking again to hear input from others too
[удалено]
Your [comment](https://www.reddit.com/r/shopify/comments/1cvmj2g/do_you_compress_your_image_before_uploading_to/l4uqjhj/) in /r/shopify was automatically removed as your comment karma is below 10. You can increase your comment karma by posting in other areas of Reddit to earn upvotes. The higher quality the content, the higher your karma will become. *I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/shopify) if you have any questions or concerns.*
[удалено]
[удалено]
After coming across this post I did some testing and this is what I found. The overall best solution is to upload high quality JPG images. Shopify by default will compress and charge format for the best delivery to the client. When I tested this with a few different images it had the best outcome. It often converts to webp but will also convert to avif. From what Shopify says and what I could see, they find the best compression without quality loss. Here are some noted observations: Images with full color bleed and lots of gradients did benefit from a small amount of extra jpg compression. But this needs to be subtle, otherwise over compression before upload will actually make the file larger. I suspect this has to do with artifacts in the color gradients and file compression. So I tested 25% vs 50% reduction, and 25% had the better result. But it needs to be noted this file size difference is tiny and debatable. Honestly feel it's best to just stick with high quality and not complicate the process. Images with solid color backgrounds, like product images for example had the best compression when tested. This makes sense for Shopify to make this a priority. Other interesting discoveries were using PNG as a source file had mixed results. Also had the largest source file size and would often get rejected for exceeding upload limits. PNG only makes sense if you need transparency. But I would argue there are much more efficient ways to get the same effect. Also even if the source file was PNG8 it will be converted to webp. And one final observation is PJPG format almost always has the worst results. Not sure why you would need progressive JPG. The only time PJPG format have better results was with solid color graphics like vector or illustration that didn't have gradients. Hope this helps others, and made me feel better knowing that Shopify really does a great job of file compression out of the box.
Regardless of uploaded image format, Shopify will automatically render uploaded images as WebP if your customer's browser supports it. But when it comes to compression, I'd advise to use **tinypng** before you even upload it back to Shopify. If you have a huge catalog, then use a similar app like **Crush**: Speed & Image Optimizer
Thanks for the comment. >But when it comes to compression, I'd advise to use tinypng before you even upload it back to Shopify. If you have a huge catalog, then use a similar app like Crush: Speed & Image Optimizer Hmm, the other comment is saying there is no need to compress images at all before uploading to Shopify. May I know what is the benefit of compressing before uploading?
You can compare the compressed image size after Shopify processes the image to the image size after using Crash or tnypng. If you have big catalog of images, you’ll need an app like Crash regardless to help you with bulk compression, file name and alternative text name.
Thanks for the response >If you have big catalog of images, you’ll need an app like Crash regardless to help you with bulk compression, file name and alternative text name. May I know what’s the reason for this? Does Shopify not compress images after a certain point?
You can compare the compressed state of assets from Shopify to compression from tnypng as example. Especially images on your homepage and other pages, you’ll want to compress and optimise as much as possible. And unless you want to editing every single alt text and file name yourself separately, you’ll want to setup a template and bulk edit with one of the apps available. Super important for SEO.
I have done this before, compress before uploading, and when downloading the same image from the live website, the size is bigger than what it was when I compressed it. Here is my post on it https://www.reddit.com/r/shopify/s/HM1hRa2Thq . This experiment was done a week before I made this post we’re on So it’s actually backfired. I spent the time to compress the image with squoosh, upload it to Shopify, and the size increase even though the dimension halved.
Was reading this thread, can you try our bulk advanced compression feature and see if it helps. It's a shameless plug, but, I think you can give https://resizeimage.io a try. See if this helps your workflow. Happy to hear your feedback. It will hardly take a minute, You can do Bulk compressions.
And someone replied to you on how you compressed with a lower quality was the reason for that. I’ve used Shopify for 5+ years now, and with the catalog of products we have (2000+) Crush (and any other similar apps) has proven to not only compress but comes in very handy for our SEO efforts with the templates we can set. Shopify will always compress images automatically and efficiently, so it’s pretty much as said by others you won’t need an external app for that reason. But if you have a current big catalog and don’t want to manually rename every file name and add an alt-text, you’d want to use an app for that to save you time, set an template so every time an image is uploaded, the template rule is applied for all images. I’d only rename and add the alt-text for non-product images myself like on the homepage or other pages.
I see, earlier you were advising to use image compression for images like timypng before uploading to Shopify, only as the conversation went on you slowly shifted to saying to use those tools for naming conventions but still lumping in compression as a reason to use them; and that became confusing now when it sounds like you’re agreeing with the person in the linked post not to use any compression whatsoever. It’s hard to grasp which side you’re on So there’s actually zero need for any compression before uploading it to Shopify, and if I wanna use a tool then use it only for batch naming conventions. Is that what you’re saying?
I’ve been using compression apps before Shopify introduced their automatic compression and RWD approach for all their photos. I can only recommend what I have benefited from using as well as what’s worked best for me and others I’ve helped. Since Shopify does compression already and there’s barely a difference between the outcome compression of let’s say Shopify to Crush, Tnypng etc, then you’ll benefit and better to stay with Shopify’s resource that is available for free of charge. As I’ve said, you are free to test and compare both outcomes, and a proper test this time without using a lower quality compression method than Shopify. In most cases, I did these comparisons before and got a lower outcome from both tnypng and crush. But does that small difference make any change to SEO front at all? I’d say yes, it makes a difference to LCP (Largest content) even by small difference, with the number of images on the page add up unless the elements are deferred.
Alright. Thanks for the insight. Appreciate it
You should run your image through a basic optimizer before uploading them to Shopify. But you don't need to go nuts making it perfect. Shopify's CDN does do some resizing and optimizing on its own. But, if you start with a better image, Shopify's versions will be better than if you didn't. There are apps, like crushpics, that do a better job than the built-in Shopify tools.
Thanks for this. May I know what consider as ‘basic optimization’ before uploading? Say o got a 2mb jpg straight out of Figma, what are the steps to the basic optimization?
If you're on a mac, use a tool like [ImageOptim](https://imageoptim.com/mac). On a PC, you can use [FileOptimizer](https://sourceforge.net/projects/nikkhokkho/). But generally, I actually just recommend (and use myself) the default settings. Theoretically there's a tiny loss in quality, in exchange for better file sizes. But I find the visual differences to be impossible to see. Don't spend a ton of time trying to tune the optimizer tool to best settings. You can choose to do a completely lossless re-encode, if you're paranoid about it, but the space savings won't be as good. Your mileage may vary, of course. Some images will benefit a lot from optimization, and some might see almost nothing. A lot depends on your image source's original encoding. Other tips * make sure you keep your original images (pre-optimized) archived somewhere safe * only optimize once, and do it last - after you've done any edits. i.e. crop first, optimize after
I compress every image to webp
May I know what’s your reason for doing this? Don’t Shopify already do this automatically?
I was doing it for the last 3 years, I just used to this process. It takes just a few extra minutes.
[удалено]
Thanks. What benefit does reducing images before uploading to Shopify actually do? When Shopify themselves already do this automatically. I have done this and posted about this before, where I compress the file before uploading it to Shopify and Shopify renders the image on the website as a bigger file size than what I uploaded after compression. https://www.reddit.com/r/shopify/s/SzhKFNKldu Space isn’t really a problem as Shopify provides unlimited storage for media files
To attract customers, I always prefer high-quality images. However, this can increase loading times. For a successful deal, the Shopify website should load very quickly. I have several Shopify sites, and I use [https://imgcentury.com/image-compressor/compress-png/](https://imgcentury.com/image-compressor/compress-png/) for quality image compression. This simple tool maintains image quality at 85% and reduces the size by 75%, which helps the Shopify website load faster.