Blurry collections images Dawn theme

Diashop
Excursionist
15 0 7

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 26 (26)

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Diashop
Excursionist
15 0 7

URL: damandia.myshopify.com

PW: roomaw

Appreciate your help!

Capture.PNG

 

dmwwebartisan
Shopify Partner
12280 2546 3694
Diashop
Excursionist
15 0 7

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 7

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 17

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 17

I found it.

 

 

Learning something new every day

SpotterJ
Shopify Partner
67 1 17

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 17

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
SpotterJ
Shopify Partner
67 1 17

@Sarah05 Here's that screenshot:

 

Screenshot 2021-12-07 at 12.40.46.png

Learning something new every day
PaulNewton
Shopify Partner
6274 573 1319

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.

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PaulNewton
Shopify Partner
6274 573 1319

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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


SpotterJ
Shopify Partner
67 1 17

@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
noap
Excursionist
32 0 2

Thank you @PaulNewton and @SpotterJ i did what @SpotterJ suggested ( was having the issue with crystal clear images on product pages but blurry on collection thumbnails), copied exactly what was mentioned by Spotter and it is definitely better. My images are 1296x1829 I got a bit confused by your explanation @PaulNewton do the corrections made make sense if i have this size mentioned on my images? been pulling my hair trying to solve this....i dont want to do anything wrong that might affect page speed unnecessarily etc, at the same time i cannot have blurry images! Many thanks for any confirmation. You reply was a bit tech for me and i got confused 🙂 Attaching photo of before and after, much appreciated

Neil_Stuber
Visitor
2 0 1

Did you find a fix for this issue? I'm having the same problem with the latest DAWN 7.0 download 😞

noap
Excursionist
32 0 2

It was suddenly ok!

happiblooms
Visitor
1 0 0

Thank you so much for this. Was able to resolve the issue of my featured collection images being blurry on the landing page.

Arpan12
Shopify Expert
54 2 9

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
Sarah05
Tourist
10 0 4
Arpan12
Shopify Expert
54 2 9

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

Arpan12
Shopify Expert
54 2 9

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

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

noap
Excursionist
32 0 2

Hello, diod you manage to sort this out? having the same issues and geetign overwhelmed by all the different suggestions around...thank you

AndrewM3
Tourist
3 0 0