What’s the difference between lossy and lossless image compression? How do you…
When it comes to generating more organic traffic for our website, we start working on keywords, optimizing content, and various on-page SEO tactics.
We also work on off-page SEO factors such as obtaining more backlinks and social shares.
Why limit yourself to the same old strategies over and over again?
A very underrated strategy to driving more organic traffic is by optimizing your images for search engines.
That’s right. Google image search can help drive more visitors and traffic to your website!
A great piece of content is when you strike the right balance between text and images.
While the text is essential, images are equally important too. They add the much-needed visual flair to an otherwise long and tedious piece of text.
Based on a study of over a million articles conducted by Buzzsumo, they found that including an image to an article once every 75-100 words helped double the number of shares compared to articles with fewer images. This surely helps boost the website’s traffic!
If you were searching for textual content, we’re guessing you’ll be looking for visual content too. And that’s where Google image search comes into play.
A search on Google throws up images right on top of the results page from time to time. Images are returned for 27.3% of search queries on Google. (Moz, 2020).
In short, image search is an untapped source of potential traffic for your website, and it’s about time we racked up our image SEO strategies as well. If you haven’t already, that is!
This article will cover some basics regarding image SEO, why it is essential, and the factors that affect your image rankings. Finally, we’ll cover some tips on optimizing your images to bring in that untapped source of organic traffic.
So, to begin with…
What is Image SEO?
The process of optimizing your website images to make them more accessible to search engine crawlers is image SEO.
Typically, search engines crawl the website content to provide the most relevant and accurate results for its users. The same algorithms are used on the images as well.
Image SEO may just be the game-changing strategy our website needs for that boost in traffic.
After all, 62% of millennials choose visual search over any other search type. (Source: Business Wire)
Here are a few a couple of interesting facts on image search,
- Images are returned for over 30% of the search queries on Google (Source: Moz)
- The number of daily pageviews from users of Google Image Search is greater than 1 Billion (Source: Quora)
And yet, we under-utilize this potential SEO strategy!
Why is Image SEO Important?
Let’s begin with some more interesting facts,
- 90% of information consumed by the brain is visual
- The brain processes visual content 60,000X faster than textual
- 40% respond better to visual content as against textual content
- Including infographics helps grow traffic by an additional 12%
There are a lot more facts we can include. All of which drives home a simple fact that including visuals within the text increases your overall website traffic.
Images are essential for SEO. By including images on your pages/posts, you are getting visitors to stay interested in your piece of content, create more engagement and probably have your content shared as well.
With an increase in time spent on your content, you are also reducing the bounce rate of your website. What is a bounce rate?
Bounce rate is used to measure the percentage of people landing on your website/webpage and leaving without doing anything. They don’t click on any link nor navigate to other pages of your website, and neither do they fill up any form.
In simple terms, they ‘bounce’ off your website without performing any action. Among various reasons, this primarily happens if a visitor has not found anything of interest to them.
As far as an article is concerned, the visitor could leave if they are bored seeing only endless textual content on the page. In other words, it’s also a good way to improve user experience.
Your images can help you rank higher on Google and get more traffic. That being said, it’s best to know the factors that affect your image rankings too.
Factors That Affect Your Image Rankings
We begin by understanding the factors that affect your image rankings. And once we’re clear with this, we cover the tips to improve your rankings in the next section.
1. Can your images be found?
If you are not found on the search engines, you miss out on a lot of potential traffic.
Search engines send their bots to crawl and index your website. While crawling the website, the bots index your content, i.e., both text and images.
You have to ensure your images get discovered, crawled, and indexed by the search engines.
Including images in your XML sitemap makes it easier for search engines to discover, crawl and index your images.
You can either include the images in the existing sitemap or create a dedicated XML sitemap to include the images. The choice is ultimately yours.
In your robots.txt file, ensure you are not preventing the Googlebot-Image bot from accessing your images.
Another tip is to ensure you don’t have the noimageindex directive on your pages, i.e., you should not have the following line of code on your pages.
<meta name=”robots” content=”noimageindex”>
Having this line of code tells the search engines not to index the images on the page.
2. What is Your Domain and Page Authority?
Let’s take an example here.
Search for ‘wordpress’ and check out the first few results.
The unique top five results are,
Well, WordPress.org features on three occasions.
Any idea what’s the (Domain Authority) DA and (Page Authority) PA of WordPress.org?
The MOZ bar indicates a PA of 100 and a DA of 98 for WordPress.org.
And as for Wikipedia, the PA and DA are 81 and 94, respectively.
What are DA and PA?
MOZ developed the metrics, i.e., domain authority and page authority, which indicate the authority a domain or page has. It indicates the relevance and dominance that a page or domain has in its niche.
It is a number that ranges from 1 to 100, 100 being the maximum. Higher the number, the easier it is for a website to rank higher on the search results page.
To keep things simple, if a website is popular and is looked upon as the be-all and end-all of information related to a particular topic, it gets many backlinks and social shares.
This tells Google that the site in consideration is an authoritative one. Thereby gaining an increase in the domain score, which eventually helps rank the site higher.
Back to our topic, if your image is on such an authoritative website/webpage, it naturally benefits from it.
3. Is Your Image and Page Content Relevant?
The page content and the image go hand in hand. Including an image that has absolutely no relevance with the textual content doesn’t help your rankings at all.
And why do we say that?
Head over to Google’s Cloud Vision API.
Thanks to the advances in machine learning, Google doesn’t require an alt tag (the alternate text you assign for an image) or a valid file name to understand what the image is all about.
For instance, we added an image with the file name ‘Screen Shot 2021-04-07 at 9.28.00 am’, with absolutely no alt tag or caption. As you can see from the report generated, Google Cloud’s Vision API can nearly tell you what this image is all about.
So, the next time you’re adding an image to your post, you may need to reconsider adding one that’s relevant to your content!
4. Does Your Website Images Load Fast?
Page speed is an important ranking factor. All the more reason to ensure your website images load faster.
Some tips (we will cover more tips later in this article) to ensure it does are choosing the proper image format, the right image size, and compressing your images.
Do you want to mark up any image using Schema? Do you want to win the featured snippet on the search engine results page using Schema?
You can mark up any image for your content using the Schema markup. This helps search engines understand its context and also a chance to win the featured snippets position.
With the images featured in the snippet, not only does it stand out from the crowd, but you also get more click-throughs.
Image Optimization Tips You Must Know
Now that we’ve covered the factors that affect your image optimization, let’s cover some tips to optimize your images and drive more traffic.
1. Choose the Right Image Format
Before you add images to your site, you want to make sure you’ve selected the correct file type.
While there are various image formats to choose from, PNG and JPEG are the most common file types for the web.
With PNG, you get much better quality images, but it does come with larger file size. With JPEG, on the other hand, you can adjust the quality and file size to strike the right balance.
Ideally, use JPEGs when using bigger and more visual images such as photographs and PNG for logos, screenshots, and computer-generated graphics.
Whether you’re using a JPG, GIF, PNG, ICO, SVG, or WebP, each image format comes with its distinct features, especially when it comes to image compression. So, getting the image format right up front is an important aspect.
2. Compress Your Images
Did you know that images make up for an average of 25% of a web page’s total weight? (Source: HTTP Archive)
Considering page speeds are an essential factor in determining your site rankings, due importance must be given to the file size. Whatever bytes are reduced will surely help the cause.
Before uploading images to your site, compress them. Use tools such as Photoshop that you can use to create optimized images. But what if you’re not comfortable working with such image editing tools?
No sweat! There’s a range of tools to help you with just that. From online tools to plugins that you can install on your WordPress site, we’ve listed some of the popular tools you can use to compress images.
These plugins reduce the file size and do so without compromising the quality of your images. Just ensure that the compression of the images happens externally on their servers. This way, it doesn’t affect the load time on your site.
Yet another tool to compress your PNG and JPEG files. This time around, you compress the images online. You needn’t worry about installing it on your WordPress site.
TinyPNG allows you to compress your images online. You are allowed to compress 20 images at a time. Want to compress more than 20 images at a time? Go in for the Pro version!
Imagify is the most advanced WordPress plugin that allows you to optimize images right from your WordPress dashboard.
With just a single click, you get much lighter images without having to sacrifice quality.
Once activated, all your images will be automatically optimized when uploaded into WordPress.
Go ahead and try Imagify for free.
ShortPixel is a free and easy to use, lightweight WordPress plugin. Just install it and forget about it. With the ShortPixel WordPress plugin, you can compress all your images and PDF documents with a single click.
New images are automatically compressed and optimized as you upload them to your WordPress site.
Smush is a very popular WordPress plugin with more than 1 Million active installations.
Using Smush, you can optimize your images, enable lazy loading, resize and compress your images, all from within your WordPress dashboard.
As is the case with the other WordPress plugins, the images are automatically compressed when uploaded to your site once installed.
3. Create the Right Image File Name
What does your image file name look like?
Recall our earlier random file name – ‘Screen Shot 2021-04-07 at 9.28.00 am.png’? Well, the less we look at that, the better it is!
When it comes to creating the right file name, it’s highly recommended that you include the keyword you are targeting on that particular page. It’s great for SEO.
Although Google’s Cloud Vision API understands the context behind the image, adding an SEO-friendly image name indicates the subject matter of the image to Google.
Random file names (like the one we used above) don’t help Google understand what the image is all about.
So instead, a file name such as ‘seo-course.png’ really hits the nail on its head.
4. Create Unique Images
Ok, on a lighter note, what’s the one thing that’s common on a lot of corporate websites and consulting firms?
They have the same management and people working for them. Wondering how come? Because they all virtually use the same stock images!
And guess how confused Google would be.
On a serious note, use original photos and images rather than generic stock photos if you want to stand out from the crowd.
While the stock photos may be well optimized, they wouldn’t have the same impact or SEO benefits as an original, high-quality image.
Using large images may also help it get featured in Google Discover.
5. Use SEO-Friendly Alt Text
Ever noticed a descriptive text appearing when you hover across an image, as shown below?
This is referred to as the ALT text or even alternate text.
What happens when the image doesn’t load for some reason? If it’s a small image, it may go unnoticed. On the contrary, if it’s an image that takes up a lot of real estate on the page, it may not go well with your visitors.
The ALT text is your fallback plan.
When the image fails to load for any reason, the ALT text appears in its place. While it’s not ideal to have a broken image, Google considers adding an ALT text a good on-page SEO practice. It helps communicate to Google the contents of the image file.
When the image doesn’t load, you’ll get an image box with the alt tag present in the top left corner. Make sure the alt tag fits with the image and makes the picture relevant.
So, the next time you add an ALT text to the image, you’ll want to add a relevant one.
Here’s a tip you could consider. Use the page keywords within the ALT text.
For instance, if you are promoting an SEO course for beginners, the image ALT text needn’t be just an ‘SEO Course.’ Instead, you could have it as ‘SEO Course for Beginners’.
So, instead of including the ALT text to an image like this,
<img src=”seo-1.jpg” alt=”seo”/>
A much better method would be,
<img src=”seo-course.jpg” alt=”seo course for beginners”/>
6. Your Page Title and Description
Noticed how your page title and description appear on the image search results page?
Google Images generates a title and snippet to best describe each result. This helps visitors decide whether to click on a result or not.
Google pulls this information from various sources, such as your page title, the description, meta tags, and so on. By providing this information and by following Google’s title and snippet guidelines, you help Google improve the title and snippet quality displayed for your pages.
7. Define The Image Dimensions
When you visit a webpage, notice how the page jumps while the images load. Why does this happen? It’s because the image width and height haven’t been specified.
Defining the width and height of the image is a good practice. It allows the browser to size the image and stops the page from jumping as it loads. Eventually leading to a much better user experience.
CLS is a metric used to measure the sum total of all individual layout shift scores that occur during the entire lifespan of a page. An ideal CLS score to strive for is 0.1 or less.
Ensuring that you include the image width and height attributes is key. For instance, going by our previous example, while it is ok to have the following,
<img src=”seo-course.jpg” alt=”SEO course for beginners”/>
The ideal approach will be as follows,
<img src=”seo-course.jpg” alt=”seo course for beginners” width=”100” height=”100” />
That’s considering the image size is of a width and height of 100.
Including the image’s width and height clearly instructs the browser how much space is required, prevents any content from shifting, and reduces the CLS score.
8. Create a Proper Image File Structure
One of the major updates in Google’s Image Guidelines is using file name and file path to rank images.
For example, if you have several products on your online store, rather than having all the images uploaded into a generic media or images folder, it would make sense to create categories and subcategories.
So, if you’ve got a clothing store selling t-shirts and shirts for men and women, instead of having images uploaded to a folder such as:
A better way to go about this would be to have folders such as:
Structuring your images into such categories and subcategories is a way better option to help Google understand too.
9. Create Responsive Images
Considering mobile searches are exceeding that of desktop, your site must be responsive.
Did you know that the default Googlebot crawler for websites is now a mobile crawler?
Let’s say you upload a 1000px-wide image to your site.
If a user visits your site on a mobile device with a smaller display, say 320px-wide, their browser has to load the 1000px image still.
The 1000px image will look perfectly fine. And so would a 320px-wide image on the mobile device.
Identified the problem here?
Both the 1000px and 320px wide images are going to look perfectly fine on the mobile device. So why load the 1000px image and waste the bandwidth. With longer page loads, we affect our SEO.
This simple code tells the browser to load different versions of an image for different screen resolutions.
Using the srcset attribute, you specify a list of image URLs along with the size descriptions. You’ll still need to use the src attribute to specify a fallback and default image, just in case a browser doesn’t support the srcset attribute.
Here’s a typical syntax…
<img srcset=”imageurl size, imageurl size, imageurl size” src=”default image”>.
Here’s a more real time example:
srcset=” /wp-content/uploads/image4x.jpg 4x,
/wp-content/uploads/image1x.jpg 1x ”
A commonly used approach to including size information is to label each file by image density in the srcset attribute.
Which in the above example is done by adding 1x, 2x, 3x, and 4x after the URL.
The good news is that WordPress takes care of all this (from WordPress 5.3).
For each image you upload, WordPress automatically makes the following versions by default:
- Thumbnail: Resized to 150px by 150px
- Medium: Resized to 300px by 300px
- Medium Large: Resized to 768px wide
- Large: Resized to 1024px by 1024px
- Full: Original image
What’s more, WordPress also adds the srcset attribute automatically. Go ahead and check out your WordPress source code for the srcset attribute.
10. Consider Lazy Loading
Why load an image that’s at the bottom of a page when your viewing contents above the fold?
That’s precisely what lazy loading helps you with!
No one likes a slow website. With images and other elements taking time to load, not only does it affect your page speed and rankings, but it also puts off your website visitors.
Did you know that if your website takes as much as 3 seconds longer to load, 40% of visitors will abandon the website? And that a 1-second delay can result in a 7% reduction in your website conversions? (Source: Neil Patel)
Images, by far, take up the most amount of time to load on a website. The more images on a page, the more is the page load time.
Lazy load helps address all these concerns.
Lazy load is when the browser defers the loading of objects such as images, videos, and so on until they really need to be shown. The images are loaded as and when as you scroll.
Considering page speed is a crucial factor for search engine ranking, having your images lazy load is an option you could consider.
To enable lazy loading of images on your WordPress site, you could consider one of the various lazy load plugins available in the WordPress repository.
11. Content Delivery Networks (CDN)
Optimize, compress, and lazy load your images. All are great options as far as SEO is concerned.
But, we’ve got to deliver the images fast. And this can be achieved using CDN.
So, what is a Content Delivery Network (CDN)?
CDN, in simple words, is like having copies of your website on servers located across the globe. When your website is accessed from a particular location, the server closest to the location will serve your website.
By accessing a server closest to the location being requested, you reduce the page load time considerably.
12. Browser Caching
Every time an image loads, a request is made to the server. More the images, the server requests made are considerably higher.
Are these the only requests made to the server? By no means!
Various other website elements make similar requests. All are resulting in reducing the page load speed.
That’s where browser caching comes into play.
A browser cache is when web files such as pages, images, and so on are temporarily stored to reduce server lag. With images being stored locally in the user’s browser, it eliminates the need to load them from the server repeatedly.
Again, if you’re using a WordPress website, you can install a browser caching plugin from the WordPress repository.
The bottom line is, create a great user experience!
It’s all the little things that count. Your visual content has to be relevant to your page’s topic. Good visual content on your page is just as important as textual content. Optimizing the page content, adding schema, among more, will help generate a text snippet for your image.
Want to know more about image optimization? Check out our dedicated article on how to optimize images for performance and SEO!
Tools to Help you Analyze Image Optimization
From analyzing your images to page speeds, we’ve listed out some tools to help you optimize your overall website performance.
We’re pretty clear by now that optimizing your images has multifold benefits.
What if you could use a tool to help analyze your images?
A tool that could even suggest the format of the image to be used, the optimal file size, and the image’s quality, among other things.
Well, a Website Speed Test is what you need.
The Website Speed Test tool goes beyond simple image compression. It generates a report clearly providing detailed optimization insights on how changes to your image, such as the image size, quality, format, and other parameters, can improve the overall performance.
How fast is your website?
How well is it performing?
Are the heavy images on your site dragging the performance down?
Well, you get the drift!
Use TinyPNG’s Analyzer to run through all your website images and provide you with a detailed report on the image optimization statistics for your site.
SEO takes time. Be it on-page, off-page SEO, or in our case, the image SEO. And nailing those finer points will take time and get better with more understanding and experience.
That being said, considering the influx in organic traffic that SEO can bring in, it is worth the effort.
This article covered everything you need to know about image SEO. From selecting the proper image format to the optimal filenames, we’ve tried to include all that’s required for you to optimize the images on your website.
Of course, once you’ve mastered these tips, don’t get complacent. SEO is continuously changing and requires continuous optimization.