Problem with product images looking lower quality than mobile view?

[Gen-Audio]

Hi,

Hope someone can help. I noticed my product images look fine on a mobile device but when on desktop they look lower quality by quite a bit. 

I have designed them quite large with high resolution so no reason why this should happen.

Is there anyway this can be fixed so both are high quality?

Here is a link to one of the pages: 

https://www.generationaudio.co.uk/products/cinematic-horror-sound-effects

Thanks in advance

[Mac]

Hi, @Gen-Audio!

Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to help.

I appreciate you sharing a link to one of your pages. This is likely happening as the image you are uploading is quite large. You may want to look at downsizing the image in order for it to fit on a smaller screen. The blurriness and compression occurs when the large image is shrunk from desktop to mobile. We have a great guide that covers this on our Shopify Blog called 10 Must Know Image Optimization Tips. I recommend checking that out as a starting point as it also goes over some some commonly used tools to resize your images. 

Another common issue could be due to your theme. Feel free to provide me with the name of your theme or you can search for the documentation that states the recommended file type, size, and resolution for media. 

Kindly reply back to this thread with any questions or updates and we can continue our conversation further!

[Gen-Audio]

Hi @Mac 

Thank you for the information. Will put some of this into action and see if it helps. 
As I mentioned they look great on mobile but not on desktop. 

I am using Dawn 2.4.0 theme 

Regards

Scott 

[Gen-Audio]

@Mac 

Sorry I forgot to mention is there an optimised dimension guide for images on product pages? 

I can’t see anything in the link you provided. Only guidelines but no actual dimensions themselves 

Thanks
Scott 

[Mac]

Hi again, @Gen-Audio!

Thank you so much for providing that additional information. 

According to our documentation, your product and collection images can be any size up to 4472 x 4472 px, or 20 megapixels. The size depends on your preference. Each theme generally has recommendations for the ideal media size. The Dawn theme allows for flexibility and is optimized to handle different sizes. I'd suggest checking out our article called DIY Guide to Beautiful Product Photography that goes over everything you need to know about product photos from shooting to uploading. 

For instance, high-resolution photos look more polished and professional to your customers, but are typically larger in size. On the other hand, some merchants prefer using square product images, a size of 2048 x 2048 px usually looks best. I definitely suggest the square product images option as it will give merchants a better balance between image quality and fast site loading speed.

Have you already played around with a few dimensions? Has reducing the image size also helped with the appearance on your desktop view? 

[Gen-Audio]

@Mac 

Hi 

I tried reducing the image size to 700 x 700px but did not change anything on the desktop view. Images are currently 1700 x 1700px and look great on mobile view

[Mac]

Hi again, @Gen-Audio!

I appreciate you testing that out. I will provide a few steps on how you can change your product image width across all of your photos. Please be sure to back-up your theme before making any changes to your code. 

• In your Shopify admin, head over to your Online Store > Themes >  Actions > Edit Code. From here, you will be able to make the necessary edits to your theme's code.
• Using the search bar on the left hand side, you will want to type in “section-main-product” and then click on the “Assets” folder to open the file. 
• From there, you'll scroll down to line 41 to find the “@media screen” code. You will want to replace the piece of code from lines 41 to 45 with this: 

@media screen and (min-width: 990px) {
.product:not(.product–no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% – 1rem / 2);

Once that is done, select “Save” to keep your changes. Let me know how this works for you! 

[yolandab]

Hi is this still an active forum? im having the same issue as mentioned above.