I am using the all-new Sense theme. The banner image is getting pixelated as it is resized for mobile.
Store link - inhancestore.com
Banner image URL for desktop - https://cdn.shopify.com/s/files/1/0597/9930/6427/files/Website_Banners-4.png?v=1654232500&width=1500
Banner image URL for mobile - https://cdn.shopify.com/s/files/1/0597/9930/6427/files/Website_Banners-4.png?v=1654232500&width=535.
How can I fix the pixelated banner image from mobile?
Hi @ribhuchawla ,
Wherever the mobile banner url is being referenced in the code, you can get rid of the defined width in the URL. If you just use "https://cdn.shopify.com/s/files/1/0597/9930/6427/files/Website_Banners-4.png", it shouldn’t resize the banner.
Hope this helps.
The image URL is not directly referenced and the above would not solve it and the mobile URL was not referenced.
Although I found a solution. Sharing below for anyone who faces this in the new (June 2022) Shopify theme named Sense.
The answer is in image-with-text.liquid. The website is responsive and the code included srcset to reduce image size based on the screen size. I removed all the conditions that were <1050 screen width.
Removed all the conditions except {%- if section.settings.image.width >= 1500 -%}.
