How to Compress Images on Shopify

How to Compress Images on Shopify

2018-11-08T16:25:41+00:00November 8th, 2018|Performance Optimization, Tools|0 Comments

An easy way to make your site faster is to compress your images.

On Shopify sites, there is a 2 step approach to maximize your compression:

  1. Install an image optimization app like Crush Pics
  2. Manually compress any images that apps can’t reach, using a tool like TinyPNG.com

Due to API restrictions, image optimization apps aren’t able to get all the images on your site.

So even with an optimization app installed, you might still get warnings like this in PageSpeed Insights:

image compression warnings in pagespeed insights

To fix that you’ll have to manually compress them (Step 2 below).

Crush Pics / optimization apps will auto compress:

  • Product images
  • Collection and blog featured images
  • Any images you upload into your Assets folder

These need to be manually compressed:

  • Images uploaded in your Customize Theme section
  • Images inserted inside pages or blog posts
  • Images uploaded to the Files section in your Settings

Step 1: Auto compressing your images

Install Crush Pics and set to automatically compress. For a guide on our recommended settings, check this post out.

Step 2: Manually compressing your images

You can use an online compressor called TinyPNG to manually compress any images (JPG or PNG).

Head to TinyPNG.com and upload your images:

tinypng image compressor

After uploading those same images above that gave warnings in PSI (plus some huge banner images that PSI didn’t detect), we now see they get compressed and save about 3MB… that’s a lot!

file savings from compressing images

Now upload those images back where you got them and enjoy the speed savings 😎

How to find and download images that need to be compressed

You can use PageSpeed Insights to get a list of images Google thinks should be compressed. Sometimes it misses files, so as a general rule of thumb, any files you upload into your Customize Theme section should be compressed.

If you have the original images on your computer, you can upload those to TinyPNG.

If you need to download the files from your site instead, you can usually do this:

1. Right click on the image on your page, then select “Open image in new tab”.

2. The image URL will probably look something like this:

  • https://cdn.shopify.com/s/files/1/1339/9941/t/29/assets/image1.jpg
  • or https://cdn.shopify.com/s/files/1/1339/9941/t/29/assets/image1_800x.jpg

If it’s the first example, just download the image and run it through TinyPNG.

If it’s the second example, the highlighted part in orange is a Shopify image URL filter, meaning it takes the original image and serves up a specific size (to load faster). In this case, you’ll need to delete the “_800x” (or whatever the number is), then reload the page to give you the original image.

Then you can download it and run it through TinyPNG.

What does image compression do?

  • Strip unnecessary meta data from the image file
  • Reduce the number of colors in an image
  • Uses algorithms to combine data and similar patterns
  • If you select “lossy” compression (instead of “lossless”), it will further compress by dropping the resolution to make the file even lighter (I prefer “lossless” to maintain optimal resolution, but you have options)

The Future

It would be nice if image optimization apps could cover your whole store, but for now they can’t. If you know of a completely automated solution, feel free to drop it in the comments, but I haven’t found one yet.

In the meantime, I think the extra minute it takes to manually compress your theme and blog post images is worth the speed savings. Faster sites get better conversions, more traffic, better SEO rank, and overall perform better.

If you’ve compressed your images using this method and still get image warnings in PSI, it’s likely that your theme is serving up larger images than is necessary. In that case, you can contact us to fix it, or if you’re handy with Shopify code, check the size of the image loaded vs the size the liquid code is instructing to serve up.

About the Author:

Joe's a Shopify Expert, eCommerce entrepreneur, and the founding architect of Speed Boostr. Outside of tech he's big time into trees and nature 🌲🤙

Leave A Comment