Why do my product images look fuzzy on mobile view?

I’ve tried everything. I saved my photos for web using photoshop and following those steps, I compressed the files smaller, I uploaded as 800x800 into my product images. They look fine on the desktop but on mobile they look fuzzy, not crisp. I am using shopify buy buttons. The main page the images look fine, but once I go to view the product as a little pop up with the description and carousel of pics per product the images there look bad. What can I do to remedy this?? This is literally the only thing keeping me still from announcing my website to my customers and it’s driving me nuts! I read through this community, but most things are speaking about the shopify store/theme photos which I don’t have.

1 Like

Is there an example you can share of where it’s not looking as nice as what you uploaded?
800x800 isn’t very big so that makes me wonder if it’s the starting size that’s causing the problem. Some themes may show the image much larger than that so you would expect some blurring as the pixels get stretched.

But in any case - lets see an example.

@aas5501

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

https://www.jolieflowers-pa.com/shop

Here is the website where the shopify buttons live. I created a collection of my products. I compressed the files all smaller than 200 kb and they still look a bit off on a phone vs desktop. Not on the main page but when you click on each product to view. It also takes the slightest bit longer to load my shop buttons but not sure I can really do anything about that with the nature of the buy buttons themselves. Thanks!

https://www.jolieflowers-pa.com/shop

Here is the website where the shopify buttons live. I created a collection of my products. I compressed the files all smaller than 200 kb and they still look a bit off on a phone vs desktop. Not on the main page but when you click on each product to view.

@KetanKumar @Jason I have supplied the website link. I did not initially [email removed] you both so maybe you missed the replies. Thanks!

1 Like

@aas5501

thanks but its not shopify store

@KetanKumar Yes I said they are shopify buy buttons in my original post. It is the shopify lite plan so everything about the store items, details, and checkout on my website are run by shopify. The issue is not with my website platform, it is shopify itself!

@aas5501

thanks but how can i guide without shopify store?

I appreciate the eagerness to help, but I suppose if you are unfamiliar with the shopify buy buttons, and only the store, then someone else may have input. Thanks!

@aas5501

sorry but i can’t see any shopify buy button

I checked out that link and can see the buy buttons in place.
I would not suggest you heavily compress the images yourself as Shopify can add it’s own compression to the images as well.

When i look at the site I see this image as an example:

It looks fairly crisp but do see some minor blurriness. I don’t know what the original looked like before uploading so this could be present there too.

We can look at the full sized version that lives in shopify however and that does have some JPG artefacts (that could be from your compression)

Some visual differences can also occur between desktop and mobile because of the pixel density on the device. On double and triple pixel density devices you have a greater chance of noticing some blurry aspects as there’s now more pixels being shown.

Since you are using the buy button there is little you can do to tweak how the images are shown. I would at least try uploading an image you have no compressed at all and see if that results in a much better image. Fingers crossed it gives your lovely images the pop you’re looking for.

@Jason great Jason. I will try it uncompressed and see how that goes!