Image blurred

Solved
New Member
2 0 0

Hi,

 

I am wondering what makes the dog banner on my store appears to be blurry https://cw-4.myshopify.com/collections/sample-high-school. I have used different image files, such as jpg, png, and webp. Nothing seems to work. The original picture itself is not blurry so I am not sure what causes this and how to fix it.

 

Here is a snippet code of how I inserted the image to the collection page

<img class="banner" src="{{ collection.image | img_url: 'large' }}" width="100%" />

 

Thank you!

0 Likes
Highlighted

Hello @jesshernawa,

Actually your image size is 480*180..Thats why the image was blurry..

Please use large width banner so that it will show in a proper way..

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Success.

Hi @jesshernawa 

Please try to change it to <img class="banner" src="{{ collection.image | img_url: 'master' }}" width="100%" />

And check your image again

LayoutHub - Build your E-commerce store by the easiest way
0 Likes
Highlighted
New Member
2 0 0

Hi @KhangPham ,

 

Thank you so much for the solution!

 

0 Likes
Highlighted

You are welcome :)

LayoutHub - Build your E-commerce store by the easiest way
0 Likes