webinarsbreadcrumb separatorecommerce-product-image-optimization-for-seo

Ron Halversen, vice-president of sales and marketing at Clarity Ventures, demonstrates how to create the most effective and efficient images that will load quickly and draw customers in.

Hi, Ron from Clarity. Today, we're going to cover creating images for quality website designs. Now, one of the things that we need to think about am I B2B, B2C? How important are the images? Am I going to turn on product zooming? What is the catalog going to look like?

what is hipaa

Now, most of my clients, even if they're B2B, still want a good looking catalog and high end website design. They still want image zooming, so I'm going to show you what I did on my demo site. So here's my demo site and 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 go take a look at this Nikon just to show you about the quality of the products.

what is hipaa

Now I can hover over my product, here's image zooming like the best website designers use. 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.

Now normally, I'm going to zoom out just a little bit. And so 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, and they were different quality, different sizes, different colors, different shapes. Nothing was standard, but he wanted a good looking at 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 for the best high end websites. 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.

what is hipaa

It's also going to affect the page loads 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.

You'll notice I came in a 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 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 decenter it. Well, in this particular case, I didn't center it because of the perspective. Let's go take a look at their website.

So as I look at this high end 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? 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 in 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's going to be about double the height that.

So 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 this custom website.

So now let's go at another page on his website, where there are multiple images. 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. So this is the 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 a Nikon. This is all 1000 x 1000, 72 DPI.

what is hipaa

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 and you can see when I save things out. So let's go back here and decide we want to save this out. I would do files save as. I drop down to JPEG.

And the reason that I dropped to JPEG is I can control it a little better. So let me do version three now. And so 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. So I could go at 314 about half and I can be right where I want to be to adhere to quality web design standards.

Normally I know I usually get about 35 to 45%, so I probably would end up picking this 10 going at 232, and then it would save down and be smaller and load faster. But let's just try the 11 to see where we go. So 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 at 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 and 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 the lower resolution, took a little bit bigger size a 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 and 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, B2C, doing it for SEO purposes so I need the page to load really fast and snappy?

So those are kind of the basic standards for images sizes on high end websites. Hope that helps. Thanks for watching.

 

Image Size Is More Important Than You Think

When your images are too big, Google and potential customers are judging you. Google won't rank you a high, and your customers might just bounce right off your site instead of waiting for a page to load.

Clarity Can Help
Lorem ipsum dolorem

Recent Search

HIPAA Compliance AngularJS Web Development ERP Sage Integrations Microsoft Dynamics Xamarin Framework Comparison Essential Website Features

Top Searches

B2B Supply Chain Management WooCommerce Integrations Catalog Product Tags Top B2B eCommerce Challenges Epic Integrations Optimizing Mobile Apps