Shopify themes, liquid, logos, and UX
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!
Please share your store URL & screenshot.
Thanks!
URL: damandia.myshopify.com
PW: roomaw
Appreciate your help!
Please check following URL for help
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?
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?
Did you manage to find out?
I'm hunting for the same thing.
I'm also struggling with this - please let me know if you find a solution.
I found it.
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.
Thanks! I'm struggling to find that section in my code. Could you please send a screenshot of where you found it?
I can do that tomorrow morning. Meanwhile look for your product-card.liquid file
I'm on Dawn, so that might make a difference.
Do not be aggressive with the difference between size changes, spend time testing the minimum size needed when unsure.
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.
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.
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
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
@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?
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
Did you find a fix for this issue? I'm having the same problem with the latest DAWN 7.0 download 😞
It was suddenly ok!
Thank you so much for this. Was able to resolve the issue of my featured collection images being blurry on the landing page.
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
Sarah, you can share your details on arpansrivastava@cedcommerce.com.
Thanks
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
I only added my store 2 weeks ago so it seems to be the latest version that i'm using.
Hello, diod you manage to sort this out? having the same issues and geetign overwhelmed by all the different suggestions around...thank you
I had a similar problem, this was the solution...
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024