How to Optimize Product Images For Shopify

Hey guys! In this blog, we're going to show you how to optimize product images for Shopify. 

I want to thank you for consuming our content. That really means a lot to us. This year we actually turned five years old and that's a big deal for us. 

So in celebration of our five year anniversary, we are giving away over ten thousand dollars worth of freebies and our swipe file of different ads, landing pages and graphics that we've created over the years. The contest is free to enter, we will be drawing a name on February 11th. You can find out more information by going here for more information on how your business can benefit from all these great deals.

You really have two options here. First, you can go to apps on the left hand side and then go to the App Store at the top. 

You can find some sort of app that will help you resize these images. Crush pics is a good one, so is Image Optimizer + Compression; they do have a free plan. 

So if you have a lot of products in your store and you want an easy way to do that, then I would go with Image Optimizer. 

If not, then I wouldn't add more bulk and code to your store, that's unnecessary. 

If that’s the case, then the second option would be to use something like bulkresizephotos.com. 

This allows you to just drag & drop images in there. 

The good thing about this is that, for example, if you do choose images, we’ll just use the bone image for this example, you can actually click on file size and specify the actual kilobytes that you want this image to be. 

So typically, when you take pictures with your iPhone or a professional camera, these photos are going to be megabytes. So if you have some external person doing the photography, you can actually ask them to get you images that are less than two hundred kilobytes. That's usually what's recommended. If you have less than that and the images still look really good, then that's even better for you. But typically you want to do less than 200 kilobytes per photo. However, if they don't provide that avatar for a professional services provider or if you're taking your own product images with your iPhone or maybe you bought some sort of DSLR camera, then you will have to do something like this, Bulk Resize Photos. It’s free and it's easy. Here you can actually specify the actual file size that you want. 

You’ll hit start and download the picture. You want to upload that picture into your product. 

So we are going to go to products on the left and we want to go to products and go to colorful bones. 

Then under Media, you’ll see that we have that picture in there. 

It's already been optimized as far as file size. So that's the number one thing that you want to do, is make sure that your file size is somewhat manageable. You're not into the megabytes. You're into 200 kilobytes or less. 

Another big thing that you can do here, and we would recommend everyone to do is add multiple images. Adding multiple images will allow you to have a better user experience. 

Then, you can also add alt text to these images. You can add different alt text images just to kind of get a few more keywords in there as far as SCO. 

So if we click on this image, we're able to see some information about the image. 

Then down here in the left bottom corner, we have crop and rotate. You can actually draw. So there's let's say like a red circle or something, for some reason on this image, you can actually make a little quick fix on that. You can also resize the image, but not in the sense of file size like we did earlier from Bulk Size Photos. 

The next thing we want to do is on the right, there's a button or blue text link that says add alt text. In this instance we're going to add 'dog treats' and then we're going to save the alt text. 

Now, if we have multiple images for the particular product, then for the alt text, we can actually, for the next one, do maybe 'canine treats'. If that's a keyword that's relevant to your products just to add more keywords to your store and to your photos. 

After doing that, and if you have variants, you can also assign pictures of two different variants. So right now, if we don't assign a picture, this main image will be the one that gets assigned to all these. If you have different images, you can assign different images to different variants, depending on the size options. 

So let's say you're selling tins of candy. Let’s also assume you have a small one, you have a medium one and you have a large one. All these images, you can actually put them and assign them to each of those variants. That will provide for a better user experience. When the customers are adding maybe a medium size of tin for that particular product, it will actually show that image in the cart and checkout page. This could be maybe more relevant if your variants are colors, right? Let's say you're selling T-shirts. You have red, blue and yellow. You can actually assign the yellow to the yellow product, etc.

That's all we have for today as far as optimizing some of these images, one of the most important things is the file size. Just to make sure that these images load fast on everyone's computers when they're loading your website and then adding alt text to these images again will help with keywords and people who are searching for these things. It would absolutely help you. Obviously, just having multiple images as well per product will help you definitely in the long run and then especially with the user experience as well. 

That’s it for this tutorial. If you would like to watch our “How To” video on this subject, you can watch it here. If you enjoyed the tutorial, make sure to like the video as well as subscribe to our YouTube Channel and hit the bell so that you don't miss out on any of the content we put out every single week.

If you have any ideas on tutorials or things that you want to learn instead of Shopify, you can drop a comment on the video to let us know and we'll make that video for you.