Learn How To Optimize Images For Web Speed and SEO Benefits

How To Optimize Your Website Images For Faster Page Speed and SEO Improvements

Images and graphics are an important part of any website, landing page, or sales page. Images help tell your story, showcase your brand, or clarify an example. As the adage goes, a picture is worth a thousand words! In this episode, we will cover some of the basic things you should be doing to optimize the images that you use on your web site. You can get your pages to load faster, and you can take advantage of some very important SEO benefits with image optimization. Take a listen and hopefully, you will learn a new trick or two!

Don’t miss an episode – listen on Apple Podcasts, Google Podcasts, Spotify, iHeart, and more!

YOU’LL LEARN

Google can tell if you are using stock photography or not
Google Vision AI can determine an image object, relevancy, and topical associations
Use your own original photos and graphics whenever possible on your web pages
Optimize your images for proper size
Optimize your images for maximum loading speed
Take advantage of alt tags and file name to benefit your SEO efforts

Here is the transcription from Episode 48 Learn How To Optimize Images For Web Speed and SEO Benefits;

Jesse Dolan: Welcome back to Local SEO Tactics, where each week we give you tips and tricks on how to help your business get found online. I’m your host, Jesse Dolan, Bob Brennan is absent again this week. Promise everybody he’s alive and well. He will join the show again, I promise you that. But again, this week I’m flying here solo, and I want to start off by talking about something that we launched last week, which is our question and answer feature on LocalSEOTactics.com. I think we dropped the episode four or five days ago from the time of this recording, and we announced the LocalSEOTactics.com/Questions, which is a page where you can go and submit your questions that you want us to tackle on the show. We’ve already received, I believe it’s four or five as of this morning. Roughly about one a day requests off that, so super exciting, a little bit more response than I had thought, which is great.

With that, we’ve only had two recorded messages, the other ones were submissions on the form. I want to let everybody know if this is something that you’re interested in if you want to ask us a question if something’s kind of digging at you and you really would like us to cover it on the show, jump on there. You can either submit your question with the online form, or you can actually record a voicemail and we’ll use it on the show.

Anybody who does do that, if we use it on the show you’re going to get a free Intrycks T-Shirt. Again, not a lot of value, probably nobody’s going to know what Intrycks is even if they see you wearing it. But, it’s what we have to give away. If you’re interested, if you want to get on the show, or at the very least if you don’t even want to be live, if you’re a little bashful, that’s fine too. You can still submit your question, and we can make sure that we talk about it on the show here and address it because if it’s something that’s bugging you or something you’re having a challenge with, odds are it’s going to help everybody else out there too that’s listening. Most of the questions and the content that we put on the show are questions that we just bump into with people everyday here so, you’re not alone. Please share if you’ve got something, LocalSEOTactics.com/Questions. Or, you can just go down to the footer on any page, the bottom left corner, you’ll see a link for submit a question right there, and we’d love to hear from you.

The topic for today’s show is, image optimization for your website. The things we’re going to go through here, as with most walkthroughs that we do, we’re making the assumption that you’re using WordPress. It’s one of the most popular content management systems out there for websites, and generally free for everyone. That being said, this will apply to none WordPress websites as well. The first tip we’re going to get into is about using stock photography.

Over the last few months, there’s been a lot of innovation, and a lot of chatter out there in the industry in regards to Google’s AI, Artificial Intelligence, and machine learning. One thing they’re getting really advanced with is their image recognition. There’s a tool called, what is it here? Google Vision AI, and we’ll put a link to this in the show notes, where you can actually jump in there, you can experiment with this yourself and see this. It’s a free tool from Google, and basically, what it shows you is, you can drop an image in there, and Google will tell you what the image is, what it’s about, what it’s related to. Again, if it’s a red balloon you’re going to see … I’m making up this example, so if you find a picture of a random red balloon and test it, don’t get back at me for cross-checking me here, this is just an off the cuff example.

But, if you drop a picture of a red balloon on there, it’s going to tell you it’s red, it’s a balloon, maybe if there’s some stuff in the background, some kind of context. What it’s able to do is just pull that relevancy about what is this most likely about, what’s it related to, and things of that nature. And, it’s pretty darn surprising what Google is able to understand from the image recognition.
Now, that’s pretty cool. You can use that as an SEO or doing SEO on your website in a couple ways. One, if you have an image that you know Google, you run it through this tool and if you know Google recognizes the image, you can use that to build relevancy. If you sell or install air conditioners for example, if you have a photograph of an air conditioner and Google recognizes that it’s an air conditioning unit, maybe even recognizes the brand if there’s a logo badge visible on there, in that case, that’s great. You put that on your website and Google’s going to understand without you even telling it, that this is an air conditioner, and of this brand, and things of that nature. If that’s what your business does, you’re automatically building relevancy in the eyes of Google for that.
That can also come back to bite you, and what we’re talking about there is if you’re using stock photography. If you’re using stock photography, there’s a good chance other people are also using the same image. And in Google’s database, because they’re going out there, they’re scraping all this information, indexing all this information online, they are going to build relevancy for that image that you may not want associated with your company.

For some reason maybe this image is very popular in a certain part of the country, and you’re at the opposite end of the country, that would be one example. Maybe if it’s for installation and you’re talking about demolition or just things that are kind of opposites of each other, you definitely run that danger. Using stock photography is okay. If you don’t have any images for your website or if you have very low quality, poor images. Hey, stock photography is better than nothing, don’t let that scare you. But, if you do have the option to take your own images and use them on your website with original images photographs, this is kind of in argument for where that’s even more important from you going forward. A couple years ago it wasn’t a big deal. Today though with this image recognition that Google has the ability to do, and the association with relevancy, and topical relevancy, and things like that, it’s kind of a bigger call for getting good quality, original images on your website.
Now, a number of episodes back I had my buddy Matt Addington on, we’ll put links to his, it’s actually a two-part episode, in the show notes. Matt shared some great, great, great tips on how you can take your own images for your website just using your iPhone. It doesn’t have to be super sexy, it doesn’t have to have a lot of technology or investment here. Just knowing how to take a good image, some things to be aware of that Matt will walk you through in those two episodes, is great. And, everybody out there depending on what it is you’re selling, maybe if it’s something ridiculously high end where a top-notch, high-quality image is paramount to your website, then you might want to hire a professional photographer. Odds are if you’re selling something that is that important and that high value, you probably have the cash flow and the funds to go hire a photographer to do that, or you already have.

But for everybody else, for the majority of people out there, using your iPhone or your Samsung phone, or whatever it is, if it’s a modern smartphone, it’s going to have a pretty darn good camera on it. And if you just abide by these tips on how to maybe position or frame things in, you’re going to have some great images for your website. Not only are they going to be original, so Google recognizes them as not being used in other websites. They’re also going to be very specific, you’re going to be able to control how you want to portray something, and show something, and things of that nature. You can get your people in there, your brands in there, whatever you want. It’s good to have that control, and also good to kind of build that relevancy.

And last but not least, Google will understand this is an original unique photo, that it’s not a stock photo, and that’s going to give you if nothing else, just a little bit more credibility and authority in the eyes of Google, compared to somebody who’s using just stock photos on their website. Right there for image optimization, that’s a great place to start is, trying to use original, good quality artwork, good quality photos on your website, and avoiding stock photography.

Now, the next thing I would say is something that we kind of talk about really for all aspects of SEO, but it’s doing things on purpose. In particular, with regards to the images here, I’m talking about naming your photos. If I were going to pull out my iPhone and snap a few pictures, it’s going to have some kind of generic name like, “IMG002359,” whatever, is going to be the name of that file. I don’t want to just take that picture and download it to my desktop, or email it to myself and put it onto my website without any modification of that file name. I want to name that with SEO in mind.

Again, if I’m doing auto repair, or even more specifically, transmission repair. If I take a photograph of a transmission being repaired or rebuilt by one of the technicians, I’m going to want to save that photo with the name of, “Transmission repair.” Or, “Transmission rebuilding.” Or, “Transmission services.” Whatever it is, not sticking with that default file name. You want to put your keywords and phrases that this image is about right into that image, and save it as that. Or, open it up and save a copy of it with that name in mind.

So now we’ve got our good original photograph, we’ve named it with a file name that’s relevant to the keyword or the product or service at hand. The last part you want to do on the image optimization is, optimize the file size. With file size we mean two things. One, the actual pixels that are going to be on the screen. Now, WordPress, you can load in any image and insert it into your webpage and adjust the size. WordPress, depending on your theme you’re using, it’s going to have different default options, small, medium, large. But, essentially it’ll resize that image to fit the page.

Now, the problem with that is you’re still natively going to have a very large image that’s in the database and can be a lot slower to load on that page. That’s not again, in the eyes of SEO, that’s not very much on purpose. You’re just uploading an image, and then using WordPress to kind of resize that for you. A much better way to do that is to actually know the actual size and dimensions of the photograph that you want to be using, and a good way to cheat this is if you’re not sure, usually on your website you’re going to have multiple pages of course. But, you’re going to have a similar look and feel. If you have maybe a big hero image at the top of your website or webpage, that might be repeated on other pages, or a slider, or a slide of some sort.

Likewise, usually, the convention is somewhere further down on your page you might have an image inserted into a paragraph, or somewhere down in the footer. Those images probably are going to be of similar shape and size on other pages of your website, so you’re not going to have 50 different images with 50 different sizes and shapes on your website. You’re going to probably have two, three, five, or a small handful of varying sizes of images, and what we want to do is try to, when we save these images not only save them with the name earlier, the name like we said earlier.
But, also save them to the exact dimensions that you’re going to be needing to resize those in something like Photoshop, or Pixlr, which I’ll get into in a second, and save those images in that file size so then when you load them into WordPress or whatever your system is, it’s not resizing. It’s not using any horsepower, you’re not slowing your website down, kind of optimizing an image, or resizing an image on the fly. It’s just putting that image in there at full size, the native size that you loaded in, and it’s the appropriate size from the get-go.

Now, with that, you’ll still have mobile responsiveness, and some shifting that will occur depending on the size of the screen and things like that, and that’s fine. That’s not what we’re talking about. We’re talking kind of that 80/20 where most images if people take an image off their phone and just load it onto your website, it’s probably going to be 10, 20, or 100 times bigger. Maybe not 100 times, that’s a little exaggeration. But, it’s going to be much bigger than the resizing.

Now, if we were to resize an image and load it in the way I just described, and if somebody’s looking at it on an iPhone, or an iPad, or your laptop, yeah, WordPress still might kind of rearrange it and optimize it based on the screen size. But, it’s going to be a small percentage for how it’s shrinking or enlarging that image, and really not impacting the performance of your website in that context.

Back to what I was saying though is, how do you know what size this image should be? Now, if you’re using Google Chrome like I am here, you can just go ahead and load an image into your website. Don’t worry about optimizing it for size or anything else, you just load it into your website. Or, if you already have images on your website, go ahead and navigate to one of those, and right-click on the image and you should be able to have an option for view image info, or view image properties, something like that. Within that, it should tell you the pixel dimensions. It’ll say 300×400, or 450×200, or whatever it is, make a note of that.

And then, do that for the different image sizes on your website in these different content areas, and you’ll start to be able to have a template if you will, on what size images you need for different elements on your website. Carry that information back to when you’re saving the image. Again, call it red balloon, transmission repair, whatever it is that your image is going to be. And, reformat the image size to be those dimensions.

Now, there’s one more added layer for image quality and image size. Depending on the tool that you’re using to edit your images, this may be more or less difficult. For example, if you’re using Adobe Photoshop, there’s something called save for web. Depending on your version it may be under like a legacy option. Older ones it’s just file, save for web. What that’s going to give you to do, is give you the option to, call it degrade the image quality. By nature, these images, even after you resize the pixel dimensions, it’s still going to be a very high-quality image.

Now, depending on how big the image is on your screen, you may be able to lessen the resolution, or the definition if you will, of that image, to save some file size and some loading time. But, it’ll still look just fine on your screen because it’s a smaller image. Kind of like if you were to take a photograph, right? And it looks good when it’s smaller. Now, if you blow it up into a big poster, it’ll make it pixelated, you know? The inverse is also true. If you have a big quality image to start with and you shrink that down, just reduce the pixels, it’s still going to be, let’s say it’s 300 dots per inch resolution. It’s still going to be a very high-quality image, just smaller.

Well, you don’t need that fine-grain resolution, so most programs are going to have some kind of built-in option for you to pick between, even as simple as high, medium, and low-quality settings. In addition to shrinking the pixel size, you can adjust the resolution, the image quality, however, you want to call it. And depending on the program they may refer to it slightly differently. But, that’s going to add that last layer to really optimize your image for you.

And, this particular type of optimization just plain reduces the file size, the actual on disk, or the loading file size. What that’s going to do is really make sure your images load as fast as possible. Now, due to the nature of the content on your website, usually, images are the biggest thing that’s loading on the page. You have all your text. You can have a page full of text, 2,000 words. That probably doesn’t equal as much space as one, or two images on your website. So you can see, and I’m talking about optimized images. If you have just native photos raw that you haven’t done anything to, then it’s going to be even a bigger contrast and difference.

The bottom line there is, paying attention to your images for again, what you name them, but in particular, the file sizes here is a really big factor for SEO. Because as we know, page speed especially now with everybody searching on mobile, and the big shift to mobile searching. Page speed is a very big factor in the eyes of a user for page loading, but also for Google. Google is very aware of how fast or slow your website loads. And just like we always say, all things being equal, if you and I are competitors and my site’s faster than yours, I should be outranking you just on that factor alone.

Hopefully, that helps you guys out. If you have any questions, if you get stuck, if you want more information, go ahead and reach out to us. We’re going to have links to all these different apps that we talked about here in the show notes. You know, I should go back. I talked about using Photoshop, there’s a great online alternative which is free called Pixlr. I’ll put a link to that in the show notes here. It takes a little bit of training if you’ve never used a program like this before, but anybody can do it. You can be super-advanced, or you can be super basic. It’s a full utility, however advanced you want to get on it is totally up to you. But, they have some great resources for training and how-to guides to do that, so don’t be intimidated. If this sounds really tough to do, go ahead and give it a try. Check out Photoshop, check out Pixlr.

If you get stuck and you’re hitting your head against the wall, you can reach out to us. We can help you either answer some questions just to kind of lead you in the right direction or if you need us to do this for you as a service, we’re more than happy to help do that as well. We’re obviously for hire, we don’t just do free podcasts. We actually have a business doing this stuff, so we’re always here to help as well on that.

And, just looking at my notes I supposed I’d be remiss if I didn’t mention one more thing on the images, which is the alt tags. When you’re uploading the images to your website, particularly in WordPress, you have an option to give it an alternate tag, alternate text tag, and you want to do that too. Usually, an easy practice is whatever you’re naming the file, again, transmission repair, to just put in your alt tag, transmission repair as well. That’s that kind of last little bit you can do for SEO to communicate to Google what this picture is about, and thus within the context of your page, have kind of more things about that keyword, and on that topic, and bring it full circle there.

And really, the general spirit of all of this again is, do it on purpose. Don’t just load random images onto your site, make sure the images are descriptive of the product or the service that you’re talking about. Make sure the file names are not just random file names, make sure they’re descriptive for the product and services. And again, the size of the image. Don’t just load an image and have WordPress automatically resize it, save the image and optimize the image for the exact file size you want. Nothing more, nothing less. And, save it accordingly, and upload it like that. And, you’re going to be doing everything with those images on purpose, and to the point.

With that, there’s a lot of other elements for SEO. But, in regards to just the images here, this should get you right on the right track. If you have any problems, again, feel free to reach out to us. Now, if you want to do a quick scan on your website to see how these images are impacting you and if you need to address them, you can use our free online SEO audit tool for that. Obviously the tool’s going to be very comprehensive about everything on your website, but there also is a section in there for image optimization.

It’s going to tell you if you’re using duplicate images, it’s going to tell you if you’re missing these alt tags if they’re slow to load, and things like that. Just go to LocalSEOTactics.com, top right corner, yellow button. Free, Instant SEO audit. Plugin your website, you can use it over and over again like we always say, completely free. It’s going to give you a very complete SEO audit on your website, and with respect to this episode, if you want to hone in just on the image part, you can just check that section out and see if there’s any problems for you.

Now, let’s get into our five-star review of the week. For anybody who hasn’t left us a review, we would love to hear from you. Just go to LocalSEOTactics.com, you can go down to reviews. You can obviously read all the reviews that we get, and you can also submit your review right there as well. We’d love to hear from you, whether it be on iTunes, or Apple Podcasts if you will, Google, Facebook, Stitcher, wherever you want to leave it. We’d absolutely love to hear it, and of course, as you know, we read each one on the show here.

This week we got one from, let’s see here, Seth.Brink. “Always a golden nugget. SEO is a complex …” I’m sorry. “SEO is complex and overwhelming. The Intrycks team does a great job breaking it down into manageable segments that I can handle and act on immediately. This podcast will be on my subscription list.” Thank you, Seth, we hope we are on your subscription list, and we hope that when you’re ready this you are happy that we’re mentioning your name, and we really appreciate the feedback.

Keep it coming guys, we’ll keep reading them as long as you keep sending them in. That pretty much does it for this week. Again, if you’ve got any questions or if you want to jump on the show, go to LocalSEOTactics.com/Questions, and we’d love to hear from you. That’s all we’ve got for this week guys, stay tuned, and we’ll talk to you next week.

Check out the show notes below for resource links, guides, and a link to watch the episode in video format!