Image optimization tips for Shopify merchants you can start using today

When you create an ecommerce store like Shopify, one of the first things you need to focus on are your images. You need to ensure that your store features high quality, fully optimized images. After all, images help you sell your products/services, and that’s why you have to pay attention to the way they look and function. Which is why we created a list with some of the best image optimization tips you can use for your Shopify store!

Why is image optimization important?

Optimizing images for your website is extremely important if you want to rank high in search engines. Not only that, but image optimization will affect the overall user experience too. In addition, it will help improve website loading speeds (which affects your SEO). We all want our websites to load extremely fast and with image optimization, you can do just that.

In addition, image optimization can help empower your brand. It shows potential customers that you actively care about your website, your image, your products, and the way you present all of that to your them. With the right image optimization methods, you can easily enhance your growth, generate more exposure for your website, but also bring in more sales. This all stems from making sure you have amazing, high quality and fully optimized images that your customers and search engines appreciate. 

Use Alt text for images

The Alt text showcases a description of the image and that comes in handy. It allows you to explain what the image is actually about. This is good for three reasons:

1. If the browser won’t load the image or if the image is slow to load, you’ll see this alternative description in its place.
2. It helps boost your SEO. You can include your keywords in the alt text, which is very handy if you want to boost your ranking online.
3. Screen readers, used by visually impaired users will be able to understand what your image is actually about and tell these users. Accessibility is very important in order to make your website useful for everybody.

Avoid using any generic image filenames

You want the name of the file to be very specific and not use the generic name that your camera (or image bank) assigned to it. The main focus in a situation like this is to make every image stand out. That’s why you want to add keywords in the image name, and keep them descriptive and unique. Using just a generic name doesn’t show you care about how your products are displayed and attaching true meaning to it. Adding a different, one-of-a-kind name that also includes keywords that people are looking for is a much better idea. It helps with your SEO, and it also shows that you actively want to present your products in a very professional manner.

Optimize the thumbnails

Thumbnails need to have the smallest file size possible and they should also have different alt texts than their full-sized version. The idea here is that you want to avoid having duplicate text on your website, as it could generate issues from an SEO standpoint. This will also help differentiate smaller versions of an image from the larger version.

But file size is extremely important here as well. Most pages that load thumbnails are galleries or collections of your products - which display many images and are in turn slower to low. If these thumbnails are the same exact file as your original, full size image, page load speed will be much slower than it could be. So make sure you’re loading a smaller, optimized version.

Pick the best format

A lot of people want to add PNG files to their Shopify website because they are very high quality. The downside is that PNG files are very large and they can take a lot of time to load. Let’s face it, the last thing you want is to make people wait for an image to load.

That’s an issue and you must avoid as much as possible.  The two most ideal formats are WEBP and JPG because they deliver the perfect balance between image size and quality. It’s not perfect, but the fact that it’s small does make a huge difference. WEBP is considered even better than JPG as the file size is much smaller. According to Google’s data, on average, WebP images are 25-34% smaller than comparable JPEGs and 26% smaller than comparable PNGs.

Compress your images

It’s a very good idea to compress your images because you won’t lose that much quality, yet you will save a lot of space and speed up page load times. And the reality is that an ecommerce website doesn’t have just an image per page, it usually has dozens. That’s why tools like Optimizilla, Compressor, and TinyPNG are great examples. All of these can help you compress images' file sizes and ensure that you keep loading times much shorter.

Make sure that you choose the right product angles

When you take pictures of your products, it’s a great idea to shoot the product/item from many angles in order to know which are the best to use. People want to see as much as possible before they make a purchase, so it’s a very good idea to capture it from as many angles as you can. But choose the final shots wisely so that it doesn’t seem repetitive and uninformative. You know your product the best so choose the most beneficial angles to help capture it’s features and functionality. In doing so, you get to offer customers the opportunity to analyze that product before they buy it.

Test your images and adjust them

You can use tools like SpeedBoostr in order to test different images sizes and formats. The idea is to check whether your website speed is affected by the larger image formats or sizes.

Avoid using too many decorative images

Decorative images don’t show your products, instead they are backgrounds or other design elements designed to offer an appealing experience for your website’s visitors. However, they shouldn’t be the main focus - product images should be at the forefront. While it’s ok to use some decorative images, adding too many of them can actually detract the user from the browsing experience.

Use lazy loading

There’s no point in loading images that are located further down the page and aren’t visible until the user scrolls down to them – so why load them in the beginning? Lazy loading is a practice which is designed to make images load in the background and display when they are needed. The idea here is to boost loading times, while still offering plenty of great images. Lazy loading helps quite a bit, since it improves the initial loading speed. Yet at the same time, it doesn’t detract the user and that alone can help make a huge difference in the long run.

Use captions

Even if it’s not mandatory or a crucial part of any image optimization strategy, it can still come in handy. Captions help because you can use them to help Google scan your page. It will show the meaningful content you already have on the page, so it definitely helps with its exposure. Plus, you always want to use any means at your disposal to stand out on Google, and this approach can be well worth it.

Conclusion

We spend a lot of time creating and editing images, so we want to ensure that they help our website grow and generate sales. That’s why using these image optimization tips can be a very good idea.

Sure, there are obvious challenges that can arise, but if you take your time and do it right, you’ll reap the benefits. Every minor change can make a difference, which is why we recommend implementing these great image optimization tips today, as they can make it easier to speed up your website and generate sales!