Image SEO: 4 best practices in WordPress

Home / Articles / Image SEO: 4 best practices in WordPress

You may not be aware, but image optimization is integral to your website’s traffic.

It is often an overlooked aspect of search engine optimization that can impact the success of your business.

Image SEO includes optimizing the images on your website for their relevance to specific keywords. That is, naming and setting alt text to match your content’s keyword.

Along with this, you also need to consider practices such as choosing the correct image format, resizing and compressing images. You can also add them to your sitemap.

Altogether, these steps ensure that search engines find these images and rank them higher on the Search Engine Results Page (SERP).

The benefits of Image SEO

Image SEO can help you rank higher in Google Image searches if implemented well. This will give you an advantage over competitors who don’t use Image SEO practices.

Suppose you own an e-commerce website. Then, it becomes easy for potential customers looking for your products or services online to find your images.

Optimizing images on your site and blog posts also improves the general SEO for your website. This contributes to your website’s overall rank in search engine results.

You cannot underestimate the power of images on your website. Adding pictures to your blog posts, for example, gives them a more dynamic feel. They also make the text more readable, encouraging website visitors.

The more engaging your images are, the better the chances of turning a potential customer into a loyal follower.

More interactive content on your website also reduces the bounce rate. This is another metric that Google uses to rank your site pages higher.

This article will guide you on implementing Image SEO best practices.

1. Use the right format and sizing

Suppose we have the image that we want to add to our content. First of all, we need to consider many things before uploading this image to our site.

These include choosing the correct image format and resizing images to the required dimensions. And finally, ensure that you compress the images.

Image format

Using the correct format is essential when it comes to image SEO. The most common formats are JPEG, PNG, and GIF, although others may be SVG or TIFF. All these depend on what you aim at optimizing for. Most sites will want to use one of the first three types.

When to use different image file formats

JPEG: JPEG is preferable for web images, especially photos, since this format can maintain small file sizes. Hence, you can be guaranteed a fast web page load speed.

You can use it for large images like banner ads and illustrations. 

PNG: This format is suitable for saving images that need a transparent background. This is also ideal for loading images with text, such as screenshots. You can also consider the PNG file format if a picture contains intricate detail such as web graphics. And if the image file size is no issue.

GIF: This is a good choice for animations and low-resolution video clips.

SVG: SVG is more powerful than other formats. This is because you can scale images to any size without losing any quality. In addition, it is compatible with CSS styling and is suitable for displaying logos and icons. The downside is that WordPress does not natively support this format.

WebP: This is an image format developed by Google that uses lossy and lossless compression formats. This makes it ideal for creating high-quality photos in small file sizes.

TIFF: This format is the best when you need to save images in high quality. This makes it perfect for print images. However, because the files are often big, they are not suitable as web images. This format is also not listed among those supported by Google.

Common image formats and when to use them
Image file formats and when to use each

Supported Image formats

Google Images supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG.

Image dimensions

Now that we have the correct file type/format, we need to resize our images to the correct dimensions for our site.

Image sizes are significant because they impact page load time. Slow page load time can lead to higher bounce rates, lower conversion rates, and a poor user experience.

Image SEO best practices suggest using the correct format. You should also ensure that your images are the right size before uploading them to your website.

Recall that images taken with digital cameras and phones come in dimensions beyond what the browser can load.

For instance, a blog’s featured image in WordPress takes on the dimensions of 1200 x 628 pixels. Therefore, uploading an image with more significant dimensions like 2240 by 1260 pixels means adding a picture of a bigger size than required.

This also means that we have uploaded an image with a larger size, later affecting our page speed.

Resizing images ensures that we use images with the correct dimensions. Hence, we should avoid uploading bigger images that will take longer to load via the browser.

WordPress image types and their dimensions

Blog post featured Image1200 x 628 pixels
Landscape featured Image1200 x 900 pixels
Portrait featured Image900 x 1200 pixels
WordPress header image1048 x 250 pixels
Background image1920 x 1080 pixels
Logo image200 x 100 pixels
Thumbnail image150 x 150 pixels
WordPress image placements with their respective dimension

Note

Please note that this list can change on your specific WordPress site depending on your theme and plugins.

Tips to consider when sizing an image.
Some tips on image sizing

You can get the aspect ratio from the image dimensions in the table above.

An aspect ratio describes the width of an image with its height. It appears in the form of W:H.

Ensure that an image fits the recommended aspect ratio as you upload it to your site. Images tend to fall under these common categories of aspect ratios.

Landscape images (2:1)

Landscape images have a width that is bigger than the height. For instance, a landscape image will have an aspect ratio of 2:1 which means that the width is twice as big as the height. These images are best for WordPress headers, Blog post images, and background images.

Portrait images (1:2)

Portrait images have a height that is bigger than the width. These images can have an aspect ratio such as 1:2, which means the height is two times the size of the width. This ratio is the ideal size for a featured image.

Square images (1:1)

Square images can have an aspect ratio of 1:1 which means the width and height are equal. Thumbnails are examples of square images used in WordPress.

Responsive images

Responsive images are images in WordPress that automatically adjust to fit the size of the screen. Therefore, the browser does not need to stretch the image to fit the page layout.

Images need to be displayed depending on the device’s screen size. Therefore, big screens (monitors) need photos with larger dimensions than mobile devices.

This implies that we need to have copies for each image but in the various dimensions to be rendered based on the screen size.

The good news is that WordPress automatically handles this for us. In addition, it has a background functionality that will create copies of these images.

WordPress automatically generates three copies of that image when you upload a photo. Below are the dimensions for these copies;

  1. Thumbnail size (150×150 pixels)
  2. Medium size(300×300 pixels)
  3. Large size(1024×1024 pixels)

Images on your website will appear in the dimensions above depending on the screen sizes of web visitors’ devices.

Note

You can also customize WordPress default image dimensions for responsiveness by adding your preferred dimensions. This can be through modifying the functions.php file.

Image compression

After setting the correct image dimensions, you should compress the images. Compressed images lead to fast webpage load speed. This is one aspect Google looks at as it ranks websites.

Images can be compressed without reducing their quality.
Image compression results

The good news is that there are some tools to do image compression for you. These include; 

WP Smush

With this plugin, you can optimize unlimited images for free. It compresses images, resizes, reformats images, and enables the lazy load option. 

Cloudflare. 

Cloudflare can help in building a scalable image. It delivers images quickly and securely on the Content Delivery Network (CDN). It also provides images depending on the different devices your visitors are using.

Plugins that can be used to compress images in WordPress
Some of the image compression plugins

EWWW Plugin

It compresses both new and existing images automatically. This plugin scales images and provides lazy loading and a pixel compression option. EWWW plugin allows you to use modern formats like WebP for tremendous speed gains.

WP Compress

It automatically optimizes your images to shrink file sizes. In addition, it offers three types of compressions as described below.

Lossless: The smallest file size decreases with no loss in image quality.

Intelligent: There is minimal image quality loss.

Ultra: This is a more aggressive compression type that may cause a noticeable drop in image quality.

2. Name images correctly

Naming your images for SEO is very crucial. A filename gives Google clues about the image’s subject matter. A poorly named picture will not provide enough context for what the image is about. Hence, low traffic to your site.

But with a proper file name, it is easier for search engines to find your images and display them as relevant results. This can help with image SEO, drive more traffic and provide a better user experience. 

Whenever you export an image from a device or download it from stock photos, it has a generic file name like dsc00001.jpg. This filename is usually set by the device or camera used. Unfortunately, this isn’t a proper file name as it provides no hint about the contents of the image.

A correct and relevant image name
Example of a correct image name

A name like ‘red-winter-boots.jpg’ is better than dsc00001.jpg. This is because the filename immediately tells you about the image’s subject matter.

Guideline on naming images

  • Separate the words in the filename with a hyphen (-) or dash and not underscores (_).
  • Keep all the letters in the file name in a lower case format.
  • Include relevant keywords. If someone searches for a smartphone on a search engine, they are likely to type the term “phone”. This will be in addition to the brand name of the phone model. A good image name example for this case could be ‘samsung-s21-phone.jpg’.
Some of the tips one should follow when naming images
Tips on Image File naming

Pro-Tip

Prioritize your most important keywords when renaming your images

Having descriptive image file names will help Google know about the contents of your image, hence ranking it higher in relevant Image Search Results.

Implementing the practise of using proper file names also makes it easy for you to find an image within the WordPress media directory.

Suppose you type a word like ‘sunrise’ in the WordPress media directory. In that case, all images with a file name that relates to the word ‘sunrise’ will appear, making it easy to locate your pictures in the future.

3. Add Alt text to images

One common mistake people make with image SEO is excluding alt text on images. However, adding alt text is an essential part of Search Engine Optimization.

Alt-text is also known as alternative text. It is a brief description of an image that tells search engines and visitors what it is about. Its primary purpose is to help blind or visually impaired people who use screen readers understand what an image is about.

Alt text also appears in the place of an image on a webpage in case the image fails to load.

Hence, defining this attribute for each image you post is quite important. In addition, your photos’ alt text and title tag should always include relevant keywords.

Why Alt text is important for image SEO

Firstly, alt text helps Google and other search engines determine the content of your image. Alt text SEO best practices dictate that you must include alternative text for every image on your website. It helps communicate the message you want to convey about a specific image.

Here is an example of an image’s HTML line of code with an Alt Text.

Example of Alt text set on an image
Alt text added to the image using the alt attribute

Alt text also improves image SEO for two other reasons. First, it helps you maximize your use of keywords. This lets internet users find your website when searching for image-specific terms or phrases.

For example, someone is searching for an image of a smartphone on Google. You will rank higher in image search if you include alt text on your smartphone images.

Additionally, suppose someone pins one of your images to a platform like Pinterest. In that case, the alt text will appear as the description. Make sure your alt text is engaging and descriptive but also concise.

You don’t want to overwhelm users with too much information, nor do you want to sacrifice keyword optimization. Aim for around 125 characters or less. Including keywords in your alt text is one part of optimizing your images for SEO.

Note

Be careful – Avoid keyword stuffing when setting the alt text, as search engines can flag this as spam.

You can also use captions to provide a more detailed explanation of what’s going on in the image.

How to set Alt text in WordPress

There are various ways of adding alt text in WordPress to boost image SEO. This depends on the page builders you use on your site or the purpose of the images you are uploading.

Let us look at how you can add alt text to your images.

Adding Alt text via Media library

  • In the WordPress Admin Dashboard, go to ‘Media’.
  • Click on the ‘Add New’ button.
How to upload an image to WordPress media directory
Image uploading process in WordPress
  • Upload the image to WordPress.
  • When the upload is complete, click on the uploaded image. This will then open a form that one can use to fill in image-related information. This includes the Alternative Text, Image Title, caption, among others.
  • Add alt text in the ‘Alternative Text’ text area shown below.
Input field for the alt text
Input field where you add the alt text

Note

This form is always displayed whenever an image is uploaded to the site, no matter what page builder you are using. Therefore, you can always set the alt text at that stage.

Via Gutenberg editor

At times, we add images to our websites when writing blog posts. The WordPress Gutenberg editor allows us to set the alt text of an illustration when that is in our article.

To add the alt text, follow these steps.

  • Upload an image to your content.
  • Select the image block and go to ‘Show more settings’.
Click on the ellipsis icon to access the "Show more image block settings" option
How to access image block’s settings.
  • Under the block settings, look out for the Alt text section to add the text.
Input field to add alt text via the image block in Gutenberg
Add your alt text in this input box.

How to set Alt text in Elementor

In Elementor, the process is quite simple, as we saw in the first scenario. When dealing with any widget of the page builder that interacts with an image, you have to set its Alt text. You do this when uploading the image to the site or replacing the existing image for the first time.

To do this, follow these simple steps.

  • Click on the ‘Choose Image’ button.
Click "Choose image" button to upload an image via the elementor image widget.
Image upload process via Elementor image widget
  • Upload or add an existing image in the media libray.
  • Select the image and add the alt text in the Alternate text field.

How to set Alt text in Divi

  • In Divi, add the image module to the page.
  • Then, click ‘Add image’ to upload an image.
  • Next, select whether to upload or access the pictures in the media library.
How to upload an image in Divi
Uploading image in Divi
  • Add the alt text in the image form that we saw in the first process.

How to set Alt text in WooCommerce

Adding alt text to product images on your WooCommerce site is crucial. As we discussed in the sections above, this enables the search engines to know what your image is about. Besides that, images with good SEO will lead to faster web page load times on your site.

When it comes to WooCommerce sites, products should have this attribute to achieve higher rankings in Google search.

To set the Alt text on Featured images in WordPress, follow these quick steps.

  • Go to products.
  • Click on the product whose image alt text you would like to add. 
  • Look for the set featured image section via the editor on the product form.
How to upload a product image in WooCommerce
Adding a product image in WooCommerce
  • Click on ‘Set product featured image’.
  • Add the alt text in the input field the image dialogue box that is displayed up after the upload.

4. Have an Image Sitemap to boost SEO

An XML sitemap is a file that provides information about the relevant pages, posts, videos, and other files on your site. An image sitemap includes information exclusive to image files on your website.

An image sitemap is a great way to ensure that Google can find all of the images on your website. This includes images that your site reaches by Javascript.

It also enables you to inform search engines on images you wish to be indexed and those to be left out.

Suppose you are using an SEO plugin such as Yoast. In that case, these create XML site maps for your posts and pages, which automatically include your images in the sitemap.

It is also encouraged to create a dedicated sitemap for your images to cater for cases where you need to have images hosted on CDN indexed by search engines. This is a feature that SEO plugin generated sitemaps does not cater for.

In this section, we shall take you through the process of generating a sitemap with the Yoast SEO plugin we use here at MRK WP.

Yoast Image Sitemaps

Yoast’s SEO WordPress plugin makes it easy to create and submit an image sitemap to Google. As mentioned earlier, this plugin automatically adds all the images in your posts and pages sitemap. So you don’t have to worry about adding them yourself.

Use Yoast plugin to setup image sitemaps
Yoast plugin can help you create image sitemaps.

Setting up image sitemaps with Yoast SEO is a breeze. Here are simple steps you can follow to set up image sitemaps.

  • Go to your dashboard. 
  • Click on the “SEO” tab. 
  • Then, select the “XML Sitemaps” sub-tab. From there, you can activate XML sitemaps for Images by checking the corresponding box.

Yoast plugin provides more options to extend the functionality of the XML site map feature. Visit the help page on XML Sitemaps to find out more.

Apart from Yoast’s SEO plugin, you can use several other plugins to create image sitemaps. These are:

Final Thoughts

Remember to choose relevant images for your posts with all these practices. Above all, make an effort to choose high quality and useful images that complement your content. This helps readers better understand the subject and will lead to better engagement and conversions.

In conclusion, image search optimization ensures that web users find your images online. It is a great way to make sure your website gets found by Google Image Search and other image crawling bots.

Implementing these tips will boost ranking on Google Image Search results pages and drive even more traffic back to your site. Use these best practices today to increase image SEO for better results and stand out from the competition.

Get access to the infographic on the four image SEO practices in WordPress here.

FAQs about image SEO

What is Image SEO?

Image search engine optimization (SEO) refers to optimizing images so that search engines can find and understand these images. Hence, boosting your rankings in image search results. The process of image SEO involves practices like using correct file names, the right dimensions, the proper format, and setting alt text.

Which websites require image SEO?

Any website that uses images to improve user experience and boost sales. Websites like eCommerce sites, blogs, and any visual content need image SEO. Search engine optimization for images ensures that these sites appear in the top results of Google Images and other search engines like Bing and Yahoo!

Does Google read Alt text in image SEO?

Yes, Google will read the Alt text in images. SEO images will contribute to how Google lists your website in search results.

Is image Title Important for SEO?

Having an image title doesn’t have many benefits for image SEO. Just focus on adding alt text for all your images.

What are the best WordPress plugins for Image SEO?

Many plugins can help with optimizing images. Some WordPress plugins you can rely on include Real Media Library, ImageSEO, Open Graph WordPress plugin and Imagify.

Share via social