Why does my homepage banner image look blurry on desktop?

[agori]

Hey guys! My home-page banner image looks really blurry and bad on desktop. While the image itself is really good and clean, the quality drops significanty when I upload it on shopify. Any help? Here you can take a look https://agori-jewellery.com/

[amorlett]

your image is portrait and should be a landscape if you put landscape version of the same model it should be fine

[GemPages · Accepted solution]

Hello @agori 

Your original image is pretty sharp. However, the original size of the image is only 1100x608px while the size of the website on the desktop is larger. So on the desktop, your image is stretched, resulting in blur.

You can use an image with a larger width, such as 1920px, then it will not be stretched anymore and will ensure the sharpness of the image.

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[eskimoquinn]

Thank you for this! I've been trying to figure out how to prevent the image in the Image Banner from cropping vertically, trying custom CSS, etc… just increasing the width of the graphic is keeping it from scaling up vertically and getting cropped. Is there a better way though? I had to go up to 3000px width to keep the full height of my image on a wide monitor. CSS to constrain the image to the height of the div instead of the width? 

And if this OP is still around, I love your store!

If it helps, here is mine for reference (just getting started at the time of this posting): https://hdtees.com/pages/projector

Thanks!