Shopify

How to Compress Images on Shopify (Easy 2021 Tutorial)

How to compress images on Shopify – In this article I will show you how to compress images on Shopify.

You will learn how to compress images and why it’s important for your page speed and SEO.

If you want to learn about the basics of SEO for Shopify, make sure you check my other articles:

If you need help with compressing and optimising your images on Shopify, feel free to check our Shopify SEO agency services.

What is Image Compression?

Image compression is the process of reducing the weight of an image. It’s generally used to improve the page load speed of a web page.

There are two type of image compression: lossless and lossy.

The lossless method compresses an image by keeping the same quality of the image before the compression. Instead, the lossy method removes some parts of the image to further reduce its weight.

The type of compression method chosen will also determine the format of the image file.

What Are the Most Common Image File Formats?

JPG or JPEG are the most common image file formats used on web pages.

JPG or JPEG

JPG or JPEG stands for Joint Photographic Experts Group and, together with PNG, is one of the most used image file formats for the web. It’s a bitmap compression method used for lossy image compression.

PNG

PNG stands for Portable Graphic Format and, together with JPG, is one of the most used image file formats for the web. It’s a compression method used for lossless image compression.

It also supports transparency, while JPG image compression cannot.

Why is Image Compression Important for SEO?

Image compression is important for SEO because it improves the user experience by reducing the time it takes for a page to load.

Google uses page load speed as a ranking factor since 2010 (source: backlinko.com). This means a website whose pages are slow to load will get lower rankings and visibility than a fast one.

How to Compress Images on Shopify

You can compress images on Shopify through an app or online.

If you have a number of images to compress (eg +20), it’s recommended that you use a Shopify app rather than optimising images online one by one.

How to Compress Images on Shopify with an App

You can compress images on Shopify by using one of the following apps (listed by number of reviews):

For our tutorial we will use Crush-Pics.

How to Compress Images on Shopify with Image Optimizer

To compress images on Shopify with Image Optimizer by Image Optimizer:

  • Install the app
  • Right after the installation, Image Optimizer will do an inventory of all the images uploaded onto your Shopify store

compress images on shopify image optimizer

  • Once finished, you will be asked to choose a preferred compression method between lossless and lossy. You will also be asked if you want to convert all your PNG images (lossless compression method) to JPG ones (lossy compression method). Unless you have a lot of transparent images and the background of your Shopify store is not white, you should choose Lossy
  • Choose Lossy and tick the ‘Convert PNG to JPG‘ box, then click on ‘Next

compress images on shopify image optimizer method

compress images on shopify alt text

  • You will then be asked to choose an alt text template. Go for the recommended one (make sure you tick the ‘Update only empty alt texts’ or else all your image alt texts will be overwritten
  • Click ‘Next

compress images on shopify alt text template

  • Don’t tick the box ‘Optimize Filenames

What this option does is renaming all your image file names to make them SEO-friendly. While this might seem like a good idea, it’s actually a very bad one. Renaming a file or page already indexed by Google will cause a 404 page not found error. Each error is like a signal to search engines that your site is broken. If you have a number of these errors, your Shopify store visibility will suffer as a result of that.

If you still want to go down this route of renaming your image file names, you will need to set up a redirect for each file. To learn more, you can read my article How to Create a URL Redirect in Shopify.

  • Click ‘Next

compress images on shopify file name

  • Choose the plan that best suits your requirements (the free plan will optimise up to 50 images)
  • Click ‘Next‘ and you’re done!

Please note:

Shopify doesn’t allow access to homepage slides, blog images etc. You need to compress them manually using the Manual File Uploader. You can read more here.

How to Compress Images on Shopify Online

To compress images on Shopify online, you can use one of the following websites:

The list above is not a comprehensive one. It’s just the online image compression website that I use the most.

For the purpose of this tutorial we are going to use Imageresizer.com.

If you want to learn more about image compression, make sure you check my article on How to Compress JPG Online & Increase Site Speed.

How to Compress Images on Shopify Online with Imageresizer.com

To compress images online with Imageresizer.com:

  • Visit imageresizer.com and select ‘Image Compressor

 

  • Upload or drag and drop your image and select ‘Compress Images‘ (you can compress up to 20 images in bulk)

compress images on shopify

  • In this example, we reduced the weight of the image by 81%
  • If you are happy with the result, click on ‘Download

compress images on shopify download

Sources

https://www.keycdn.com/support/what-is-image-compression#how-does-image-compression-work
https://www.shopify.com/enterprise/site-performance-page-speed-ecommerce
https://backlinko.com/hub/seo/pagespeed
https://stories.freepik.com/illustration/image-upload/amico

Author

Pasquale Mellone

Pasquale is Founder at Increasily.com, a H2H marketing agency based in Dublin, Ireland, and owner at print-on-demand ecommerce Mintycase.com. Pasquale has worked in Digital Marketing and Account Management since 2004. He currently lives in Dublin with his wife, stepdaughter and cat.