d
Topic
Posts:
150
10 days ago

I compressed some images but still I see on the possible optimization option!

Hi Shopify,

 

I tested my website (www.fashionmisoul.com) in pagespeed insights and it says some images need to be compressed I compressed some through www.tinypng.com but still I see those images (that I compressed) in optimization option! Please someone let me know the reason.

Please see the screnshot at: https://cloudup.com/ccZvB3K0GeM

Thanks

 

 

i
Replies
Posts:
1113
9 days ago

tinypng.com is a really good tool for optimizing the file size.

However Pagespeed insights also takes in consideration the image natural width and height size.

For example the "Tops" image may be optimized but its natural size is 800x600px. On the homepage it will be displayed at 350x263px: https://cdn.shopify.com/s/files/1/1282/8513/files/feature_x6xopt_18f31393-7bee-4fbf-baba-9579605a8e50_800x.jpg?v=1502278398

So, optimize the image and use the image size parameters to manage the size: https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters

For even better control take a look at responsive images: https://jakearchibald.com/2015/anatomy-of-responsive-images/

Hope it helps

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
150
9 days ago

Hi Mircea Pitura,

First of all thank you so much for your prompt response.As for the size of "TOPS" because in customize option it says 800 x 600 JPG recommended I wonder if I crop the size in some devices won't be shown correctly.How can I fix that issue?

 

Thanks

Posts:
150
7 days ago

According to this link:https://jakearchibald.com/2015/anatomy-of-responsive-images/

I need to do some changes in the image.In style.css.liquid I have difficulty to find the image.

And how can I apply the following code in the link that you provided me with to my picture?

<img alt="A cat" width="320" height="213" src="cat.jpg" srcset="cat-2x.jpg 2x, cat-3x.jpg 3x">

Thanks