Why is my first image losing quality when I upload a second image to the image banner module?

[lcramirezt]

When I upload a second image to the image banner module from the dawn theme, the first image immediately loses quality and becomes blurry/pixelated. The second image still works fine and both images are fine in terms of resolution. Is there any solution for this buggy thing?

[akshay_bhatt]

Click to expand...

hey @lcramirezt ,

First of all check the image size recommendations

Disable Shopify Image Compression

follow these steps

Go to online store>themes

Click on actions > edit code for the Dawn theme.

Find the file where the image banner is being rendered. This is usually under sections or snippets , and it could be named something like banner.liquid or image-banner.liquid .

look for the image tag in the file

change this:

{{ image | img_url: 'large' }}

to this :

{{ image | img_url: 'master' }}

after this you have to add the custom css:

.image-banner img {
    image-rendering: auto; /* Ensures images are displayed without distortion */
    image-rendering: crisp-edges; /* Sharpens images for certain browsers */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

regards

Akshay Bhatt