SEO-Friendly Images

Who doesn’t know the quote from Field of Dreams? “If you build it, they will come.” While it’s a throwback to 1989, the sentiment is something that often still prevails today in the business and nonprofit world.

Unfortunately, building a website and hitting the publish button isn’t enough to bring in visitors. You need to develop your marketing vehicles and channels to raise brand awareness. And ultimately, you need to secure donations and volunteers or make sales. The best place to start is with a firm marketing foundation. Part of that firm marketing foundation is built on solid SEO principles.

Why? Because it’s hard enough to be heard above the noise without having Google working against you. Use the power that is Google to your advantage. To learn more about SEO and what you can do to improve your ranking, take a look at the SEO series starting with Part 1 and Part 2.

The series is authored by Wanna Pixel’s own team member, Mindy Schoeneman. Mindy specializes in taking an organic approach to marketing and ranking. She covered SEO-friendly content in Part 1, backlinks in Part 2, and in this article, she is talking all about the relationship between SEO and images.

Did you know that images influence your ranking? Did you know there are such things as SEO-friendly images? Keep reading to learn more about it.

how can an image be seo-friendly?

Do Google crawlers scan images and declare a photo to be rankable or un-rankable? Is Google’s AI an art critic too?

The short answer to the first question is sort of, but not in the way you’re probably imagining. As for the second question, the answer is no: Google’s AI isn’t an art critic, but it is designed to show searchers the results that have historically received the most traffic.

An image can certainly be SEO-friendly, though. But its friendliness has nothing to do with its subject matter or composition. At least not from a Google robot perspective.

Say what, Mindy?

Hang in there. I’ll explain. Let’s start at the beginning of how to optimize an image for the web.

image optimization

Optimizing an image starts with your image choice. Remember from Part 1—The best metric by which to measure your SEO success comes in the form of human connection.

You can’t sell anything or obtain a single donation without first making a human connection. That human connection starts with emotion. And images are the perfect vehicle for stirring emotion and making that human connection.

Our brains are wired to look for human faces. Once we find a human face, we analyze that face and process the visual cues represented. Things such as the slight lift of an eyebrow, furrowing of the brow, or a wide smile send a message our brains can process more quickly than written or spoken words. It’s something we do without consciously making an effort to do so.

the human side of making a connection through images

Choosing the right images can make a huge impact on your ability to connect with your visitors.

In this article from Kissmetrics, Jonathan Koo offers up case studies they performed for their customers to improve the user-experience. Skip down to case study number 18, and you’ll see for yourself the difference a properly used photo of a human face can make. Koo’s team saw conversions increase by 65 percent once they added emphasis to a photo of a smiling person, making the design and content work together.

For heart-centered nonprofits and businesses, it’s incredibly important to not only choose an image with people in it, but also to choose an image that gets at the heart of how you serve people. You need images that convey the right emotion.

How are you making the world a better place? Can you show the impact of what you do in a photo with people? If so, then it’s time to capture those images. By conveying the heart of what you do through nonverbal cues found in images, you’re sending a message that your visitors’ brains will process instantly and then pass on to their hearts.

the tech side of optimizing images

The first step to optimizing an image for your website is compression. Anytime you’re uploading large files to your website, you’re setting yourself up for failure. While it’s important to use beautiful, high-resolution images, high-quality images are huge. And a website has to be lean to be as fast as possible.

Any website with a load-time longer than three seconds means you stand to lose some visitors. And Google will lower your ranking. That goes for the mobile and desktop version of your website.

To increase speed, there are many optimization techniques Wanna Pixel employs across each website, but properly optimizing images is something that doesn’t stop when the website is complete. Are you blogging on your website? If so, every image you add to a post needs to be compressed and optimized.

Mindy, what is this compression thing you keep talking about? Won’t my images look terrible if I compress them? Is compressing each image I add to my blogs really going to make a difference in the load time of my entire website?

Okay. Let’s answer those questions.

what is image compression and how does it help?

Imagine you have a box. And in that box, you need to store your clothes from the previous season. You open up your closet and begin throwing all of your clothes into the box. It quickly fills to overflowing, and you still have several pieces of clothing to add. And there is no second box.

Because you’re a problem-solver, you analyze the situation. Then you start over, folding and rolling each piece of clothing so it takes up less space. You discover once you’re done, that you still have plenty of room left in the box. You even throw in the shoes that go with those clothes.

Compression works the same way. The box is your website server where all of your files are stored, and the clothes are your images. If your images are properly compressed, not only will that allow room for more images and files, but it also means that visitors’ browsers will be able to more quickly access those files. Why? Because they aren’t digging through a box of clothes that were just thrown in there. Everything is nicely organized and optimized.

It’s a lot more technical than that, of course, but the general idea is that you can put great-quality images on your website without slowing it down. You won’t be able to see the difference in the images if optimized properly, either.

While it might not seem like a big deal to optimize now while your website is still fresh and shiny, down the road when you’ve written 130 blog posts, your box will be overflowing. And going back to optimize all of those images from the last three years will be more of an undertaking than optimizing as you post.

A great free image optimizer I use often is Optimizilla. And if you’re not sure how well your website rates on load time, then check out GTmetrix. The results can be terrifying if you’ve never asked a pro to optimize your website for speed.

the meta side of image optimization

Anytime you hear the word meta in reference to a website, automatically know that there’s a one-in-10 chance it means information that isn’t visible to the average website visitor. Meta information such as meta titles and tags and alt text are written for crawlers.

Remember when I mentioned that Google crawlers sort of scan images and declare them rankable or unrankable? Well, crawlers don’t have eyes. They can’t actually see an image and note the colors and shapes and subject matter (at least not yet). Instead, they look for the information that is attached to an image. That information is meta information.

A properly uploaded and optimized image will have a filename, alternate text, and in some instances, a description (and possibly a caption where appropriate). This is something that either can be added to the image file ahead of time (that’s above my pay grade, meaning that’s advanced image stuff I don’t know how to do), or the information can be added when uploading the image to your media library on your WordPress website.

If you have something other than WordPress, there’s always a way to include the alt text and filename in a way that lets Google’s crawlers access it. You just might need a little professional help in learning how to do it.

why is meta information for images important?

It’s important because it reinforces the relevance of the information you’re sharing on your website. It’s like a little echo of the words you’ve already spoken. It’s a signal to Google that you are on the up-and-up and not trying to trick visitors with bait and switch tactics.

This information is also important to have on your website because it expands your reach. Have you ever entered a keyword or phrase into Google search and then selected the Images option to search for image results only? If so, maybe you’ve wondered how Google knows to return relevant images.

Google knows because crawlers have indexed pages on which those images were found, indexing the alternate text and filenames for each image. By making sure you have relevant filenames and alternate text on your images, you are increasing the chances that someone will find your website through an image search.

And it’s really simple to do. It takes hardly any time at all.

meta information examples

So what in the world does an optimized filename and alt text tag look like?

Let’s start with the filename. An example of a terrible filename that won’t win you any SEO points:

Img_10192850943.jpg

What can you tell me about the photo based on that filename? I’ll wait. Take your time…

That’s right. You can tell me it’s a jpg file, which is completely useless information. I really doubt very many people if anyone is going to search for img_10192 blah blah and then stumble across your image and fall in love with it and visit your website.

Instead, a really great example that will win you all the SEO points is this:

YMCA_Camp_Fitch_summer_camp_2017_01.jpg

That filename tells a story. It tells me that the image presented should be an image of summer camp hosted by YMCA Camp Fitch from 2017. If I were looking for a summer camp or YMCA summer camp in a search, then this image might be one of the image results.

alt text

Alt text is short for alternate text. Have you ever gone to a website where the images didn’t load? Imagine that’s how all website appear to you. Imagine you are visually impaired and use an accessibility app to browse the web. The only information you have to go on to understand what is in each image is the alt text.

Now imagine you’re a Google crawler and you have to index a page and its images. You can read the filename, but that’s all you have to understand the relevancy of the photos to the content.

Utilize alt text to connect with individuals who are visually impaired. Use it to describe what’s happening in the photo. By doing so, you’ll also be generating more information for Google to index. Which is a good thing.

So, an example of terrible alt text which will not win you any points with Google or those with accessibility needs:

YMCA Camp Fitch summer camp 2017

It’s important to have the important words in there, but this alt text doesn’t do a good job of describing the scene. Instead, a good alt text would be:

Children laughing and roasting marshmallows at YMCA Camp Fitch

That alt text tells a tale. That text gives the visitor and Google more information.

when in doubt

If you’re ever in doubt about optimizing your image, always consult the rule-maker. Who is the rule-maker? Google.

Google knows they make many people go a little crazy trying to understand what it is they want from website owners. So to help alleviate some of the mystery, they have a great repository of webmaster tutorials. Take a look at their image publishing guidelines.

one last thing…

If you don’t have an image sitemap on your website that has been submitted to Google, then it’s time to work on it. After you update those filenames and alt text, that is. If you don’t know what the heck a sitemap is or how to generate one, then contact your webmaster or the Wanna Pixel team to help you with that.

And if you’re like me and you nerd out by reading studies and learning more about human behavior and design psychology, then take a look at this. It’s an article from Will Fanguy at Piktochart about five studies focused on visual information processing.

The next post in the series will be one you won’t soon forget. We’ll be talking about the overall impact of SEO and the SEO overlords (aka Google).