Collection image resolutions all over the place

[MyCsPiTTa]

Hi,

I'm finding the resolutions of my Collection Banner vary wildly across different parts of my live site - desktop and mobile. (https://gardenhearth.co.uk/collections/bonfeu)

On Desktop:

The original image in Canva looks fine (1600 x 400 jpg).

 

But once uploaded as the Collection image, in the Collection Banner it's lost a lot of sharpness (Collection Image Height set to "Adapt to Image"). Probably because it's now somehow become a 750 x 118 WEBP.

And when zoomed as a Collection List card, it's even worse.

 

On Mobile:

The Collection List card actually doesn't look too bad - better than Desktop

But the Collection Banner looks like absolute garbage. Its also not respecting the dimension ratio, but that's a secondary concern to the resolution.

 

I've seen other post similar problems here but none encompass the whole range of issues I'm experiencing.

Any help would be greatly appreciated!!

[Zivanov]

The issue you are experiencing with the intrinsic size being lower (750x188px) than expected is due to the image size that Shopify generated based on the configuration or optimization settings applied to your store.

The width parameter might have been set in the Liquid code, resulting in a smaller image being fetched than the original upload.

[MyCsPiTTa]

Thanks Zivanov,

So, are you suggesting this is abnormal theme behavior which I should contact the developer about? It's a 3rd party theme provided to members of a popular dropshipping course.

Or is it something I could solve with some minor code tweaks, as I've seen with others here? I'm not great with code but can copy/paste snippets into liquid 😉

[Zivanov]

If it is a third-party theme, I am not exactly sure of the name of the file you would need to look in. However, it is a minor tweak, and the developer should be able to resolve it easily.