Get your on-page in order. Optimize the titles, write unique meta descriptions, ensure you’re using all your keywords, and optimize your images.“
I’m sure you’ve heard this a million times.
Well, how the heck do you do it? What is image optimization and how does it work?
That’s what you’re going to learn today.
The Basics
“A picture is worth a thousand words.”
The old English proverb is more true than ever when it comes to digital content.
No one wants to read through a 5,000-word guide that is simply a wall of text.
Images are great for illustrating your points, explaining complex concepts, or just entertainment value.
*Insert silly meme*
We probably don’t have to convince you to start using images in your content as the benefits are obvious.
Just one small issue…
Google cannot see images the way we do and thus generally have no idea what’s on them.
That’s why we need image optimization.
(Editors Note: Thanks to AI and machine learning, Google now does have technology that can understand images. However, the accuracy is nowhere close to where it needs to be so the following is still critical for optimal results.)
Here are the key ways we can optimize images:
Table of Contents [show]
Optimizing Images With Text
There are some super easy ways to give Google (and your visitors) additional context about your images. These help you rank better in Google Images and also create additional keyword relevance for the pages you have the images on.
Alt Tags and Title Tags
The HTML “alt” attribute is the alternate text for an image in the event that it cannot be displayed. This could be due to a browser configuration, accessibility reasons (e.g. blind users), or other technical faults.
It allows the user to understand what the image would’ve been about.
Tech has gotten far enough where images not loading aren’t a major concern so users don’t have a lot to benefit from this but search engines use it as a way to understand what the image is about.
The tag is implemented within the image as such:
<img src=”optimizing-images-for-search-engines.png” alt=”How to create proper alt text for images” />
The image title tag is another way to tell Google what your image is about. It’s also what you see when you hover over an image for more than two seconds.
It’s best practice for this to be slightly different than the alt text as this may allow you to target more keywords.
What Do You Write as the Alt Text?
You’ll want to write 3-7 words describing the image and using a relevant keyword within that.
Please note that this should NOT be the main keyword of your post, but one relevant to the image. You also do NOT want to stuff this full of keywords.
“Image SEO guide – optimizing images” is not okay.
Let’s use an SEO-related example here.
Pretend we have an article about keyword research.
The first image will likely be the “header” image with the blog post title and it’d be great to add the alt text of that as something that contains your main keyword “The Ultimate Guide to Keyword Research“.
Next up we’ll have a photo of us analyzing some keywords in a section of the article about buyer intent. We might set the alt text to “How to use Ahrefs to identify buyer intent keywords”
And so on and so forth.
Each image is supposed to supplement the content around it and the alt text supports those long-tail keywords and topics.
Optimizing Image File Names
File names are just another way of letting Google know what the image is about.
As per their Webmaster Guidelines:
“The filename can give Google clues about the subject matter of the image. For example, my-new-black-kitten.jpg is better than IMG00023.JPG.”
Keep it simple, utilize keywords, and keep them short.
Generally, we keep all three – alt tags, titles, and the file name – quite similar and rewritten versions of each other.
Surrounding Text
The content around your image is a great indication of what it is about.
If your file name, alt text, and title indicate that the image is about SEO but the surrounding text is about the best restaurants in New York – what do you reckon Google is going to think?
This is a great tactic to utilize to rank in Google Images.
We had a client who was ranking number one with a “blood sugar chart” and raking in tens of thousands of visitors a month just from one image that was well optimized for that exact term.
Captions
Captions are generally the best example of “surrounding text” for images but here’s one place where we urge you to actually ignore search engines.
Sure, having a keyword in there would be great but captions are one of the best ways to try and engage with your readers.
Get creative and toss a joke in there instead.
Image Speed Optimizations
Images are one of the biggest contributors to how long your website takes to load.
Site speed is not only an important ranking factor but it is also critical for conversions.
According to Kissmetrics, a 1-second delay in page response can result in a 7% reduction in conversions.
The Best Image Size for Blog Posts
Even though my computer runs at a high resolution and I have a big 32-inch screen, websites generally load a lot smaller than that.
As you can see on the image below – the total width of my screen is 2670 pixels but the content from our blog is only displayed across 770 for the sake of people with smaller screens as well as readability.
The same goes for images. Since our blog can only display things at a maximum width of 770 pixels, we should resize every image larger than that before uploading it.
Otherwise, we might upload an image that’s 4,000 pixels wide and has a file size of 5,3 MB. Not only will it take a lot longer to load for the user but your CMS will have to change the display to 770 pixels anyway.
Resizing your images to the size they’re actually going to be displayed at is one of the best ways to increase your site speed.
The Best Image File Formats for Web
The three most common file types for saving images are JPEG, PNG, and GIF, and the file size differences them can be huge.
Here’s an example:
As you can see, the comparative file size differences are quite significant and they can be even bigger depending on the image type. You’ll also notice small quality differences.
So which one should you use?
Here’s the mini reference list we use for our team.
Pros and Cons of JPEG Images
- The best option for photos (e.g. stock, social media, etc)
- Three compression options for quality
- Great color quality
- Generally smallest file sizes
Pros and Cons of PNG Images
- Allows transparent backgrounds and shadows
- Highest quality images
- Good for small images
- File size can be a bit bigger
Pros and Cons of GIF Images
- Allows animations
- Transparent backgrounds
- Lower color quality
- Small file sizes
Use Image Compression
There’s software out to compress images and reduce their file size. Here’s an example of what happens:
There’s a 29.2% reduction in file size and I cannot see any difference in the quality.
Now imagine the impact of this on-page speed if you do it for 25 images in a long guide.
It’s massive.
There’s a software called ImageOptim for Mac, which is what we use, and it lets you compress images within seconds.
If you’re a Windows user, we can recommend an online tool such as ShortPixel.
Compress your images, folks.
Utilize Responsive Images
As discussed earlier, in spite of what size images are displayed at, they generally have to be loaded at the full size first.
Meaning that if your blog is 770 pixels wide like ours and you have an image with the same width, but someone views it on mobile at 240 pixels, they have to wait for the whole thing to load.
Responsive images take care of this by automatically creating small, medium, and large versions of an image.
Some content management systems, such as WordPress, take care of this automatically.
If you’re using another CMS, you’ll want to find an extension or plugin that allows you to do the same.
Additional Optimizations
Structured Data
Structured data was created to standardize common information about online content.
Ever notice that when you Google for recipes, it might provide you with the cooking time and nutrient information? Or when Googling for reviews, you’ll see little stars for the ratings?
That’s structured data.
In terms of structured data for Google Images, there are currently three main options:
Videos – Optimize the thumbnail image, modify the duration, list views, etc.
Recipes – Choose the image displayed in search results, add user ratings, cooking time, nutrition information, preparation time, and more.
Products – Add product images, list prices, availability, and reviews.
Twitter Cards and OpenGraph
Using the OpenGraph protocol and Twitter Cards allows you to choose the image that is displayed on social media when a page is shared:
Although these do not have a direct impact on SEO, having a custom image will help you appear more appealing and can lead to higher traffic and thus, more links.
If you’re a WordPress user, this is super easy to do with the Yoast SEO plugin by going to the “Social” section. For the Shopify folks out there – check out this guide on the Shopify blog.
Valuable Content in Images
One common mistake we’ve seen dozens of our clients make is putting important content on images.
There are a lot of designers out there that know nothing about SEO and how search engines work and they may design your site in a way where critical information, such as your headlines or the content itself are actually images.
As discussed earlier, this is a huge issue as Google cannot accurately process this information and is currently not using it to rank websites.
Ensure any and all content that can be expressed in words, are actually present as words.
Set Up an Image Sitemap
A sitemap is an overview of all of the content on your site, generally used to index articles. Well, you can also create an image sitemap which tells Google about all of the media files on your site.
This can help index new pages and images faster and ensure nothing gets missed (e.g. images that are loaded via javascript).
Here’s the WordPress plugin we recommend for image sitemaps.
Image SEO FAQ
We update this post once a month with any changes to the main content and also add additional questions from both our clients and readers.
Here’s what others have asked:
How Many Images Should I Have on Each Page?
Just like with word counts, keyword densities, or anchor text ratios – there’s no one magical answer in 2019.
Your best bet is going to be reverse-engineering the top five results for your main keyword.
Pull up articles that are already ranking and take a look at how many images they are using in their content.
While this isn’t a super scientific approach, it may show that for some topics, Google prefers image-rich or video-rich content.
At the same time, if you feel like a post would be more valuable with additional images or media, don’t be afraid to deviate from this number.
Use it as a guideline.
Does Image Metadata Affect SEO?
All image files contain metadata (EXIF and IPTC) that stores information about how the photo was taken (camera, focal length, etc) as well as things like the date it was taken, the location, and copyrights.
Google’s statement on this has been that it may or may not be a ranking factor but they reserve the right to use it. ¯\_(ツ)_/¯
Lucky for you, most image compressors (discussed above) strip this data for you and this is the way I prefer to go for the majority of businesses.
But I also reckon there’s a small chance that if you’re trying to rank for local terms (such as Charlotte SEO company) you may benefit from having real photos taken in the area that contains the metadata.
