How to balance image quality and store speed without impacting visuals?

TAGSAngel
Trailblazer
148 1 88

Soooo How do you get a good image size (+ pixel size + file size ) that's not pixilated and not kill your store speed. On most products I have to show multiple images  plus an image with font choice plus an image with color choice.  So 850x850 seems to work in the store for the most part but if you post it to instagram etc it looks awful.   I read somewhere that images should definitely be under 200k  but are best under 100k   pretty impossible for me  Can someone give me some type of understanding.  My store is slower than most I'm sure  and I have some of the same images (font / color choices) on every single page  there's got to be some other way of doing this or some other methods of getting a larger image with less weight (yes I use photoshop save for web etc etc...)
Anyone want to enlighten me  Please......

Replies 4 (4)

PageFly-Victor
Shopify Partner
7865 1785 3066

Hi @TAGSAngel 

I recommend you run a few test on page speed tools like Google speed insight to make sure the images are the causes of low speed (but I found images are very common to cause slow page speed).

After you run page speed test, you will find the images that are too big. You can run some image optimizers to reduce the size while the quality is almost keeping the same. We have some recommended tools here, you can check the out (they are free, btw): https://pagefly.link/xQKRAfpQ

Also, there're some dimensions that we usually suggest our customers: 

- On mobile, image width can be 375px

- On table, image width can be 768px

- On desktop, you can opt for image width of 1140px

The height totally depends on the content you have. After creating the images, run them through image optimizers and you will be good to go.

Hope you find my answer helpful. If it is, please give me a 'like'

Have a nice day! 

TAGSAngel
Trailblazer
148 1 88

@PageFly-Victor   Thank you, I had to put this on the back burner for a bit as there were other pressing issues, but I'm coming back to it now.  I'll check the link you gave, but it caused another question.  I don't have to make multiple sizes of images correct? Doesn't shopify reduce for mobile view / tablet view etc?

So my images are 850 x 850 and as you've said the recommendation is 1140  so if they're already verging on 200k (when reduced to medium quality) how could I possibly size them up to 1140 with high quality so they're crisp and clear on the site (and when they're brought into instagram / fb etc via the channels ) and not be over 300 or eve 400k?

This was more my concern then checking the actual cause of what's making my pages slow, There are a few reasons I'm sure but this is the first one that needs to be researched and resolved.

JohnCodes
Shopify Partner
134 10 73

Hi @TAGSAngel 

I'd have to agree with some of the points @PageFly-Victor made. I'd run your site through some analysis tools to see if your photos are having a negative impact on performance. You can try running some of your pages through the Shopify Analyzer. It's a free analysis tool we built for the Shopify community. It'll let you know if you have any images that are oversized or need compression applied.

We recommend having mobile image sizes be no larger than 960px and desktop no larger than 1500px.

You could also implement a srcset solution so that your images are responsively displayed based on screen width: Here's an example snippet below:

<img srcset="{{ img | img_url: '1500x' }} 1500w,
             {{ img | img_url: '1200x' }} 1200w,
             {{ img | img_url: '960x' }} 960w,
             {{ img | img_url: '800x' }} 800w,
             {{ img | img_url: '600x' }} 600w,
             {{ img | img_url: '400x' }} 400w" />

 

This is going to allow your images to display anywhere from 400px-1500px, depending on screen sizes, so the most optimal version is displayed.

Beyond that, you could always use an app like Crush Pics to compress all of your images too.

Best of luck! If you'd like our optimization experts to investigate further, please feel free to reach out to our team at speedboostr.com/contact.

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
jnoneilv1
Excursionist
11 0 4

I am a bit disappointed that none of the experts answered the OP's question, which really orbits around this question, "Doesn't shopify reduce for mobile view / tablet view etc?"

 

This is not unique to Shopify. Popular page builders like Elementor or others also provide automatic image resizing and compression such that one high quality image is added to a library, etc. and then used multiple places in multiple resolutions including thumbnails, etc. The builder doesn't need to create these.

 

But, looking for actionable guidelines even within the Shopify blogs is a fruitless and confusing endeavor. Even an article as recent as 2024 does not even mention Product Images or the automatic functions in Shopify. It is just another copy and paste regurgitation of the chatbot content that web promoters and bloggers post about images on the web. Link to Shopify Blog about Image Sizes

 

The OP has also mentioned they are using Photoshop, so more recommendations for more different image "optimizers" is just naked promotion of affiliated links and tools. I would suggest to the OP that in Photoshop images can be compressed A LOT before there is a noticeable quality difference and when using Photoshops Export tool, you can set the resolution fairly large, say 1024x1024 or 512x512 and that resolution will have much more impact on display on sites such as Instagram or whatever, and then you can be really aggressive with the jpg compression and get under 100k. The jpg compression is more about color and brightness compression than resolution.

But, this still all begs the question that once given a say a highly compressed images of good resolution, say 1024x1024 or 2048x2048 can't Shopify then do all the other scaling? I think yes, but not sure. So, I think a good strategy might? be to use a good resolution image with very aggressive compression and then let Shopify do the resizing. I can only speculate that you'll want control over the jpg compression for the color and brightness aspects which the Shopify engine might not touch to avoid causing problems, and then let the Shopify engine do the work of resizing the pixels for liquid and device dependent display.  But, since I can find no source to confirm this, we'll have to test ourselves.