How to Optimize Your Website's Images for SEO and User Experience

Brett Johnson [: 00:00:13

Welcome to the Circle Sessions featuring The Circle Of Experts. The circle of experts are Yasmine Robles from Robles Designs, Tonnisha English Amamoo of TJE Communications. And Don The Idea Guy. I'm Brett Johnson from Circle 270. Media Podcast Consultants. Each week, one of our Circle of Experts joins me to talk about critical aspects of growing your podcast. We'll focus on marketing, social media monetization and website design, and the implementation of all these together. This week, Yasmine is here from The Circle Of Experts. Yasmine works alongside clients to design a website that's driven by strategy, looks amazing and that you can actually use to grow your podcast and then turn that into great business as well. Yasmine, thanks for joining me today.

Yasmine Robles [: 00:00:57

Yeah, as always, I'm excited to be chatting with you.

Brett Johnson [: 00:00:59

You want to talk? Why should we optimize images for websites?

Yasmine Robles [: 00:01:05

Yeah, so it comes down to avoiding slow websites, your SEO or Search Engine optimization and just being user friendly. And I'll break those down for you. So for slow websites, if you are as impatient as I am and it takes too long for the web page to load, you just hop off, close the browser and go to another website that would possibly sell you something or be a better podcast or something. You don't want people to do that. So if your site is taking longer than 3 seconds to load, it sometimes is that the files are too heavy, the image files, and you should really look into it. I wouldn't worry if it's less than 3 seconds, but if it is more than 3 seconds, more than 5 seconds to load, then definitely look into that. And a few tools that I use that are free are pingdom and the Google website Speed Checker. These will let you know if it is images, it'll also let you know if it's code and where you can optimize. But if it is images, it'll let you know and it even lets you know which images on that page or that site get to be optimized. So for example, it could be an image on your home page and it'll tell you exactly which image is causing that slowdown. When it comes to your SEO or Search engine optimization. Basically, getting found as fast as possible by people on a search page speeds. Any delays in the page speed is really frowned upon. And if you think of it this way, Google and Bing, they're all in the business of providing an answer to a query, to a question. And if the answer that they provide is loading extremely slow and people are getting frustrated, people will not want to use them as a search engine. This is why page speed is important. And then not having a user friendly file name could affect the bots from these search engines coming in and understanding what the image is about. SEO, for example, alt text or file names that are not very user friendly. For example, whenever I get brand photo shoots done and the photographer sends it over, it will say something like the date image three. And what I end up doing is, first of all, downloading the web resolution version so that it's not too heavy and we'll talk about that later on. But I download that version and I rename it. So for example, if I want to be found for something in Columbus, Ohio, I will rename that image and we'll talk a little bit more about file names in a bit. And then user friendliness. You don't want text on images because if they don't load, then people don't have any clue on what is going on on the page. I've had clients who just had, for example, an event flyer on a page, but it was literally the flyer put on that page and with all the text and all the information. But if I'm on a slow WiFi or I'm on an older phone, it's not going to load. And then I have no idea. It looks like a broken image link and I'm just going to leave and not get the information. You also want people to not be seeing a bunch of blurry images because it's not very professional and they're not very patient for loading images. Again, back to that page speed. You want the page or the image to load quickly and be optimized.

Brett Johnson [: 00:04:33

Cool. I am already intrigued because going back to SEO and we'll talk about this, I had no idea that changing the file name makes a difference. I figured it was all hinging on the alt text. That's really interesting. I did not know that. So this is going to be cool. I love this. So let's talk about the how we're encouraging podcasters. Take pictures at events, take pictures while you're in studio, everything you can around each episode. So it's coming off of your iPhone or your smartphone and it's probably going to be a heavy image. Depends on your setting. Could be you're in 4K mode and you want the best coming out of your phone, but then all of a sudden you're transferring it to your computer and you're uploading and you've got this heavy, heavy picture. You didn't even realize you had this image going up. So how do we bring that size back down?

Yasmine Robles [: 00:05:24

hen it comes to size, between: 1500

Brett Johnson [: 00:07:08

The file name. You're intriguing me by the file name. Like I said, I had no idea. So go into that. I did not know. That's interesting.

Yasmine Robles [: 00:07:15

Yeah. So again, back to that file name. When you get it from your photographer or even from your phone, and it's like image 13 or something, you want to make sure you're changing it because alt text is important. But bots will also look at the file name, and it gets to be user friendly so that it can be found upon image search. And Google just prefers more user friendly names. SEO. If, for example, it's a photograph of you with the Columbus, Ohio background, you'll want to put what you do. For example, if I'm a website designer, I'll put website designer in Columbus, Ohio, because probably people are not searching for my name. I am a website designer, and I am based in Columbus, Ohio. If that is a search term, I want to be found for. And then with the file name, they don't really read spaces. SEO. What you want to do is ensure that you're putting dashes in between each word or hyphens, and you want to make sure of this to make sure that the bots can easily read it. And it's not just like one run on sentence. I've seen some people rename their files, but there are no spaces. And you want to make sure you have those dashes in there, and you don't want to make it too long either. So if you're just trying to stuff a bunch of keywords in there, like Columbus, Ohio, if you're targeting, for example, the Midwest, it's Columbus, Ohio, Cincinnati, whatever, you're putting all of these keywords in there. Google is going to find out. They do not like it when people do that. And it's just too long of file name. So rename the file name something that's descriptive, something that is useful. So if you are, let's say, targeting Columbus, Ohio, and you are a website designer, do not just keyword stuff, any image that has nothing to do with that, the file name with those keywords, because Google will find out. And if you already have a site though, do not worry about having to re upload all of the other files. It is important for SEO, but it's not as important as other factors such as fresh content or key phrases being researched. It's important, but just keep it in mind going forward that when you upload an images, you can rename it something that's optimized and then upload it that way.

Brett Johnson [: 00:09:31

Now, you mentioned about renaming the image like Columbus, Ohio website designer. Can you use that name again for another image? Or do you have to use something unique with every image I have, but.

Yasmine Robles [: 00:09:45

I do try to make it unique and do try to explain what is in the image. So, for example, if you think of stock images, it could be the same exact image being used on two different websites. But if you download that image and for example, one is, let's say the images is of a woman sitting on a shaped lounge or whatever in a beautiful dress. One of these websites could be using it as a photography service. The other one could be actually selling dresses. The description or file name is going to be completely different for both of those images because you are targeting different things. Now, if you are saying, well, I have a lot of images of women on a sofa with a dress on, what do I do? Well, describe what the page goal is. So, for example, if this page goal is talking about my photography services and for fashion design, let's say, then I can tailor that image to talk more about that. So if we go back to a couple of different episodes ago, each page gets to have a goal. And so if your goal and this in turn goes into your keyword, which we will do another episode on keyword research. But if the goal for this page is to be found for, let's say, keyword or key phrase x, y and z, then that file name will also reflect that. So even if you're using very similar images from the same shoot or the same photographer, same stock place, your file names should differ a little bit. But I've never seen any negative effects of using the same exact one. I think it's just not as user friendly or not as descriptive. You're not being as descriptive for that image, if that makes any sense.

Brett Johnson [: 00:11:21

Okay, I didn't know if it was a negative to make sure sometimes. How many times can you label it differently? You pick the perfect label for that file name. It's like, well, how many variables of that can I put on there? I didn't know if it would be a negative or positive, but like you said, be creative on the page. Yeah, that makes sense.

Yasmine Robles [: 00:11:40

Yeah, be creative. And I wouldn't go as far as, for example, copying and pasting the same name on every single file or like the same name and then putting one, two, or three, four, five at the end. Try to be a bit more descriptive. Research your key phrases. So, again, if you're trying to be found for, for example, I'm a website designer, one of my pages, I would say I want to be found for, let's say, for example, ecommerce websites. The other page is for service based businesses. Those images will not have website designer one, website designer two. Those file names won't be named that. So I would be more descriptive on, for example, ecommerce websites in Columbus, Ohio, small business ecommerce sites, SEO. I'm customizing those file names per page. Goal.

Brett Johnson [: 00:12:26

Alt text I know is extremely important. I've worked with a couple of different web designs on the back end, and alt text is not necessarily that easily found to put the text in there. So it's kind of frustrating. Or they have a different name to it. But I know it's important that I know WordPress is right on it. It's very easy to find. But let's talk about what alt text does and why it's so important.

Yasmine Robles [: 00:12:52

Yeah. So alt text, the most basic way I can describe it is the hidden text behind an images. So if you have a broken image link, let's say the image was deleted from your database. What you will see is that little broken image icon and possibly the alt text describing what was there. So if it's an image of Thomas Jefferson, then it'll just say, Thomas Jefferson's portrait. Now, the reason it's important is, yes, for SEO, but also for screen readers. People who have certain disabilities will be using screen readers. And the screen readers, all they do is read that alt text. And if the alt text is just whatever was uploaded or whatever WordPress or Squarespace was able to pull from the image file name, it's not very helpful if, again, your file name was like, images, one, two, three, or it's just not very descriptive. So if it was a portrait of Thomas Jefferson, would it be a young Thomas Jefferson? Would it be the elderly Thomas Jefferson while he was president? You have to be a bit more descriptive in your alt text to help these folks who are using screen readers. Then you also want to be descriptive because you can insert the key phrases that you want to be found for in this little text area. I wouldn't go so far as keyword stuffing and try to make it a bit unique to that images. So, for example, if it is back to the website designer, if it is, for example, a headshot of myself, I would put maybe my name, owner of Robot Designs Agency, located in Columbus, Ohio. And then I try to make sure that not a lot of them are the same. Because again, if people are using the screen reader and every time there's an images and it's the same exact thing being said, it's going to get a bit annoying.

Brett Johnson [: 00:14:42

Right? There's a little bit to that with Google too, I guess. I was told a long time ago that Google doesn't have eyes per se. You can't read a picture. So I think if that's still true, that may be a way of looking at what alt text does as well. You're kind of telling Google, this is what this picture is related to, why I'm putting it on this page.

Yasmine Robles [: 00:15:04

Yes. So the only thing that Google can see, all the bots can see are the basic outline of your site, the content, and any alt text or file names. They cannot see any images. This is why I'm really adamant about not having text on images. It's because nobody can see it. And then the user yes, if I am user who does not use a screen reader, I can see the image with text. But as soon as something goes wrong with that site or my WiFi is running a bit slow, that image won't load and I won't be able to.

Brett Johnson [: 00:15:37

See your message right now. Let's go to file types. I think I have a little bit of a handle on what some of those do and don't, but then all of a sudden I hear people talk about, well, an SFG. I really need the SFG. It's like, what is that? I know JPEG. I know this, and I kind of know what a PNG is. And the jif, I know the jiffy, the argument around how to pronounce that. Let's go over each of those file types and what they do and don't do.

Yasmine Robles [: 00:16:06

Yeah, so a little bit of jargon, but I'll try to break it down into its most simplest forms. So a JPEG is most of the images on your site would be a JPEG. They don't have a transparent background, so they're really great for photos backgrounds that might be, for example, the Columbus skyline, that sort of thing. Versus a PNG is great for logos and line drawings, and they offer a transparent background. So if you don't have any of the fancy, like, SVG file from your designer, as long as you have the PNG file, it can still get pixelated if it gets larger, but you won't have that weird outline of a white box around your logo or graphic. You can still use PNGs in place of JPEG. So, for example, if you have a headshot or something, you can upload it as a PNG. It's just that PNGs typically don't offer as much of a color spectrum as a JPEG. That's why JPEGs are the typical go to for actual photographs. Versus PNGs are for logos. Then we have the GIF or GIF. And honestly, I go back and forth depending on who I'm talking to, because there's just a big argument about it and I just prefer to play both sides, I guess. But these are great for short animations, but not really much else because they have a very limited spectrum of color, very limited color range. And so they could be used for logos, but I prefer the SVGs for logos or PNGs. But again, gifts or gifs are great. If you want to add, for example, maybe there's like a little star that twinkles or something that moves around a little bit or circles around that file type is great. Then we have an SVG, which is typically for the regular person out there they might not have heard about. But these are great for logos. And the reason they are great is because you can make these graphics larger or smaller without worrying so much about what will happen to that graphic. They are lightweight and more SEO friendly, and they allow you to add keywords because SVGs typically are not an actual file per se, but it is like a markup or a snippet of code that you would upload and then the graphic appears. It's basically like an equation that then appears on your site and becomes this graphic. There are actual files that you can export as an SVG, but that's kind of the gist of it. It's like a markup or how would I put it, some kind of snippet of code that goes onto your site. And so you can add keywords and descriptions into these if you want to. And again, they're more lightweight and they're perfect for any graphic or logo that is just limited in color or might end up needing to be larger or smaller. That's a really great one. One example that I did a while back was a wave background. So we wanted this wave to appear, but because it's a background graphic, we needed to make sure that it was friendly for large desktops as well as mobile and everything in between. So we ended up uploading an SVG, and then we could test out the different colors and positioning of it and it was great. So that's one way to use it.

Brett Johnson [: 00:19:34

Yeah. Let's go back to that text on images. Your next thought here is I you talked earlier that it, you know, it really serves no purpose on a website. So, you know, let's let's reiterate that. But I guess my mind went to is like but on social media great if you want to text on an image because it has nothing to do with being found, it's telling the viewer on that social media platform what's going on more directly. Possibly.

Yasmine Robles [: 00:20:02

Yeah. So text on a website, text on an image that's on a website is not that great. But text on a graphic for social media can be really well done. And just make sure to add the alt text. Most of the platforms now allow you to add alt text to your social media post as well. So in case someone does need to use that screen reader, they can then use it that way on that social platform. Just make sure not to add too much text. Just because you can doesn't mean you should just inundate your graphic with a bunch of text. Stick to the basic guidelines of design where it gets to be a title. So for example, if it's your podcast graphic, make sure it has your title, maybe the person you're interviewing. And again, give it some eye candy. So whether it's the person's headshot or your typical go to logo, give some eye candy because as people are scrolling through social media, they're looking for something that's pleasing to the eye and they might not be so excited to see this square box with a paragraph of text on it. Keep it simple and to the point.

Brett Johnson [: 00:21:11

Right? So what tools would you suggest just for images? You want to find good images, but you also want the opportunity to optimize those images as well in a platform before you ship it off to your website.

Yasmine Robles [: 00:21:26

Yeah, so the first one I would download, this is for Macs. There is a version for PCs, but I like Image Optum. It's basically I download it onto my site and what it does is when you click and drag all of your files, it will compress them, it'll make them a bit more optimized, and then it'll dump them back into your folder. So I like that one. Canva has an option. So when you're downloading images or a file from Canva, just make sure to pick a lightweight version that is not, for example, not a heavy image or PDF file, although that would not be uploaded to a site. But that's not a heavy file. It's been optimized already. And then for Macs, I also use Image Preview. Sometimes if I don't want to open up Photoshop, I use Image Preview and they have a tool there where you can adjust the dimensions as well as the weight of the image. The other one is Photoshop Express and I've used this once or twice. This is more for mobile or tablets. And you can go in there and I believe it's free. Don't quote me on that. But I believe it's free and you can go in there and just export the images out in a lightweight version. And then some of my clients use Pickmonkey, although most of my clients do use Canva because it makes their life a lot simpler. They're already creating social media graphics. They can create or edit their graphics for their website and they can just download it as a lightweight version from there.

Brett Johnson [: 00:22:56

Sounds good. Yeah. My only advice is, with all these tools, don't let it become a rabbit hole. I mean, I'll go on these and just play on Canva and hours gone because it's so fascinating what you can do and what images they have and such. So watch the clock. Your creativity, thermometer is going to go out the top in regards to playing around. If you have any creative piece in your bone of your body, you're going to love them. Just watch the time you'll lose your time, that's for sure.

Yasmine Robles [: 00:23:27

Yeah, to that effect, I would say create templates. So for example, on Canva for clients, if they know for example, that they will be interviewing someone, they will be asking for a headshot. Just create a template. That way you can always just pop it in there and you know that it's going to be optimized. After you download it, you can probably drag it onto something like image optim. Just optimize it some more and then upload it to your site. That way it becomes like this routine and you're not spending hours upon hours recreating the same thing.

Brett Johnson [: 00:23:57

Yeah, and I think we should probably touch on templates down the road in another episode because there are so many facets to templates that I found too, that it's a time saver. And also for the user experience, when they see that template come up in their social media feed or whatever, they know what to expect. Another thing is coming from this person episode or whatever. We probably should cover that because I think there's something really unique about that to help everyone in regards to just time, if nothing else and doing the best they can with the template. I love that idea. We need to do that. If anybody has a question or want to get in contact with you to kind of further deep dive into this episode or any other content we've got, how can they best reach you?

Yasmine Robles [: 00:24:42

Yeah, the easiest way to reach me is on Instagram at Roblesdesignstudio. I put a bunch of reels on there and you can message me there. You can also download a freebie www.roblesdesigns.com/checklist. You can always find my email or contact forum and send me your questions. I'd love to get more information on what you guys need to know and then the Circle of Experts and I can answer your questions.

Brett Johnson [: 00:25:09

Super. Yeah. We'll be talking again as we continue this series about website as part of the Circle of Experts. You can contact me as well www.mypodcastguy.com. And thank you Listener, for joining us on The Circle Sessions.