Blurry product images in Dawn theme

Solved
rusinov
Tourist
14 0 3

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!

sapnadbark.com
Accepted Solution (1)

Accepted Solutions
HamishDavisonIC
Explorer
52 6 42

This is an accepted solution.

@rusinov if you could mark this answer as a solution I would appreciate it so it reaches more people:

Let's talk about how to make your Dawn images not so blurry!

This was more because Dawn is currently in development than anything else 

All we need to do is update Dawn, all your products etc. will be saved but you will have to quickly put your images (which will already be uploaded) back into the customizer, but it's worth it as the quality is vastly superior

HamishDavisonIC_0-1631922161324.png

HamishDavisonIC_1-1631922186745.png

HamishDavisonIC_2-1631922204984.png

I personally recommend Craft as it looks nice af

 

 

View solution in original post

Replies 35 (35)
rusinov
Tourist
14 0 3

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

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42

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:

HamishDavisonIC_0-1631459826553.png

 

The product image is too large

HamishDavisonIC_1-1631459826581.png

 

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

HamishDavisonIC_2-1631459826583.png

 

 

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

HamishDavisonIC_3-1631459826639.png

 

 

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

 

rusinov
Tourist
14 0 3

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 -%}

 

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42

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
New Member
5 0 0

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

HamishDavisonIC
Explorer
52 6 42

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

vccreative
New Member
5 0 0

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

rusinov
Tourist
14 0 3

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:

Screen Shot 2021-09-13 at 10.04.05.png

But that's a hack not a solution.

sapnadbark.com
HamishDavisonIC
Explorer
52 6 42

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

 

You can always undo after