Why are my website images with text appearing blurry?

[Hallonolle]

Ok so I have this issue that my images with text on them get blurry on my site. This includes product images with text, my home page image with text and my logo. The images are more blurry on phone than they are on desktop but still pretty blurry on desktop too.

I can send url but only in private.

[Nick]

Hi @Hallonolle,

That does seem annoying for sure. Usually when your images appear blurry and change color it's because the image was stripped of its color profile, and compressed upon importing. You'll want to ensure that the images you're using are 1024x1024 high-resolution photos to ensure that the compression doesn't alter the appearance.

Shopify has a technical guide and a blog post which goes into this in more detail:

• Size paramaters for images (Technical guide)
• 10 must know Image Optimization Tips (Blog) 

Without seeing or going into your store/ store admin, it's hard to know more, but if you'd like to speak to someone on our support team in real time, you can do so by logging in here. 

[peacefulZen]

I know this is a bit old. But I found the answer to this issue here: https://community.shopify.com/c/shopify-design/how-to-increase-image-resolution-in-collage-liquid/td...

Specifically, the answer posted by LitExtension here: 

<img
    src="{{ block.settings.image | img_url: 'master' }}"
    alt="{{ block.settings.image.alt | escape }}"
    loading="lazy"
    width="{{ block.settings.image.width }}"
    height="{{ block.settings.image.height }}"
>

After I switched to image master, alt escape, and lazy loading the system started to use my original hi-res images that I had uploaded instead of smaller images.

[alihxn]

Please accept this as the answer, I have been very frustrated by trying the wrong solutions. Thank you very much