Is compressing image files actually improving page load speed?

[AlanDerrick]

Concerning images, I would like to get some unbiased advice on whether to compress or not to compress image files to help with page load speed. I already understand that there are many other issues affecting speed. I'm just trying to isolate and address this one specific question.

I keep reading recommendations about taking special steps to use an app or paid consultant to reduce the file size of images uploaded to Shopify.

Shopify states, “Images don't need to be manually compressed prior to uploading. Always upload the best quality images you can provide.” https://help.shopify.com/en/manual/online-store/images/theme-images

From what I can tell, Shopify is resizing and compressing the images after they are uploaded. What purpose would be served doing that through some other means only to have Shopify do it again?

Thanks in advance.

[oreoorbitz · Accepted solution]

So there are two seperate issues when it comes to image's impact on speed

1. Image quality

2.
Image size as rendered by the frontend code on shopify

Image Quality
So image quality seperate from image size is things like the color quality, brightness quality and pratices like color subsampling
When you upload an image to shopify, it stays the same, nothing happens to it. When that image is presented to a user, the image is passed through the shopify CDN, and it is optmized for optimal quality vs filesize

2.
Image size, lets say you have an image that is 3000px large, a logo image, you upload it to shopify, on the server, that image is 3000px, and stored like that. When that image is referenced in front end code, the creators of that front end code can choose the size to fetch that image as, up to it's' original size. so if the developers are consicous of preformance, for the logo image, they will render it in a reasonable size, like 200px for a 100px container.

So usually, when uploading an image to shopify, and using a well made theme, you don't have to worry about image size, or pre-compressing it.

However, there are plenty of exceptions, for instance, you have a modifaction done to your theme, and the developer doesn't bother with correct sizing, when you upload your 3000px logo, it is rendered as 3000px.
There are also page builders that host images you add on their own severs, and have no image compression.

So yeah, in short, its an issue, and a not an issue, it depends on your specific situation.

[MS_WEB_DESIGNER]

Hi @AlanDerrick,

Welcome to the Shopify Community!

I am Ani From MS Web Designer(https://www.mswebdesigner.com/) (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore ). I helped 1000+ Shopify Store owners optimize their website loading speed for mobile and desktop and increase their conversion rate.

I will love to help you with some expert feedback here.

- Kindly Provide your Store Url,
- Also, Mention Which Shopify theme you are using

- How many Apps you are using?

Note: If your store is protected with ‘store Font password,’ please Send it here or DM me.

If you have any concerns feel free to ask me!


Pro Tips :
Proven Shopify App to Improve and Sales Conversion Dramatically

Coupon Discount Popup in Cart
https://apps.shopify.com/available-discount-coupon-list-on-cart-page
Elegant Sticky Add to Cart, Floating Cart, Sticky Checkout

https://apps.shopify.com/cart2sale

Recover abandoned carts and market better with web push

https://apps.shopify.com/pushowl?

Here is a helpful article to improve the Shopify Page Speed and how to maintain the Speed post Speed optimization that our experts wrote!
Based on  500 + Case Study  

https://blog.mswebdesigner.com/category/speed-optimization/

Regards,
Ani

[Cedcommerce]

Hi @AlanDerrick 

Image compression is used to improve the performance of the website, but as per your concern, you want to know whether it is really helpful and if yes up to what level. So the answer to your question is “YES”.
Image compression in Shopify can be done in two ways.

1. Using third-party applications such as tiny png, image resizer, etc. 

When you use such tools to compress images the overall size of the image is lowered and it helps in reducing the overall page size. This has an impact on speed scores but it is not much significant.
Also, it has some drawbacks such as the quality of the image is also compromised at times and it is a very time-consuming task to go and first upload images on the platform, then compress them and again upload them back on the site. 

1. Using Shopify liquid code. 

This technique is much better than the previous one because of the following reasons: 

1. It helps in reducing the overall size of the image which is rendered as we have full control over the pixel count we need to show on the website as per the area where that image has to be displayed.
   For ex: Let's go with the below scenario:
   Image original size: 1000x1500
   Parent container ‘div’ size: 300x450. 

Shopify code: <img src=”{{ ‘image.png’ | img_url: ‘original’ }}” alt=”image”/>

When the image will be rendered using the above code then we can see that though the size of the image required was 300x450, the actual size of the image being rendered will be 1000x1500 which will raise an issue of “Properly sized images” on page speed insights and also will increase the page size, and thus is responsible for reducing the page speed.
The solution to this is we can set the size through liquid as below: 

 <img src=”{{ ‘image.png’ | img_url: ‘300x450’ }}” alt=”image”/>

Now the image the size of the image required was 300x450 and we have set the same size in the “img” tag which will be an easy fix for the problems caused above.

You can read more about this at https://www.shopify.in/partners/blog/img-url-filter

Another method of achieving this is through rendering images using ‘srcset’. You can read more about “srcset” to load images using https://www.shopify.in/partners/blog/using-responsive-images. 

1. This method removes issues related to images such as “properly sized images”, and ”avoid enormous network payloads” which have a significant impact on speed scores.   
2. This method is dynamic which means that once you have successfully added the code of the optimized image. In the future, there will be very less effect on the new images that we add as they are being compressed automatically through the code when rendered. 

We need not modify each image using this technique the way we were supposed to do using third-party applications. Which will save time and effort. 

Hope it helps, let us know if you need any help. 

All the best, 

Team CedCommerce