0

I have recently created an eCommerce site and uploaded product images which are all 800 x 800. The problem is in catalogue view they look blurry but on the single product they are nice and crisp.

The theme displays catalogue images at 290 x 290 and the default css is:

@media (min-width: 768px) {
.product-item .wrap-img img {
  width: 100%;
  height: 100%;
 }
}

How can I fix this? Do I need to resize the images, use some sort of css, something else??

Thanks

Doggednewbie
  • 17
  • 3

1 Answers1

0

Your uploaded image is larger than the theme display area, which in turn makes the browser scale down your image and 'guess' how it will look on a smaller size. This sometimes results in less than satisfactory rendering (like in your case).

To fix this you could either:

1) Resize your images to exactly/around the provided image area size (290x290) so the browser doesn't have to scale and re-sample your image.

2) You can change the image rendering style used by the browser to one of your preference:

.product-item .wrap-img img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

See here for a more comprehensive explanation:

https://css-tricks.com/almanac/properties/i/image-rendering/

dommmm
  • 899
  • 8
  • 16