Search code examples
cssimageblurry

Blurry Images in catalogue view

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

Solution

  • 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/