FROM CACHE - en_header

Blurry collections images Dawn theme

Diashop
Excursionist
15 0 6

We have an issue that our product images in collection views and product sliders e.g. on "home" landing page are blurry. When clicking on the individual product the images are crystal clear on the product page. 

I already read through this forum but could not find a fix without changing the entire theme. So I really need your help to fix this.

Thanks in advance for any advice!

Replies 24 (24)
dmwwebartisan
Shopify Partner
11024 2381 3408

@Diashop 

Please share your store URL & screenshot.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
Diashop
Excursionist
15 0 6

URL: damandia.myshopify.com

PW: roomaw

Appreciate your help!

Capture.PNG

 

dmwwebartisan
Shopify Partner
11024 2381 3408

@Diashop 

Please check following URL for help

https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/td-p/1311709/page...

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
Diashop
Excursionist
15 0 6

I know this thread but to what I understand their solution is to rebuild everything in craft theme. I would not really like to do it because it will be much work. Is there any code solution?

Diashop
Excursionist
15 0 6

After some investigation I found the following:

The original full resolution image is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test.jpg?v=1629651700

The file it pulls to be displayed on the page in the collection is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test_360x.jpg?v=1629651700  And this file is much too low resolution for the image size. But I can not find out why it is using such a low resolution and not a higher resolution version. Any idea how to fix that?

SpotterJ
Shopify Partner
67 1 14

Did you manage to find out?

 

I'm hunting for the same thing.

Learning something new every day
Sarah05
Tourist
10 0 4

I'm also struggling with this - please let me know if you find a solution.

SpotterJ
Shopify Partner
67 1 14

I found it.

 

 

Learning something new every day
SpotterJ
Shopify Partner
67 1 14

Find your product-card.liquid file and then this:

 

 

            <img
              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"

 

that's the code that finds the current viewport width and then the image resolution that goes with it.

 

you can choose what resolution image gets used for each viewport width. Its the resolution followed by an x that tells Shopify image server how big to render an image, ie filename_360x.jpg

 

I just upped every one to the next res up, so instead of a 360 pixels wide image, I go for the next one, 533 pixels. Rinse and repeat, and we get:

 

              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '360x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '533x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '720x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '940x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1440x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"

 

 

do the same for the set below, which renders the alternate (mouseover) images.

Learning something new every day
Sarah05
Tourist
10 0 4

Thanks! I'm struggling to find that section in my code. Could you please send a screenshot of where you found it?

SpotterJ
Shopify Partner
67 1 14

I can do that tomorrow morning. Meanwhile look for your product-card.liquid file

 

I'm on Dawn, so that might make a difference.

Learning something new every day
PaulNewton
Shopify Partner
4335 322 932

Do not be aggressive with the difference between size changes, spend time testing the minimum size needed when unsure.

Performance

Keep in mind when changing the default sizes of image outputs there will be a decrease in website performance, and an increase in customers bandwidth usage by serving larger images. Remember 1 image very rarely exists in isolation so this is compounded by EVERY product shown on a page using such a change.

For templates that display ALOT of product images extra effort should be spent prioritizing which products are allow to server bigger images.

 

Responsive image sizes

Per @SpotterJ's fix ,

To avoid edge cases of pixelation with responsize images make sure to to check that the featured_media.width is of a minimum size or the exact size value used with img_url.

The shopify cdn will not increase an images file size but this may not stop oddities with a theme frontend code, browsers quirks behavior, or the CDN's cropping behavior.

So cut it off from the start to avoid inverting the situation where instead of blurry image a store now has an edge case of pixelated images because the master image is too small and interpreted wrong. Or your just plain not getting the image size you expect while developing. This will be more apparent the larger the delta between the size change i.e. forcing 1000px width on a 600px image, or 1440px when the image is only 1000px, and a theme tries to display it at an inappropriate larger width.

 

 

Examples 

Taking the original 165, 

{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}

If you want a 360px wide image for screensizes of 165w and lower.

Check that the images actual width is suitable, this can become a bigger and bigger problem as you escalate through images sizes with bigger relative sizes.

{%- if product_card_product.featured_media.width >= 360-%}{{ product_card_product.featured_media | img_url: '360x' }} 165w,{%- endif -%}

Yes it can be kinda rare for products to have such a small original image size but you want to stop 1 set of edge cases from being able to create more edge cases.

 

Avoid vastly different values where the images actual size could be hundreds of px smaller than the images original size.

So asking for a 1440px when an images max original size is 1200px:

{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1440x' }} 1066w,{%- endif -%}

Will output an image that is only 1200px wide potentially leading to an edge case image pixelation issues in a theme.

 

Fix the minimum to either exact size needed or be within a reasonable distance so 1440 ~ 1400 ,etc

{%- if product_card_product.featured_media.width >= 1440 -%}{{ product_card_product.featured_media | img_url: '1440x' }} 1066w,{%- endif -%}

 

Technical notes - the initial code in Dawn for the width condition size , img_url size and viewport width size all use the same value making developer maintenance easier , because creating values for something like srcset is currently clunky for liquid to handle logically and not easy to do it in a way that's also highly configurable.

There's also the option of using Resolution switching, i.e. retina devices https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resol... where using vastly different image size is expected.

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
4335 322 932

Note there's also a new html filter image_tag that can streamline making responsive images

https://shopify.dev/changelog/make-images-responsive-with-the-new-image_tag-filter 

https://shopify.dev/api/liquid/filters/html-filters#image_tag 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Arpan12
Shopify Expert
54 2 8

Hi

We would like to go through your store so that we could get the exact feasible solution for you.

So, kindly share your store URL as well as the screenshots for the same !!

Thanks 

Arpan Srivastava
Store Analyst

Skype id-live:danbakker_2

Want to Increase your Sales on Shopify?
Now do connect with me on group also https://www.facebook.com/groups/Shopifysellershub/

Shopify Expert
Arpan12
Shopify Expert
54 2 8

We have gone through your store and found that your theme hasn’t been updated as the previous DAWN theme version that you are using consists of the issue you described above.

So , we would recommend you to update your theme as the issue has been fixed in the updated DAWN theme.

Do let us know if you have any further query 

You can connect on Email

Arpan Srivastava
Store Analyst

Skype id-live:danbakker_2

Want to Increase your Sales on Shopify?
Now do connect with me on group also https://www.facebook.com/groups/Shopifysellershub/

Shopify Expert
Sarah05
Tourist
10 0 4
Arpan12
Shopify Expert
54 2 8

Sarah, you can share your details on arpansrivastava@cedcommerce.com.

 

Thanks

Arpan Srivastava
Store Analyst

Skype id-live:danbakker_2

Want to Increase your Sales on Shopify?
Now do connect with me on group also https://www.facebook.com/groups/Shopifysellershub/

Shopify Expert
SpotterJ
Shopify Partner
67 1 14

@PaulNewton Really interesting stuff all round, and you are right about performance. One would need to look at specific resolution requirments.

 

Would you know how to make the html image filter work with other image type, ie file_img_url?

Learning something new every day
Sarah05
Tourist
10 0 4

I only added my store 2 weeks ago so it seems to be the latest version that i'm using.