Blurry banner on mobile view

Store Design

Topic summary

A store owner reported blurry banner images on mobile devices while desktop versions appeared clear across multiple pages (homepage, collection pages, and about page).

Initial troubleshooting suggestions included:

  • Using high-resolution images (at least 1200px wide, 1920px for hero banners)
  • Checking theme settings for image compression or optimization features
  • Uploading separate mobile-optimized images
  • Using image upscaling tools like Canva

Resolution:
Code edits were made to three theme files (slideshow.liquid, main-collection-banner.liquid, and image-banner.liquid) which successfully resolved the blurriness issue.

The discussion concluded with the problem solved, though another user requested details about the specific code adjustments made—this question remains unanswered.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

My mobile view banner looks very blurry but clear on desktop. Can someone help me on this please?

Password : kyle12477

these are the pages that appears blurry on mobile but clear on desktop :

https://nothingchanges.com.my/

https://nothingchanges.com.my/collections/women

https://nothingchanges.com.my/collections/men

https://nothingchanges.com.my/collections/eid-25-the-eid-venture-of-alys

https://nothingchanges.com.my/collections/new-arrivals

https://nothingchanges.com.my/pages/about-us

2 Likes
2

Hello,

This usually happens because of image resolution or how the image is being scaled. Here are some steps I would recommend:

1. Check Image Resolution:- Make sure the image is high-resolution. For mobile, it’s best to use at least 1200px wide. If it’s a hero banner, go for 1920px wide to cover most screen sizes.

  • The image should be in PNG or high-quality JPEG format to maintain clarity.

2. Responsive Image Settings:- Check your theme settings. Some themes compress or resize images for mobile, which can cause blurriness. Look for settings related to image optimization or lazy loading.

3. Use Separate Image for Mobile:

Some Shopify themes allow you to upload a different image for mobile. This lets you optimize the resolution specifically for smaller screens.

4. Test on Multiple Devices:

Use Chrome’s Developer Tools or other responsive design testers to see how the image looks on different screen sizes.

3

Hi @nothingchanges , Banners looks well on both mobiles and desktop screens.

Ahmad31_0-1740560050191.png
Ahmad31_0-1740560050191.png323×703 158 KB

4

No, it’s blurry. Please help

5

@nothingchanges First you need to upscale your images by using canva

6

do you have a specific size suggestions?

7

by using this app on canva you need to upload your current images upscale it and replace it with orignal

Ahmad31_0-1740562853655.png

8

it is still the same. not working

9

I edited the code in a slideshow.liquid, main-collection-banner.liquid, and image-banner.liquid files to solve this issue for you.

1 Like
10

you saved my life! thank you!

1 Like
11

Very welcome!

12

Hi! can you please share what were the adjustments done on the code? thanks!

1 Like