Blurry Catalog Images

[iamlucy]

Hi there,

I have recently changed the dimensions of my catalog images to 238×238 (previously 540×540 same size as single image) to help reduce page load time.

It has significantly helped with page speed however my images are showing up as blurry on the shop pages: http://www.littlemoppets.co.uk/shop.

When I open one of the individual ‘catalog images’ for example: http://www.littlemoppets.co.uk/wp-content/uploads/2015/05/sophia-webster-mini-girs-yoyo-pink-dot-leather-sandals2-238×238.jpg it seems to be fine – however is displaying with reduced quality on the shop pages.

Please advise?

Thanks,

Lucy

[Kyle – SUPPORT]

Hi

This is because they are sized up to fill the container, the min width should be 370px

– Kyle

[iamlucy]

This reply has been marked as private.

[Kyle – SUPPORT]

For me they are showing at 237px, so you can change your image settings to 237px x 237px

– Kyle

[iamlucy]

This reply has been marked as private.

[Kyle – SUPPORT]

Can you change them to 237px so I can check, there’s no reason they would appear blurry without being scaled up

– Kyle

[iamlucy]

This reply has been marked as private.

[Kyle – SUPPORT]

Yeah look great to me

– Kyle

[iamlucy]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Lucy,

The images really should be a minimum of 320px width to look good across all platforms.

You can add this css to set it to 2 columns on mobile, that may help if you can’t upload higher quality photos.

@media only screen and (max-width: 479px) {
.woocommerce .products .product {
  width: 50%;
  float: left;
}
}

– Ed