Colorblock theme > collage > blurry images

The image I’m using for the largest block is not a perfect square, so I can’t use the original image ratio. This means the image is automatically zoomed to fill the image block, but for some reason Shopify or the theme makes the image blurry after this process.

I have used a very large resolution image as a test. Same result. I have taken the same image and cropped it to a square and the image does NOT get blurry, because it isn’t zoomed in.

So, I need the image zoomed in to fill the block but zooming makes the image blurry regardless of its original resolution. Is there anything I can do?

Thank you.

2 Likes

@fencetalk

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hello, and thank you. The URL is https://yourhealthhelpers.myshopify.com/ The larger collage image is the issue. @KetanKumar I will send a message with the site password.

1 Like

@fencetalk

can you please upload product image 1024x1024

The image doesn’t become blurry if a square image is used. A 1024x1024 image will look fine.

The reason a wide format picture is needed is on a mobile device the large collage block (i.e., the block in question) becomes full width so the wide format of the image fits perfectly and everything is seen. On the desktop the block is square, so the image is zoomed to fill the block and becomes blurry.

If “use original image ratio” is checked the image is no longer blurry but there is space above and below the image in the block because its ratio is wider.

2 Likes

@fencetalk
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

@fencetalk

how do you like that?

@KetanKumar ?

1 Like

@fencetalk

yes, man how can i help you?