Solved

Why does my homepage banner image look blurry on desktop?

agori
New Member
5 0 0

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/

Accepted Solution (1)

GemPages
Shopify Partner
5589 1261 1217

This is an 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.
GemPages_0-1672978272624.png

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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 3 (3)

amorlett
Shopify Partner
186 12 31

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

GemPages
Shopify Partner
5589 1261 1217

This is an 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.
GemPages_0-1672978272624.png

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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
eskimoquinn
New Member
9 0 0

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!