Image size vs store speed etc

[TAGSAngel]

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......

[PageFly-Victor]

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]

@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]

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.