CSS code that compresses images

Highlighted
Shopify Partner
15 0 1

Hey guys.

I was having this question for a while, because I recently started learning CSS.

 

This is a website of a friend of mine, he asked me if I could take a look and make collection images to be same quality as in the product page.

BAD QUALITY

https://medaksa.lt/collections/moterims

GOOD QUALITY

https://medaksa.lt/collections/moterims/products/crafton-1

 

I'm aware of this slowing down the website, but I'm wondering what kind of CSS property I should be looking for, that suppresses the images?

Thanks a lot. 

 

 

 

Highlighted
Shopify Partner
9444 1187 3312

Helllo, @generatorius 

Welcome to the Shopify community!
and Thanks for your Good question.

your store is password protect.
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Shopify Partner
15 0 1

Ah, my bad!

Password: liucina123

0 Likes
Highlighted
Shopify Partner
9444 1187 3312

@generatorius 

can you please try this 

https://www.shopify.in/partners/blog/img-url-filter

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

@generatorius 

 

This isn't controlled by CSS, on the collection page a 400px image is requested, 

https://cdn.shopify.com/s/files/1/0457/9554/1148/products/Spiro1_400x.jpg?v=1603673832

on the product page, a 1024px image is requested.

https://cdn.shopify.com/s/files/1/0457/9554/1148/products/Spiro1_1024x1024.jpg?v=1603673832

you will have to change the collection page to request a high res photo you will need to find the following in your collections liquid and adjust accordingly

 

{{ product.featured_image | img_url: '400x' }}

 

 

Please like and mark my post as a solution if I've helped you, thanks.
0 Likes