Optimizing eCommerce Product Images

BEST PRACTICES FOR CREATING, CROPPING, AND COMPRESSING YOUR PRODUCT IMAGES

 

Video Transcription:

Hi. Ron from Clarity. Today, we're going to cover creating images for an ecommerce platform. Now, one of the things that we need to think about are am I B2B, am I B2C? How important are the images? Am I going to turn on product zooming? What is the catalog going to look like? Now, most of my clients, even if they're B2B, still want a good-looking catalog, they still want image zooming, so I'm going to show you what I did on my demo site. Here's my demo site. I have about 150 products, but you can see, even with a whole bunch of mixed different products, they all look pretty good, and there's a reason for that. That's planned. Let's go take a look at this Nikon just to show you about the quality of the products.

Now, I can hover over my product. Here's image zooming. I can click and zoom in. That's a good-looking image. Now, as I click through the images, you'll notice they load pretty quickly. There's no delay whatsoever. They're all very high resolution. How did I do that? Well, I standardized on a specific template. Let's go in and take a look at that template and see what that looks like.

Now, normally ... I'm going to zoom out just a little bit. Here's a client that I did, Circle Y Amish Furniture. They asked me to do all of their images for them for all of their furniture, so they sent me all these different pictures from different vendors. They were different quality, different sizes, different colors, different shapes. Nothing was standard, but he wanted a good-looking website, so I standardized and normalized all the images for him. Basically, what I did was I created this 1000 x 1000. Now, if you go out and read and Google it, some of them use 1024 x 1024. Basically, 1024 x 1024, 72 DPI, that's what I use. That's been the standard for a while.

Now, for some clients that are B2C, like I've got Bulgari and some really high-end clients that are really pushing the 4K monitor and the retina display capabilities, you might double that and double the DPI, so you might want to go 2048 x 2048 by 150 DPI. Those are going to be some really big high res beautiful graphics. It's also going to affect the page load speed, so instead of going with a whole bunch of images on one page, you might lower it to one or two, or you might want to make sure that they are not only highly compressed, which I'm going to walk through, but they're loaded up on a CDN.

Anyway, let's just touch this. You'll notice I came in a half an off each side, and I went ahead and created some guides here. I've got these guides. Now, what I normally do is I move around the image. Let's go grab it. I'll move around the image here until it touches the top and bottom, and then I'll center it between the two sides, or let's say if this was a desk and it was wider than it was taller, I would make sure that it touched and stretched both guides side to side, and then do you center it? Well, in this particular case, I didn't center it because of the perspective. Let's actually go take a look at their website.

As I look at the website, if it's three hutches, they all look very nice, and you can see the legs are all lined up, but what happens when I come in and have a curio with a hutch, and we have a buffet? Well, those are all different heights, and instead of having everything centered where they can't really have a perspective of which one's taller than which, I lined them up all on the bottom so as if they were on the same floor on the same space, and they can see how tall this is. This is about three-quarters tall. This is obviously scaled down, but they can see that that's going to be about double the height that.

These all look good, and these all work well because I decided a standard before I started. I decided that if I did items together, they were all going to have the same floor, and then they were going to have the same ceiling, and then try to do the width. That way, all of my images look about the same size, and they all appear really nice on the website.

Now, let's go look at another page on his website where there are multiple image. The other reason I like to do that is when I zoom in on one and I start scrolling through, if they're different style chairs, even though the photographer adjusted just a little bit, it's very easy to see what it looks like with and without the arms, so even though it jumps a little bit based on the photographer's positioning of the chair, it still looks really nice, the floor's in the same space, and it looks good. This is what you really want to make sure you do when you do your images. This is a site that I did all 1000 x 1000, 72 DPI, and that's what it looks like. That's the same thing that I did with the Nikon. This is all 1000 x 1000, 72 DPI.

What do I do with my images? You can see here I created an image a minute ago. I saved it onto my desktop. I went to tinypng.com, I dragged it up here, and you can see when I save things out ... Let's go back here and decide we want to save this out. I would do File, Save As. I drop down to JPEG, and the reason that I drop to JPEG is I can control it a little bit better. Let me do version three now.

Now, you can see, if I went at 12, it's 426. That's a little big. I don't want it quite that big. If I go to 11 ... I want to be under 150K, ultimately. Now, this is 314. Sometimes I get 60% compression. You can see on that last one I did, I got 58%, so that's about half. I could go at 314, about half, and I could be right where I want to be. Normally, I know I usually get about 35-45%, so I probably would end up picking up this 10, going at 232 and that it would save down and be smaller and load faster, but let's just try the 11 to see where we go.

We'll do 314. We'll come back to TinyPNG. We'll drag it. Dump it over here. You can see this one I saved at a higher resolution than the one I did earlier, but I cleared it out, and look at that. It got even better compression. I'm down at 77K. Now I can download that. Now, that's image two. Now, here's image three. You can see it's a little bit lighter color. This has some different color variances, and that's why this one, even at a lower resolution, took a little bit bigger size of file than this one did, but here's the one we just created. Hutch number three looks good. It's nice and clean. It's got a great image. That's only 70-something K, so that's going to load pretty quickly.

If you want higher res than that, go ahead, but know that you might have a hit on performance. The biggest thing is whether you're doing SEO or not. If you're doing SEO, you don't want to have Google give you a ding on performance and lower your rankings for a product just because you wanted a prettier picture. Everything has to be thought through as far as am I B2B, am I B2C, am I doing for SEO purposes so I need the page to load really fast and snappy? Those are kind of the basic standards. Hope that helps. Thanks for watching.