Why is my website's banner image appearing blurry on desktop?

Hey,

The banner image for desktop is blurry even though the png image itself is the correct size and crisp.

My website is: gigachew.com.au

The image is: https://cdn.shopify.com/s/files/1/0806/8320/4902/files/God_qual.png?v=1695611273

I’ve tried making it JPG

Uploading from the content>File section

Resizing the image

Nothing’s worked so far.

Hi @LiamP191

You can try to change setting of image height in that section to Adapt to image and check if it ok

If you don’t want that height then you can go to your Online store > Themes > Edit code > open image-banner.liquid file, find this line of code

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change to this

assign widths = '3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3840'

And then check again.

1 Like

Hey Dan,

The second fix worked

I wish Shopify were a little better at including these options in there builder.

For someone like me who doesn’t know code I’ve had to scrape the web and ask in these forums to do simple things like fix a blurry image and make a different image for my desktop and mobile banners.

Thank you so much for the help regardless, you’re a life saver.

1 Like

I’m glad it works for you :grin: !