Blurry images on single product page

There’s a CSS declaration that’s doing this and another that is correct.

Remove the 100% and you’ll be fine.

.woocommerce div.product div.images img {
    display: block;
    /* width: 100%; */
    height: auto;
    box-shadow: none;
}

Thanks for your reply!
I’ve tried to override the width: 100% with width:initial (also tried auto, %, inherit) but that doesn’t make any difference. I don’t know how to remove the property in the class in the woocommerce.css directly since its ‘minified’ (and I probably shouldn’t anyways).

But I don’t think this is the problem?
If I open the image link directly, like this: https://www.casyatelje.se/wp-content/uploads/2019/05/IMG_0672-600×600.jpeg it’s still blurry.

Try “inherit” and make sure to declare !important

Thanks, but the image is still blurry ??

Can you take a screenshot of how and where you’re adding this?

I’m adding it in Appearance —> Customize —> Additional CSS
Here’s a screenshot: https://pasteboard.co/IhgZPF0.png

If I look in dev tools the class seems to correctly override the one in woocommerce.css
https://pasteboard.co/Ihh1zEd.png

Maybe clear cache then? Use a incognito browser too or private if you use Safari. Because it looks way better now.

Ok thanks – I’ve done that but to me it’s still blurry.
I don’t think the blurry image can be fixed via css since it’s already blurred in the source https://www.casyatelje.se/wp-content/uploads/2019/05/IMG_0672-600×600.jpeg (the image on that page isn’t affected by any css attributes such as height/width)

Thanks for your very quick replies! ??

When I view in console and I remove the check for width I see it way clearer. Which is all CSS. With that width checked it goes back to being blurry somewhat.

The image in untouched is 2575 x 2575 and it looks great.
https://www.casyatelje.se/wp-content/uploads/2019/05/IMG_0672.jpeg

No problem. Have a great day

So I realised that my retina display was the source of problem.
The images looks fine on a regular 1080p display.
I solved it by changing the main image width to 1200 (previously 600px) in the “customizer” and now they look great on my screen as well.

Thanks for all your help and sorry for the confusion! ??

Dagnabit that retina display. Gets me every time. Glad you figured it out. ????