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

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

lcramirezt
Shopify Partner
2 0 0

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?

 

lcramirezt_0-1729826853100.png

 

Reply 1 (1)

akshay_bhatt
Shopify Partner
50 5 5
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

- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
- Email: akshay.bhatt9113923240@gmail.com