Blurry product images in Dawn theme

[rusinov]

Hey guys, I'm having issues where my product images are very blurry on the front end. They are fine when I preview them on the back end. Start happening after I've switched to the new Dawn theme. Images that I've uploaded are 1000px +, but site displaying them at half of that. Is there a way to fix that? Site: sapandbark.com

Thanks!

[rusinov]

I've opened an issue on GitHub for this with more details: https://github.com/Shopify/dawn/issues/616

[HamishDavisonIC]

I don't know why people always ask for your link first

It's easy my friend

Video:

How to make your product images smaller in Shopify 2.0 Dawn theme

Firstly you can identify the problem:

The product image is too large

In this example you want to look for product__media in section-main-product.css

Then you simply want to change the .product:not(.product — no-media) .product__media-wrapper {
 max-width: 64%;
 width: calc(64% — 1rem / 2);
 }

Change the percentage to whatever you want and you’re done

[rusinov]

Hey Hamish, unfortunately this does not solve the problem I'm having. The issue isn't the size of the block. Issue is that the image itself gets downsized in half and then displayed at full width with making it blurry.

I've fiddled with the product-media.liquid file, I believe the answer lies somewhere in these bits of code, but can't decipher it. The zoom-in modal opens image even larger and even more blurrier.

{%- if media.media_type == 'image' -%}
  <img
    srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: '550x' }} 550w,{%- endif -%}
            {%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | img_url: '1100x' }} 1100w,{%- endif -%}
            {%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | img_url: '1680x' }} 1680w,{%- endif -%}
            {%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | img_url: '2048x' }} 2048w,{%- endif -%}
            {%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | img_url: '4096x' }} 4096w{%- endif -%}"
    sizes="(min-width: 750px) calc(100vw - 12rem), 100vw"
    src="{{ media.preview_image | img_url: '750x' }}"
    alt="{{ media.alt | escape }}"
    loading="lazy"
    width="1100"
    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
    data-media-id="{{ media.id }}"
    {% if variant_image %}class="product__media-item--variant"{% endif %}
  >
{%- else -%}

[HamishDavisonIC]

I'm not at home so I can't test this but you could try removing the if statements like I have here

{%- if media.media_type == 'image' -%}

  <img

    srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: '550x' }} 550w,{%- endif -%}

    sizes="(min-width: 750px) calc(100vw - 12rem), 100vw"

    src="{{ media.preview_image | img_url: '750x' }}"

    alt="{{ media.alt | escape }}"

    loading="lazy"

    width="1100"

    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"

    data-media-id="{{ media.id }}"

    {% if variant_image %}class="product__media-item--variant"{% endif %}

  >

{%- else -%}

[vccreative]

I tried this and won't let you save the code.

[HamishDavisonIC]

Interesting, i'll have to have a closer look when I get home. Will have a solution for you in around 2 hours 

[vccreative]

Yes, I believe the same and I've been changing the measurements but no luck.

[rusinov]

I've tried that, no cigar. I managed to get thumbnails to look better, but zoom-in modal is still very blurry.

If you delete this from product-thumbnail.liquid:

But that's a hack not a solution.

[HamishDavisonIC]

Could you try deleting everything in the <div> </div> and see what happens?

You can always undo after