Thumbnail Images Blurry

[giorgioconti]

All of my product images look blurry when they are uploaded, they become crisp and clear once somebody actually clicks on the images. I tried resizing and changing aspect ratios that doesnt seem to do anything. Its only product images when you click on any given product.

Example: https://gconti.com/collections/diamond-rings/products/white-gold-1-11ctw-natural-sapphire-and-diamond-gemstone-band-with-miligrain-design

[BSSCommerce-HDL]

Hi @giorgioconti , Because your photo is scaled, it has lost its resolution. To fix it, please follow these steps:

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

img.product-single__photo__img.js-pswp-img {
    object-fit: scale-down !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you

[giorgioconti]

Thanks for your reply. I do not see file, theme or style .css. Here is a screenshot

[BSSCommerce-HDL]

Hi @giorgioconti , let’s add it to theme.scss.liquid

[giorgioconti]

Thanks so much! That worked

[giorgioconti]

Hey it worked for the desktop but its still happening on the mobile view. Any suggestions?

[BSSCommerce-HDL]

Hi @giorgioconti , i checked it on the mobile and it worked