HOW TO DO IMAGE SEO OPTIMIZATION

Many web owners focus on writing optimized content but are not concerned about the images and videos they put out there.

Image SEO Optimization is an essential part of your SEO content writing process. Skipping this part when writing and uploading your blog posts will make your blog posts incomplete and your content strategy a flop.

If you need a reason to start optimizing your images, then take your pick:

Image SEO optimization contributes to your on-page SEO score.
20-22% of searches are made via Google Images Search! Imagine ranking high for image searches.
Image Search results now appear on regular SERPs, giving you a double opportunity to rank.

Many internet users’ attention spans are reducing daily, and Google knows this too. Hence, its search result pages focus on giving the most accurate and engaging result, which includes images and videos.

You’ve probably been told that alt texts are essential to image SEO optimization, but what happens when Google can identify your images without them?

Don’t get me wrong; alt texts are still essential for image optimization. However, there are many other image SEO practices besides this.

I have eighteen (18) carefully explained ways—that’s not alt-text—to optimize your images for search engines.

TABLE OF CONTENT show

What Is Image SEO Optimization?

Image SEO is the process of optimizing your images for search engines.

When your images are optimized, you increase the chances of ranking in Google Images Search results like this.

With image SEO optimization, you can describe your images to search engines so they can correctly display your content to users in the proper context, rank for image searches and increase traffic to your site.

Why Image Optimization Is Important

There are several reasons why image optimization is an essential part of SEO, including:

a. Search results are evolving.

How Google presents search results nowadays has changed from how we knew it one or two years ago.

Now, Google often displays visual content with organic results and sometimes prioritizes web pages with images and videos more than those without.

b. The search pattern is changing.

22.6% of searchers are using Google Images Search to explore the internet. It means that for every 100 people searching the internet, 22 use Google Images Search.

Google Images Search is this part of the Google Search:

It means that when your images are optimized, you are allowing your content to rank among this 22.6% of Google Images searchers.

c. Images are a part of on-page SEO.

On-page SEO best practices include image SEO because images can increase the user experience on your page.

Images help reduce the intensity and density of text-based posts and help the reader understand your content better.

Depending on your images’ engagement, they can keep readers on your page longer.

Original images in your posts can also increase external links to your site, especially when they are of high quality and value.

READ MORE: LATEST ON-PAGE SEO PRACTICAL GUIDE FOR BEGINNERS (Coming soon)

d. It increases rank chances.

When you optimize your images, you get more chances to rank for your posts.

Search results are changing, but optimizing your images can increase page speed and website accessibility.

With Google’s Cloud API, the image content description accuracy is astounding.

When you upload a picture on Google Cloud Vision API, it can describe the content of your image with almost a hundred percent accuracy.

This is without any previous image optimization process. So, do we need to go through the process of image SEO?

YES! Because the API can get confused between similar pictures—for example, cheese and butter, almond milk, and regular milk.

Google Cloud Vision API might get the content but miss its specificity and context altogether; in other words, they’re not PERFECT.

Hence, you need to learn how to do image SEO optimization for your content to help Google understand your images better!

Here are the ways to do image SEO optimization:

1. Rename your image files.

You should rename your image files after downloading or creating them to fit the context of your content.

Google has also stated that a descriptive file name can help search engines to better understand your content by highlighting the subject matter.

For example, if you own a pet shop and have several pictures of cats, it will be inappropriate to name the images ‘Cat 1,’ ‘Cat 2,’ ‘Cat 3,’ and so on. Instead, you want to make sure the file names are descriptive and unique from each other.

So, rather than having ‘IMG_20230305_145147_740.JPG’ as a file name, you have ‘white-Persian-cat,’ ‘orange-Abyssinian-cat,’ etc.

To write a proper file name, it must:

Be descriptive: The file name should accurately describe the image content or the blog post topic.
Be straightforward: Avoid beating around the bush and adding unnecessary detail to the file name.
Be short: Your file name should be at most 30-40 characters; anything aside from this is excessive.
Have relevant keywords: Your file name should have at least one keyword; it can be the primary keyword for the post or the other keywords.
Use hyphens to separate words: Google recommends using hyphens instead of underscores.

Always check for the file names of all your images before uploading them on the internet. Also, ensure the file names are translated if your website is in other languages.

2. Use optimized alt texts.

This rule is probably one of the first golden image optimization rules!

What are alt texts?

Search Engine Journal describes alt texts as “text alternative to images when a browser can’t properly render them.”

Like the file names, alt texts are texts used to describe the content of your images but usually in a more descriptive and specific way.

Alt texts show on the top left corner of a broken image so that the reader can still know what the image is all about from the alt text.

When you use alt texts, it is not only visible to a reader, but it is also visible in the cached version of your page. Optimizing your alt texts will increase your chances of ranking in the top result page for Google Images searches because Google gets enough information about the image from your alt text, including the important keyword.

People with sight disabilities also need alt texts to hear instead of see the images, and because these texts are visible in the cached version of a page, users and search engines can access them.

Also, when you have to link to an external site, you can use the alt texts as the anchor text for the image.

How to write optimized alt texts with examples

Precise and straightforward
Descriptive not spammy
Keyword rich

Here are examples of alt texts:

Bad Alt text:
- <img src=“cat-1.jpg” alt=“Cat”/>
- <img src=“IMG_20230305_740.jpg” alt=“White cat”/>
- <img src=“white-persian-cat.jpg” alt=“White persian cat”/>

Good Alt text:
- <img src=“white-persian-cat.jpg” alt=“White persian cat with a blue yarn”/>

Better Alt text:
- <img src=“white-persian-cat.jpg” alt=“White persian cat, holding a blue yarn with its front paws”/>

Perfect Alt text:
- <img src=“cat-1.jpg” alt=“White persian cat holding a blue yarn with its paws and sitting on a green, round persian rug”/>

If you have difficulty writing good alt texts, you can use the Image SEO Plugin by WordPress to develop the perfect alt text for your images.

This plugin uses artificial intelligence to create alt texts for bulk images automatically.

3. Include image captions.

Image captions are important image SEO optimization factors; they are small texts that appear below an image and describe what the image is all about.

Google uses your page content, including captions and titles, to determine the image’s subject matter.

Hence, ensure your images are placed near relevant sentences or words in your post.

Also, captions are great for providing additional background stories to your images, allowing a reader to see the image’s importance while skimming through your page.

4. Use the best file format.

Before uploading any image on your website, you must ensure it appears in the correct format. The most common format for a web page is usually PNG or JPEG.

Here are examples of standard image formats:

JPEG: These are the most popular and acceptable image formats. They have adjustable quality, can be compressed to small sizes, and are best for photographs.
PNG: These are high-quality images but are usually large. They are helpful when using a transparent background or for line drawings and texts.
WebP: This is the only image format that supports images and animated images without compromising on animated frames and color depth. They are helpful if you need higher compressions than PNG and JPEGs but are not supported by older browsers.
GIFs: These are the best formats for animating images.
SVG: These file formats are mainly used for icons and logos but are unsuitable for photos.

5. Know your website’s width.

If your site’s maximum display dimension or width is 720 pixels (px), no matter the image’s pixel, your website won’t display images wider than 720px for any device.

The image will be resized to fit your site’s width if you have a responsive website. However, the downside is that the browser must load the entire image in its full size before adjusting and displaying it in the required size.

This process increases the time it takes for the page to load, affecting user experience and increasing the bounce rate.

It means you need to know the maximum width of your website so you can resize images within that range.

6. Define your image dimensions.

What are the width and height of your images?

You need to define the dimensions of your images because not only does it aid user experience, but also enables the browser to size the images before they are loaded on the CSS.

When browsers size your images before loading them, they know beforehand the amount of resource space needed to load the entire page, preventing page jumping or content shifting, which affects your CLS scores.

You need to indicate the height and width of your images and videos to prevent Cumulative Layout Shift (CLS) issues affecting your Core Web Vitals.

7. Compress your images.

Another unspoken rule of image optimization is to ensure all your images are compressed. According to a page weight report by HTTP archive, images take up to 21% of an entire web page’s weight on average.

Uploading big-size images to preserve the quality can lead to low page speed, affecting your page’s bounce rates.

You can use Google’s PageSpeed Insights tool to check how your images affect your site speed.

There are two types of compression:

Lossless: Reduced image size without losing quality
Lossy: Reduced image size and reduced quality

You can use different apps and software to compress your images before posting them.

Here are some tools or plugins you can use to compress images:

Whatever software you use to compress your images, make sure to compress externally before putting the images on your site instead of having to compress the images while the page is loading to reduce the load on your site.

You can also use an image CDN to detect the user’s device and optimize the images before they are shown.

8. Disable attachment pages.

Attachment pages or media pages are automatically generated by WordPress, which stores only the uploaded media attachments.

They are thin content pages that are unfortunately accessible under their URL because WordPress stores them in your database as posts. As you might already know, thin content pages harm your SEO.

Also, attachment pages can take attention away from your main post. For example, when you upload a blog post with five images, WordPress automatically generates six URLs—five URLs for the images and one URL for the original post.

What happens if Google directs traffic to one of the attachment pages instead of the original post?

To avoid Google doing this, redirect attachment pages or disable them altogether because of the danger to your SEO.

9. Create original images.

As much as there are millions of stock images to choose from, it doesn’t beat the originality of creating your images from scratch.

Optimizing stock images will work, and you might rank high for it. Still, if you want uniqueness, create original, high-quality images.

Most stock images have a generic look, and to stand out from the thousands of websites in your niche with the same stock images, you need to up your game.

Some bloggers outsource graphic designers to help them design images, charts, and infographics. While this is very effective, you might be unable to afford a graphic designer.

There are design apps you can use to create stunning designs. You can create designs from scratch or use the available templates.

Here are some ways you can create original images for your website:

a. Canva:

You can use Canva to design anything; it has ready-to-use templates, and you only need to insert relevant information. You can get templates for infographics, graphs, invoices, blog graphics, blog banners, etc.

b. Pixellab:

PIXELLAB is a design app that is available for mobile and desktop devices. It started as an image editing tool but has been used for more original and breathtaking designs.

If you want to use PIXELLAB to create original images, you need to be good at designing from scratch without any form of template.

c. Screenshots:

You can take screenshots on your mobile or desktop to add to your post. When using Mac or Windows, specific applications allow you to export screenshots in multiple formats. These are:

Skitch – Exclusive to Mac
Monosnap – Mac + Windows
Lightshot – Mac + Windows

Here is a shortcut to take screenshots on your desktop devices:

Windows + shift + S

After taking the screenshots, you can export them to other software or access them on your clipboard.

Original images are also great for backlinks, especially when they are pictorial summations of niche-relevant topics—for example, a chart that explains industry statistics, a comparison table of two different hot-topic terms in your niche, or a graphical representation of your bullet points.

These are linkable designs, and you can get other sites to link back to you whenever they use your graphic on their site.

10. Enable browser caching.

Browser caching allows page elements to be reloaded faster than the initial visit by storing the visitor’s information on the browser. It increases the page load speed and gives users a more satisfying experience on your page.

a. What is browser caching?

Browser caching enables a browser to store page elements like JavaScript, CSS files, images, and HTML so page assets can load faster for return visits.

For example, if a visitor comes to your page for the first time, all the assets on your page get downloaded, including images and other media files.

With browser caching, the browser can store these files locally and identifies the visitor when they access your page the second time.

This process allows the pages and all their assets to load faster.

b. How browser caching works

Page elements are downloaded from the server at the initial visit and then displayed to the user. Separate requests are made to the server to access individual files. The more files available on the page, the longer it takes to load.

Without caching, this process is repeated in subsequent visits.

However, when you enable browser caching, instead of the browser having to download page elements from the server, these elements are already stored for the user on the browser. They are displayed faster and reduce the data the visitor uses.

Browser caching marks certain parts of your page that are unlikely to change or change at specific intervals. It then tells the server to store these elements and download them afresh at particular times.

For example, you can tell a browser to cache your logo for a week. So, no matter how often the visitor returns to that page within a week, there is no need for the logo to be downloaded from the server. However, after a week, the elements will need to be downloaded from the server.

c. How to enable browser caching

You can use plugins like the W3 Total Cache to enable browser caching on your WordPress or manually add the code to your .htaccess file.

11. Use responsive images.

Responsive images are essential to device optimization, particularly mobile devices.

Mobile optimization is a crucial ranking factor for Google Search, and not only should your website design be mobile-friendly, but your blog post images should also be.

It might be challenging to select the type of images you can optimize for all devices; the key to this is using responsive images.

a. What are responsive images?

These images work well on devices with different screen sizes, resolutions, and other distinct features. They automatically adjust to the size of the device.

b. How responsive images work

You can make responsive designs or images through resolution switching and art direction.

(i) Resolution switching

There are two major ways to switch resolutions:

Same size, different resolution

It means you want to display the same image size but at different resolutions. To do this, you only need the srcset attribute. The browser will determine the device’s resolution display and loads the most appropriate srcset option.

Different sizes

Here, you want to display the same image but with different sizes. To do this, you need two attributes—srcset and sizes—to provide the browser with additional source images and allow it to pick the one that best fits the device.

WordPress 4.4 and above adds srcset automatically. It adds these image versions automatically:

Thumbnails
Medium
Medium Large
Large
Full

(ii) Art direction

This issue occurs when you need to show cropped images for narrow screens without compromising quality. For example, a landscape image for a desktop layout with the main subject in the middle will need to be zoomed in for the subject to be visible on a mobile layout.

This can be solved using the <picture> element. It allows your browser to display the most suitable image for the screen.

Mozilla has a detailed guide to creating responsive images.

12. Use WebP images.

This is a modern image format that is useful for responsive designs. They can maintain a low file size and high-quality image simultaneously.

WebP can comfortably replace PNGs, JPEGs, and GIF images, offering both lossy and lossless compression.

Read more about WebP images and how to convert your images to WebP.

13. Use image CDNs.

Content Delivery Network (CDN) is essential for your content, including media, to load faster.

a. What are image CDNs?

CDNs are a group of servers located at specific locations worldwide, allowing for easier data distribution from one location to another—for example, using a content delivery network with servers in different places.

When a USA user wants to view the content of your webpage, the data is transmitted from the CDN server closest to him.

This is faster than multiple users trying to get data from a single server located in Australia or Asia.

CDN servers get information from the origin server.

b. Types of image CDNs

Image CDNs help automate the entire image SEO optimization process, which is great for big websites because manually optimizing all your images might become more complex the larger your website.

Google recommends these two CDNs.

c. How to set up your CDN

If your website is hosted on WordPress, you can easily set up a CDN using plugins like W3 Total Cache, WP Rocket, or CDN Enabler to enable your registered CDN.

If you are setting up a CDN from other sources, you should follow the integration guide the provider will give.

14. Enable lazy loading.

To increase site speed, enable lazy loading regardless of the number of images on your page. This allows the user to load your web page at record speed and save data by not loading the images until they are viewed.

a. What is lazy loading?

Lazy loading is an optimization technique that postpones the loading of ‘non-critical’ media until they are needed or brought to a viewpoint.

You can improve your site’s user experience by increasing site speed with lazy loading. When you enable lazy loading for your web pages, the text content of the web page loads first while the browser waits to load images until they are needed.

Lazy loading is not just relevant for media in your posts; it can also be used when loading JavaScript.

So, instead of waiting for all the images to be loaded before displaying the web page, the browser loads the page quicker and won’t load the images until the searcher has scrolled down to that point. This means that images load as the user moves through your content.

If a user does not reach the end of your posts, the images at the end won’t load.

If you use WordPress version 5.4 and above, it lazy loads your images by default, so you don’t have to install a lazy load plugin.

However, if you need to install a lazy load plugin for your images, the a3 Lazy Load plugin and WP Rocket are plugins you can use for lazy loading on your website.

There are other different ways to implement lazy loading. However, you should consider your supported browser before deciding how to implement lazy loading on your website.

15. Add schema markups.

Schema markup, called structured data, helps Google understand your pages’ content more clearly. They are also essential to rank for featured snippets.

If you have been updated on the changes in Google Search results, you will understand that images are not just part of search result pages but also being shown as rich results or featured snippets.

For example, here is a search result page for ‘chicken noodle soup.’

This result page indicates that the first result shows sites that used the recipe schema. Google included additional data like the title, website, ratings, ingredients, and the time for searchers.

In the Google Images Search result page, these websites are also ranking high.

Google Images supports the following types of schema:

Products
Recipes
Videos

Using structured data can enhance your image search ranking when you upload a blog post on your website. For example, if you are uploading a product review post, you should show that the image on your post is that of a product by using a product schema.

16. Add Open Graphs and Twitter Cards

This image SEO optimization tip is to control the way your social media preview appears. It means that when you want to share your blog post on social media, you get to control the image that appears, the title, and other elements.

Open Graphs are used mainly for Facebook and Pinterest, while Twitter Cards are used for Twitter.

Here are the codes to use for Open Graphs and Twitter Cards:

Open Graph image tag:

Twitter Card image tag:

17. Have an excellent on-page SEO structure.

Google’s support page has indicated that having good on-page SEO practices might help your images rank higher and have a high CTR.

Google Images automatically generates the title and snippet underneath an image result to best explain the image and how it relates to the searcher’s query.

This will help a searcher determine whether they want to see the image.

According to Google, they use several sources to automatically generate this information, including your title and meta description, which are part of your on-page SEO.

It is safe to assume that all the on-page SEO factors, like your structured data, user experience, header tags, and others, will directly or indirectly affect how Google ranks your images.

18. Include images in your sitemap.

Google has clearly stated in its image optimization guideline that the file path and file names are important ranking factors for image searches.

This means you can only put some of your media files in a single folder on your website; you need to categorize them and show search engines.

You can do this by adding images to your sitemap or creating a new one for your images.

It is essential because it makes it easier for search engines to crawl and index your images leading to increased image traffic.

Image sitemaps are similar to regular XML sitemaps, except they only contain image URLs.

According to Google, the image sitemaps are still sitemaps, so the best practices for general sitemaps also apply to images.

WordPress, RankMath, and Yoast automatically add image sitemaps via their plugins, although you can manually create them.

When creating an image sitemap, it is crucial to show the correct file path, including the blog post that it is related to.

Check out Google’s image sitemap example.

To make sure that Google can use your sitemaps, you must include these elements:

<image:image>

This shows all the information about a single image.

Each <url> tag can contain up to 1,000 <image:image> tags.

<image:loc>

This is the URL of the images. Google allows the hosting of images on third-party sites, but you must ensure that these sites are verified in Search Console.

Google depreciated some tags previously used to provide additional information for search engines, including:

Caption
Geolocation
Title
License

These sitemaps extension tags were previously used as optional tags.

What Are The Best Practices for Image SEO Optimization?

According to Google’s official guidelines, here are the best practices for Google Images:

Provide good context by adding images to relevant parts of your content.
Place images near relevant texts.
Do not embed your images with texts, especially if they are essential.
Create high-value content with good on-page SEO.
Make sure your website is mobile-friendly.
Create an optimized URL for your images.
Have a good URL structure with clear file paths.
Add structured data to your posts.
Optimize your web pages for speed.
Use good-quality images.
Use descriptive alt texts.
Opt out of Google Images inline linking.
Make sure your alt texts are accessible.
Use semantic HTML markups for easier crawling.
Include an image sitemap.
Use image formats that are supported.
Use responsive images on your web pages.
Optimize your website for SafeSearch when needed.
Keep updated on new updates by Google.

Bonus: Tools to Check Your Site Speed after Image Optimization

When you are done optimizing your images for SEO, you can check how your pages are performing using these tools:

FAQs ON Image SEO Optimization

These are commonly asked questions regarding image SEO optimization:

What does image optimization mean?

Image optimization is the process of making your images easy for Google so that users can see and understand them. It also allows your images to rank on Google for image searches.

Does an image name affect SEO?

Yes. Google uses details like the file name, the title of your post, metadata, and caption to understand the context of your images and determine which page to rank for a searcher’s query.

How do you optimize images for SEO?

Here are 20 steps to optimize your images for SEO:

Rename your image files.
Use optimized alt texts.
Include image captions.
Use appropriate file formats.
Know your website’s width.
Compress your images.
Disable attachment pages.
Create original images.
Enable browser caching.
Use responsive images.
Use image CDNs.
Enable lazy loading.
Add schema to your images.
Define your image dimensions.
Practice good on-page SEO.
Add Open Graphs and Twitter Cards.
Add image sitemaps.
Use WebP images.
Enable SafeSearch.
Be careful with image placement.

Why image SEO is important

Image SEO is essential because it improves page speed, increases user experience, can make you rank for image searches, and increases your on-page SEO score.