Shopify Image Compression: What It Is And Different Ways To Optimize

If you’re running a Shopify store, then you know how important it is to have high-quality images on your site. But did you know that you can also optimize your images for better SEO performance? In this post, we’ll teach you about Shopify image compression.

There are two different ways an image file size can be reduced:

1. Removing information from the file
2. Reorganizing the file

We’ll look at both techniques, along with the various options you have to optimize your images.

The Best SEO Image Optimization Tips for Performance

When you think of SEO (Search Engine Optimization), images might not be the first thing coming to mind. Yet, optimizing your images can help improve your website’s ranking on search engines. Fortunately, there are several easy ways to optimize your images for better performance.

Use Relevant File Names and Alt Text

Images and product images are an important part of any website – they can help to make your content visually appealing and engaging. However, if they’re not properly optimized, they can also have a negative impact on your site’s performance. When saving images to your computer, it’s tempting to type in “IMG_2324234.” But by typing in a string of random, meaningless characters, you’re doing yourself a disservice.

That’s because search engine crawlers can scan images, file names, and the alt text (the image’s description), and these images either help you or don’t do anything at all. You want them to help you, not hinder you. So, be strategic about your file names. Choose relevant keyword variations for your file name and alt text.

– Use relevant image file names. When saving your images, use descriptive and keyword-rich file names. This will help search engines index and rank your images more effectively.

Also, users who specifically use Google Image Search will be able to find your image if they search for your keywords.

For example, let’s take this image:

If I’m writing an article on Shopify image compression, I’ll want to use these keywords or any related keywords for my file name. So your file names could be:

• shopify-image-compression
• image-compression-for-shopify
• compressing-shopify-images

And any other related combination you can think of based on your keyword research. Notice how I added hyphens between each word–that’s because it’s easier for crawlers to read the file names if you separate the words by a hyphen.

Note: individual images need their own keyword–don’t have two images on the same page rank for the same keyword.

– Use alt-text. Alt-text is a short description of an image that is displayed in place of the image if it can’t be displayed for some reason. It’s also used by screen readers to provide a description of the image for people who are visually impaired. The alt-text can also help search engine rankings so use keyword-related terms.

Using the above image as an example again, your alt-text might be something like:

• Shopify image compression
• compressing Shopify images
• compression images for Shopify

You get it now (hopefully!).

Shopify outlines a few best practices for alt attributes:

• Use plain language to explain what your image is.
• Use product model and SKU numbers (if applicable).
• Don’t overuse keywords–stick to 1-3 relevant keywords
• If the image is already text-rich, don’t use alt attributes because search engines can penalize you for overdoing it.

Image file size matters

When it comes to website images, the saying “a picture is worth a thousand words” has never been more true. Quality photos can make or break a sale, making for a frustrating browsing experience. So, you must carefully size your images and choose the correct image format.

1. Choose the correct dimensions. Images that are too small or too large will take longer to load, hurting your SEO. Choose dimensions that are appropriate for the product and the page layout.
2. Choose the right file format. Three file types are used for posting images: JPEG, GIF, and PNG format.

JPEG images are the industry standard for images. This image type keeps its image quality even when compressed.

GIF images are lower quality and are meant for simple images like icons or highly decorative images. GIFs also mainly support animation.

PNG images are a popular alternative to GIFs. A PNG file supports many colors and (unlike JPEGS) doesn’t degrade over time.

We recommend JPEGs as they offer consistent quality no matter what size.

Consider using image sitemaps

A common issue that webmasters face is that search engine crawlers cannot discover all of the images on their websites. As a result, these images go undiscovered and don’t appear in search results. In addition, web crawlers can’t crawl images that are not specifically called out in the webpage source code. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.

One solution to this problem is to use image sitemaps. An image sitemap is an XML file that lists the location of all the images on your website. By providing this information to Google, you can ensure that all of your images will be indexed and appear in search results.

There are two ways to submit an image sitemap:

1. you can either insert a line in your robots.txt file (like Sitemap: http://example.com/sitemap_location.xml)
2. submit the sitemap directly to Google using the Search Console.

So, if your website uses Javascript galleries, image pop-ups, or other “flashy” ways to improve the overall shopping experience, image sitemaps will help get your images noticed by Google.

Test, rinse, repeat

The point of image optimization is to help increase your bottom line. We’ve talked about reducing file sizes and getting the search engines to index your images, but what about testing images to see what converts to more customers?

Since load speeds are an issue for some non-hosted eCommerce sites, you may find that reducing the number of images on a page will increase click-through rates and sales. It’s also possible that providing many images per page will improve the user experience and lead to more sales. The only way to find this out is to test different scenarios and see which one performs better.

Top Image compression techniques

• Metadata
• Lossy compression
• Lossless compression

Removing Information From The Image File: Metadata

An image file is not just the pixels you can see; it is also additional data that includes general information about the contents and directions about how the picture should be displayed or edited.

The general information might be the date and geographical location a photograph was taken, the camera and settings used to take it, software that manipulated it, and more. This could be useful for your reference but isn’t required by your site visitors.

In the metadata, there are also sometimes directions about how the image should be displayed or edited. Most often it’s a ‘color profile’. This is used to standardize how the colors in an image look across different screens.

Removing a color profile from your images may change how they look on your computer. But it is best practice to remove color profiles for web images.

All metadata can and should be removed from an image file for use on the web. Doing this reduces the file size without your visitors seeing anything different.

Removing Information From The Image File: Lossy Compression

An image file is made up of rows and columns of pixels. Putting it simplistically the file contains data like row 1 column 1: red, row 1 column 2: darker red, row 1 column 3: blue, and so on down all of the rows and columns.

Lossy compression works by grouping similar (but not the same!) colors of pixels together. Some colors are so similar that the human eye cannot see the difference. For example, the lossy compression process sees a row of 100 slightly different red pixels like this- row 1 column 1: red, row 1 column 2: darker red, row 1 column 3: lighter red. It replaces it with a single- column 1: red.

In this way, we lose information about all of the slightly different reds in column 1, but since the differences may not be visible to the human eye, there is no point in having it. It just takes up space.

An image can be compressed at different levels of lossy, from a large file size with almost no loss of definition (or quality), down to the smallest file size with lots of definition lost.

Reorganizing The Image File: Lossless Compression

As we looked at above, an image file is a grid of pixels. Lossless compression works by looking for repeated patterns in that grid and replacing the pattern with a reference.

Let’s say an image has the pattern red, dark red, dark red, red repeated 16 times throughout the image. Lossless compression can call this pattern ‘pattern 1’ and replace all occurrences of that pattern with ‘pattern 1’. When the image is displayed it appears exactly the same. The image file is reduced in size without any loss of definition.

An image can be compressed at different levels of lossless. Whatever level is chosen no definition is lost. The difference is the time it takes to compress the file: higher levels of lossy take longer to process (finding these patterns) and can result in smaller files.

How To Optimize Images On Shopify

Option 1: Manually With Desktop Software

You can optimize images for free using desktop software. For Mac, ImageOptim is our recommendation. For Windows, FileOptimizer.

If you already have lots of images in your Shopify store it could take a lot of time to download, optimize, and upload all of your images. This manual option works best if you are just starting a store and don’t mind the extra minutes to run your images through this software before upload.

Option 2: Automatically With A Shopify App

For a fee, there are Shopify apps that can optimize your images automatically including ours, Plug in Speed. Search ‘image optimization’ in the Shopify App Store.

These work by automatically optimizing existing and new images in your shop. Generally, the apps offer a choice between lossy or lossless, a way to see the image before and after, and backups of your original unoptimized images.

If you want to experiment heavily with many granular options available in image optimization algorithm software, a Shopify app may not be for you. On the other hand, if you are looking for the best optimization without manual work and the price is reasonable, a Shopify image optimization app could work well.

Option 3: Automatically With A CDN

A Content Delivery Network (CDN) is a network of servers worldwide dedicated to serving ‘static’ content (content that doesn’t change per user like an image, rather than ‘dynamic’ content that does change per user like their shopping cart). A CDN aims to serve this content faster than just a single server in a single physical location could by copying it into different servers in different countries around the world. If you are in Japan, your image is served from the Japanese server, if you’re from Canada, it comes from Canada. 

Shopify already serves all of your content from its fast worldwide CDN for no extra charge. We’re talking about CDNs for image optimization because some CDNs can also manipulate the original static content to optimize it.

There are CDNs available that can optimize your images automatically. For example, let’s say we have yourshop.com/images/bird.jpg. We use a CDN provider ‘mycdn’ and turn on their image optimization feature.

Rather than the image URL being on yourshop.com it can point to yourshop.mycdn.com/images/bird.jpg. This image is automatically fetched by the CDN, optimized, and served to the user.

For this to work, we need to change the image URLs in our Shopify store from yourshop.com to yourshop.mycdn.com. This can be done either by editing your theme templates or pointing our entire yourshop.com at the CDN rather than Shopify.

A drawback to a CDN solution is that sometimes they can be slower than serving the file from Shopify since they first have to fetch the image, optimize it and then serve it. This can be an issue the first time an image is requested.

The initial setup of a CDN optimization solution could involve the cost of a developer making changes to your theme.

Because Shopify already provides a CDN there isn’t any apparent reason to choose this option over others. Cloudflare and imgix are two examples.

What is image compression?

Image compression is a type of data compression that reduces the file size of digital images. There are several ways to compress an image, but the most common method is to reduce the number of pixels. This can be done by downsampling the image, which involves removing some of the pixels. 

Another way to compress an image is to reduce the amount of data used to represent each pixel. This can be done by reducing the bit depth or using a lossy compression scheme. Image compression can be used to reduce the file size of an image, making it easier to store or transmit. It can also be used to improve the performance of an image-processing system by reducing the amount of data that needs to be processed.

Image compression can be lossless, meaning that no information is lost during the compression process, or lossy, meaning that some information is lost. Lossless compression is typically used for archival purposes, while lossy compression is often used for images that will be displayed on the web or in other applications where file size is a concern.

Why should I optimize images by compressing them?

Images are an essential part of any website. They can help to break up the text, add visual interest, and provide context for the information on the page. However, unoptimized images can have a negative impact on site speed.

Compress images to improve website speed

When an image is uploaded to a website, it is typically saved in a high-quality format that is suitable for printing. However, this file size can be much larger than what is needed for displaying the image on a screen. As a result, the image takes longer to load, which can slow down the entire website. By compressing images, you can reduce the file size without significantly affecting the quality of the image. This will help to improve site speed and ensure that visitors have a positive customer experience when they visit your site. Then, you can hopefully turn those visitors into customers.

Compress images to improve search engine performance

Unoptimized images can also have a negative impact on your website’s search engine performance. Large files can take longer to load, which can lead to a decrease in page views and an increase in bounce rates. Additionally, search engines place a heavy emphasis on page speed when determining your ranking, so optimizing your images can have a major impact on your website’s SEO.

Compressing images is one of the easiest ways to optimize them for faster loading times. By reducing the file size, you can make sure that your images load quickly without sacrificing quality. As a result, compressing images can help improve your website’s search engine performance.

Conclusion

Compressing and optimizing your images on Shopify is an easy way to speed up the loading time of your pages. There are two ways to do this- removing information from the file or reorganizing it. Both methods are simple and only take a few minutes to complete. When optimizing photos, you’ll also want to ensure you have descriptive, keyword-rich image filenames so that you can better compete among the ranks. Have you tried compressing and optimizing your images? What difference did it make in terms of page speed?