-
Posts
-
Hi guys,
I have set my woocommerce product image to 705px in Customizer to take advantage of the Masonary image size (705x705px).
Unfortunately Enfold is still setting sizes to 450px in the responsive part of the
tag, eg:
sizes=”(max-width: 450px) 100vw, 450px”
This is making the main product image very blurry as it is using the 450px version.
How to fix this?
Cheers, Jason
Hi Jason,
Thanks for contacting us!
Please go to Enfold > Performance, then disable Responsive Images
Hope it helps.Best regards,
NikkoHi Jason,
Thanks for giving the links, I tried to check both but the 1st link seems to be blurry in all sizes (I have included a link in private content).
I also inspected it and images used are not the small ones and it’s not stretched as well.
As for sizes=”(max-width: 450px) 100vw, 450px” it simply means when the width is 450px or lower (which is applicable to mobile phones in portrait mode), make the size of the image 100vw with fallback of 450px which is basically 100% width of the screen.
You can verify it in https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#using-srcsetUsing srcset with width (w) descriptors like this means that it will need to be paired with the sizes attribute so that the browser will know how large of a space the image will be displaying in. Without this information, browsers can’t make smart choices.
The 2nd link you gave does not look blurry on my end.
Best regards,
Nikko
- You must be logged in to reply to this topic.