Shopify themes, liquid, logos, and UX
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?
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024