Optimize Your Images for SEO – Filenames and Alternative Text

Google web crawler/bot!

Images are great; they can draw the eye, provide additional information, affect one’s mood, and serve to really strengthen a message.

Would your website's content work just as well without any images? This is something you need to keep in mind when trying to optimize your website for search engines.

What is there to Optimize on Images?

The big three of image optimization are file size, file name, and alternative (alt) text.

Your image file sizes, if left unchecked, can really slow down an image-heavy web page. Image file names and alt text in particular are used by Google bots and visually impaired readers' software in order to make sense of the image.

Search engines dispatch "bots", also referred to as "crawlers", which scour the web in search of websites to index. However, these bots don’t see all the nice visuals the way you and I see them. These bots see your website in code.

So what does an image look like to one of these crawlers? To get an idea, head over to Seo-Browser, input your website URL, click on "I'm not a robot", and hit "simple". You'll see your site the way a search engine bot sees it, and if you look closely you'll notice that your images are replaced by their filenames; that's what your website looks like to a search engine bot.

JPEG vs. PNG - Which Image File Type is Right for Your Site?

There are actually dozen of file formats, but for the sake of simplicity I'll only discuss the two most common image file types you'll see on a typical website.

JPEGs are image file types that make use of lossy compression. In layman's terms, this means unnecessary information is removed from the image in order to create a smaller file than you could with a PNG. As a general rule of thumb, save real-life photographs as JPEGs.

PNG files use lossless compression which makes them the go-to choice for line drawings, text, and graphics.

Reducing Image File Size by Reducing Image Size

It's very common for people to throw up very large images onto their site only to display them as a 600 x 600 image. Be sure to reduce the size of your images by resizing them to the dimensions you need! If you aren't aware of what image size you need then I recommend not letting either the height or width exceed 2048 pixels. An image that size is more than large enough to span the width of your entire site, so there's no reason to be uploading your images any larger than that.

There are also free plugins available for WordPress sites that help optimize images with just a few clicks. Here's an article with 5, great and free image optimization plugins you can use.

Optimizing Your Image Filenames

Are you planning on uploading some images to your website? Before you do, find these images and take a look at their filenames. Your camera tends to name them with the date of when the image was taken (if you're lucky); this doesn't benefit your SEO and it just makes it harder to find your images either on your computer or on the backend of your site. NEVER reupload the same image to the backend of your site! This is how you end up with a dozen duplicates of the same image.

As annoying as this might sound, you actually want to change the name of each image into a concise description of the image(s). Don't get fancy!

Use this as a guide:

I named the image above "Santa-Barbara-Mission" and uploaded it to this blog.

If you right-click on the Santa Barbara Mission picture and click on the "open link in new tab" you'll see the web address for this image. Click on the newly opened tab. Then, look up at the URL bar. This should be what it looks like:

https://www.goldsocialmedia.comwp-content/uploads/2016/09/Santa-Barbara-Mission.jpg?cf73db

Focus on the bolded words "Santa-Barbara-Mission" in the above URL. Everything else in the URL is generated by the blog itself. All I had to do was title the image as "Santa-Barbara-Mission" and upload it to this blog.

You may notice that dashes/hyphens ("-") have been used instead of spaces; this is considered best practices and I would encourage you to name your images in this manner.

Adding Image Alt (Alternative) Text

"Alt" text is another important aspect of not only image optimization for search, but for visually impaired readers. Specialized software allows the visually impaired to navigate websites; when they come across images, the software reads them the alt text of the images.

Unlike an image filename, you shouldn't write your alt text with dashes/hyphens. Instead, just write it as you would a normal sentence.

For example, the alt text for the SB Mission above is: Front view photo of the Santa Barbara Mission

Just like a filename, keep it concise and simple.

To gain a greater depth of understanding of alt text, check out this video by Google's Matt Cutts.

Applying Alt Text on WordPress

This button bar should come up when you click on an image.

Applying alt text to images on a WordPress site is easy. I recommend you go back to your older web pages and blog posts and add alt text to any images.

1. Click on the image you want to edit, you should have a series of buttons pop up; then click on the pencil button (edit button).

2. You should immediately see the "alternative text" field (see image below). Type in your alt text, and if your "Image Title Attribute" field is empty, go ahead and type your alt text in there as well. Click on the image below to get a better idea of where these fields are.

Write in your alt text, copy it to the "title attribute" if it's empty, and hit update!

You should now be ready to optimize your images! Let me know if you have any questions in the comments section and I'll be sure to answer them!