Dawn Version 11.00 blurry image banner (desktop and mobile)

[astreaW]

Hi,

I've been really struggling to get my image banner to not be blurry. Have tried resizing it to 1600x 1050 px, have tried different formats but it's still coming up blurry. Especially on the mobile version.

Have read a bunch of shopify discussions and tried their solutions but unfortunately it's 

The website is sketchinotes.co.za

[Shay]

Hi @astreaW 

Thank you for sharing a link to your website. I can see that the banner image you are referring to is not as crisp as it could be. Could you please share a copy of the image here so that I can review the size and dimensions of it. That will help me troubleshoot this with you. I have a few questions as well:

• Does the image quality look different when you view it on your computer directly?
• Does the image quality look different if you upload the image into the Shopify admin under Content > Files (left hand column in the admin)?
• Does the quality look different if you upload the image to a third party image host (like https://www.flickr.com/)?

Let me know!

[astreaW]

Hi Shay!

Thanks for replying to my message. I have attached the image below.

As to your questions:
1. The image quality looks great when I view it directly on my computer
2. The problem still persists even if I upload it directly to Content > Files
3. The quality doesn't look too good when I upload it to flickr

[Shay]

Thanks for confirming that. It looks like the image was uploaded to the community servers here so it has been compressed and is not in it's maximum quality. Can you please try sharing the image file as an attachment. You can use the "Drag and drop here or browse files to attach" field just below the message box when you reply. 

[astreaW]

Unfortunately the drag and drop box doesn't support jpegs. Here is the url for the image https://cdn.shopify.com/s/files/1/0822/1799/2507/files/Banner_1600x900_d96c8253-51d6-4b3f-a8c4-9ab8c... 

[Shay · Accepted solution]

Thank you for the link! 

So it looks like the image is being compressed upon upload, which is great for site loading but not so great for image quality. The compression is usually minimal, but some images end up visually losing quality when that happens. You can try saving the image in different formats and color modes to see if that improves the image quality. If that doesn't work you will need to host the image outside of Shopify on a lossless image host so that the image isn't being compressed.