In my featured collection section, when I’m showing small number of columns for products, pictures loose quality when they get bigger, but the same picture in product page is much higher quality.
Issue is not coming from uploaded image quality or resolution. It’s coming from the code of the Featured collection, can anyone help me to fix it?
I want my products to have same quality as product page.
The images for the grid items on big screens are displayed at a fixed width of 267px, which results in poor quality. You can improve this by changing the width for big screens to be dynamic, like this:
(min-width: 1200px) calc((100vw - 130px) / 4).
On the product page, the image width displayed on the site is 420px, but the image link applied has a width of up to 1946px. Example screenshot
This means when the image is resized to fit the frame, it will still look sharp. Additionally, it includes attributes for sizes, like in this example: Example screenshot
Conversely, on the collection page:
The size attribute is smaller, so the image link provided is smaller in resolution. However, it gets enlarged to fit the frame on the site, causing it to appear pixelated or blurry. Example screenshot
I recommend reaching out to the theme developer to resolve this issue.
