Images perfect on desktop but blurry on mobile

[avril546]

Using the Dawn theme. I've looked through the documentation and nothing has worked. On Desktop the images are perfectly fine, but when I view on mobile they are blurry no matter the size or format. Any help would be appreciated.

[avril546]

I've tried using the resolution images, all of them are the recommended sizing and it's weird that the desktop is fine but the mobile is the issue. And I always use jpg or webp so that's not an issue.

How can I disable lazy loading? I've never had to do this in shopify. Not as intuitive as wordpress.

Is there any css code I can put in so that it makes ALL my mobile images "fit". I'd normally use something like "object-fit: cover;" but it doesn't seem to work as it's still blurry.

[tim]

Hard to tell which section exactly you're talking about, but Dawn has some errors with image sizing. Check this post https://community.shopify.com/c/shopify-design/full-resolution-main-image/m-p/2835028#M742075 

On mobile, they use this code to calculate image size https://github.com/Shopify/dawn/blob/68bf2a77c9eb3a5bcdb633f9a49d8065a93267d3/sections/image-with-te...

calc((100vw - 50px) / 2)

Which tells the browser that image width is 2 times narrower than it should be. (Say, screen is 350 pixels wide, then image they are requesting is 150px-wide).

My suggested code for this line is this.  It will request the image which is 320px wide.

 calc(100vw - 30px)

[DaisyVo]

Hi @avril546 

Can you share your store URL?

Look forward to your response.

Best,

Daisy