Clarity eCommerce Product Image Optimization

Hi, Ron from clarity. Today we're going to cover creating images for an eCommerce platform. One of the things that we need to think about is, am I B2B am I B2C, how important are the images, am I going to turn on product zooming, and what is the catalog will look like? Now, most of my clients, even if they're B2B, still want a good-looking catalog with image zooming. So I'm going to show you what I did on my demo site. So 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. So let's take a look at this Nikon to show you 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, and 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. So let's go in and take a look at that template and see what that looks like.

Normally, I will zoom out just a little bit, so here's a client that he 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, and they were of different quality, sizes, colors, and shapes. Nothing was standard, but he wanted a good-looking website. So I standardized and normalized all the images for him. So what I did was I created this 1000px by 1000px. If you go out and read and google it, some of them use 1024px by 1024px. Basically 1024px by 1024px, 72 dpi. That's what I use. That's been the standard for a while. For some B2C clients, like, I've got Bulgari and some high-end clients that are pushing the 4k monitor and the retina display capabilities, you might double that and double the DPI. So you might want to go 2048px by 2048px by 150 dpi. Those are going to be some 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 touch on this. You'll notice I came in half an inch off each side, and I went ahead and created some guides here. So I've got these guides now. What I normally do is move around the image. Let's 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 tall, 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 take a look at their website. So 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 I have a curio with a hutch, and we have a buffet. Those are all different heights, and instead of having everything centered where they can't have a perspective of which one's taller than which. I line them up all on the bottom so as if they were on the same floor in the same space, and they can see how tall this is. This is about 3/4 tall this is scaled down, but they can see that that's going to be about double the height then. So these all look good, and these all work well because I decided on 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. All of my images look about the same size, and they all appear nice on the website.

So now, let's look at another page on his website where there are multiple images. I like to do that when I zoom in on one, and they start scrolling through. If their different style chairs, even though the photographer adjusted just slightly, 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 nice, the floors in the same space, and it looks good. This is what you want to make sure you do when you do your images right.

So, this is a site that I did all 1000px by 1000px 72 dpi, and that's what it looks like. That's the same thing that I did with a Nikon. This is 1000px by 1000px,72 dpi. What do I do with my images? You can see here I created an image a minute ago, I saved it out on my desktop, I went to TinyPNG.com, I dragged it up here. So let's go back here and decide we want to save this out. I would do file, save as, and I drop down to JPEG. The reason that I dropped to JPEG is I can control it a little better. So let me do version three now. So now you can see it if I went at 12, it's 426K 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 314K. Sometimes I get 60% compression. You can see on that last one I did, and I got 58 percent. So that's about half. So I could go at 314K about half, and I could be right where I want to be.

Normally I usually get about 3/% to 45%, so I probably would end up picking this 10 going at 232K, and then it would save down and be smaller and load faster. Let's try the 11 to see where we go. So we'll do 314K, we'll come back to TinyPNG, we'll drag it, dump it over here. You can see this one. I saved it a higher resolution, 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 2, and now here's image 3. You can see it's a little bit lighter color, this has some different color variances, and that's why this one, even at the lower resolution, took a little bit bigger size a file than this one did. But here's the one we just created much number three.

Looks good, it's nice and clean, it's got a great image, and that's only 70 something K., So that's going to load pretty quickly. If you want higher-res than that, 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 it for SEO purposes? So I need the page to load fast and snappy. So those are the basic standards hope that helps.

Thanks for watching.