Image SEO: 7 best practices for WordPress

Search engines bring most traffic to our web sites. Images also have a big role in getting traffic from search engines. This makes images SEO for WordPress very important.

This guide will show important practices using simple steps to optimize your images for better SEO. For complete WordPress SEO read related guide.

You will learn:

• Best image format and size for websites.
• Importance of naming images for SEO.
• Using attributes to describe images.
• Advanced image SEO with sitemap, structured data and redirects.

For some time I was thinking that images are slowing down my website. I didn’t use images much and mostly relied on text. Then I noticed that articles without images get less traffic from google and from internal links. Text is not attractive and may seem boring. Content with rich media like images, video and audio is more attractive. Also images make it easy and fast to understand.

I started using more images in content for describing steps in tutorials, comparisons, explaining main points, showing information from various software, web sites, mobile apps etc. While using more images I optimized them for loading faster and used images to describe my content better technically.

I will share my findings and simple optimizations that can be applied to any website built on WordPress. If you are using other CMS or custom website software then try to apply as much as possible from this guide to your website. Things like file naming, compression, dimensions can be applied to websites almost on any software platform.

Benefits of Image SEO

Google shows different formats on the first page for some search queries. Images are one of them along with products, videos, questions, recipes, how-to articles etc. Optimizing images for SEO will increase your chance to be shown on the first page and get more traffic from google.

Correctly formatted images will show in search results accompanying your web pages. They will be like previews of your content and attract more visitors. While using images can boost your website traffic it is important to format images correctly to reduce file size and keep your website fast.

1. Image file format and file size

There are many image formats used by different software. On websites we need to use file formats supported by web browsers. Generally they are used from the early days of the internet. File formats like .jpg, .png and .gif are very old and will load in all web browsers designed for all devices.

Modern file formats like .svg and .webp are becoming popular due to the rise of mobile devices to reduce file size even further.

File formats from custom image design software like photoshop ( file format .psd) or microsoft paint (file format .bmp) are not supported by web browsers and cannot be used without conversion to supported formats.

Common image file formats for websites

With so many different file formats there is an optimal use case for each of them.

.jpg – also known as .jpeg, is used to compress photos and images with not limited colors. Big images like banners, real world photos can be used in this format. Jpg images can be compressed and will help to load your web page faster. Images produced by cameras on mobile phones are usually saved as jpg. They also need to be resized and compressed before being used on web pages.

.png – Portable Network Graphics (PNG) is designed to be used on the internet. It uses a limited number of colors (maximum 256 to represent each pixel) and can be used for transparent images as well. PNG is best for logos, screenshots, icons, images with text and drawings made on computer. You can compress images by reducing the number of colors from 256 to 2. I prefer using png image format for screenshots for tutorials and cover images with text.

.gif –  Graphics Interchange Format (GIF) can be used for static images or animated images. Static gif images, are similar to png image format, use a limited number of colors per pixel and can be transparent. Animated gif images can be used for simple animations with less moving parts. For complex animations where almost all pixels change it is better to use a much more compact mp4 video format instead of gif. Gif on web sites is used for simple banner animations, logos, screenshots etc.

.svg – Scalable Vector Graphics (SVG) is used for vector images like logos, maps, icons. It can be scaled to any size without losing quality. SVG can be used as a separate file or directly embedded into HTML and CSS files. Embedded svg files increase page load speed. It is released in 2001 and unfortunately not all CMS supports it. WordPress currently is not supporting SVG images.

.webp – image format developed by google to further reduce image size. Webp is designed to replace existing file formats jpg, gif, and png. It supports animations and transparency as well. Webp can produce smaller file sizes keeping the same quality when compared to existing file formats. It is not yet supported by old web browsers and for most CMS (content management systems). WordPress added support for webp images starting from version 5.8. Your hosting company should support webp in order to use it in WordPress. As of 2022 webp is supported by 91% browsers used by internet users. Most CDN servers have the option to serve images in webp format as it will further reduce overall web page size making and load pages faster.

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

Image compression

SEO optimized image file size should be small. Ideal image size should be less than 50kb when possible.

For articles with 2000 words you probably will have 10 important article sections. When in each section you use an image to better describe your point. You will have around 10 images. When each image file size is around 50kb you get a page with 500kb images. Going bigger than this size will slow down load time for your page, especially on mobile networks.

Reducing image size and making images clearly visible on mobile devices will help to optimize your website for mobile devices.

Page load time and user experience is a ranking factor for google so keep your image file size small by compressing them.  (via google algorithm ). Read WordPress speed optimization guide.

Use jpg file format for photos and png file format for graphics.

It is always better to compress images before uploading them to the server. Uncompressed image size from your phone can be as much as 5Mb.

Disadvantage of uploading big images to server:

• Uploading such a big image to your server will use limited server space.
• Uploading big files takes too much time and can timeout your server without finishing the upload process.
• Big images will use too much server resources and can crash when resized on your server.

How to compress images?

You can compress and resize images using Photoshop (“File” → “Save for web” there you will see final size before saving image) or with freeware software for Windows FastStone image viewer.

If you want to optimize file size (compress) for existing images on your WordPress website then use following plugins:

• Smush – Compress images & optimize images using external service.
• EWWW Image Optimizer – compress images using your own server.

Important: Do not use custom lazy loading JavaScript provided by any plugin. Because WordPress has a native lazy loading feature which is much faster and better for overall site speed.

After compressing your existing images using plugins I prefer deleting them and always upload compressed images from my computer.

2. Image dimension

Most images in WordPress are shown to fit screen size. On desktop it is around 1200 pixel width on mobile 300px. Most modern themes will fit image to screen width even if their dimension is bigger than screen, For this reason if you are not selling high resolution images there is no need to use images wider than 1200 pixels.

I prefer much smaller images and use widths around 800 pixels. Articles width no wider than 800px are easier to read. For that reason images on my blog are preferable that size.

Image aspect ratio

There are 3 types of image aspect ratio. Aspect ratio is calculated by dividing width of image to height. For example, a 1200 x 800 pixel image has an aspect ratio of 3:2.

Landscape images (16:9)

Landscape images have widths bigger than their height. Wide images generally used as background images, blog post images, header images, brand logos. They look good on desktop computer screens.

Attention: When using landscape images make sure that all information in the image is easily visible on mobile devices with limited screen width without zooming in. If you have written content in an image make sure it is readable on mobile devices. Do not make images with unnecessary white space on sides for the sake of looking good on desktop screens.

Portrait images (9:16)

Portrait images have height bigger than their width. They are tall images used as infographics, vertical banners. They are better viewed on mobile device screens. Good for mobile and desktop devices.

Square images (1:1)

This is the best image format where width equals height of image. They are great for horizontal screens for desktops and vertical screens for mobile phones. You can call it the universal image aspect ratio. In WordPress generally thumbnails are square images. You can also make post images (images inside articles) with text to be square to better fit mobile and desktop devices.

WordPress Image dimensions

WordPress uses several image dimensions and resizes when a new image is uploaded. Image sizes located in “Settings” → “Media” page. There are dimensions for thumbnail, medium and large image sizes.

I set all of those values to 0 (zero). Because I upload already optimized images with minimum file size. I prefer having a single optimal size for images that can be used inside posts and as post thumbnails without using server resources for resizing images.

Using a single image size is better because all images are stored in the browser cache for a year once it is loaded. No further request made for different sizes of the same image.

Depending on your WordPress theme and plugins you may have different image dimensions. I use the Neve theme for all my WordPress websites.

3. Image file name

Image name has real SEO value in terms of file name. It should be a meaningful name that can describe an image. Instead of IMG_20220531.jpg use the descriptive name steam-cooking-pot.jpg. If you have several images of the same product then it is okay to use an enumerator. For example steam-cooking-pot-2.jpg.

Image naming guideline

• Use lowercase alphanumeric characters.
• Use hyphen “-” to separate words. Do not use underscore “_”, space “ ”  or any other separator.
• Describe an image with simple words including keywords. For example steel-steam-cooker.jpg.

Using descriptive image names will help google to understand image contents and its purpose. This knowledge can be used when showing search results.

Also file names will help you find images inside WordPress media library. You can search images by name inside WordPress when you want to add an existing image from the library to your post. Type in “cooker” and all images having word cooker in name will be shown.

4. Image alt text

Image alt text is an important SEO attribute for describing an image. It is used by screen readers for visually impaired users. At the same time image alt text used by search engines understand the contents of the image and its purpose.

When web page loading is not complete due to network issues image alt text will be visible to the user for describing the image.

Keywords should be used in image alt text and in page title. All images should have alt text for better SEO.

Importance of image alt text for SEO

When a page has multiple images without an alt text search engine cannot understand the contents of the image. What each image is used to describe on the page. To make it clear for search engines include image alt text with clear description. Image alt text length should not exceed 125 characters.

Defining image alt text gives extra opportunity to use keywords. They are not as powerful as keywords used as text but they allow images to appear for those keyword searches.

Image alt text is also used by some social networks like Pinterest. It will be used as a description when an image is pinned to the pinterest boards.

Alt text can be used to boost SEO when used with the right keywords. Avoid stuffing images with multiple irrelevant keywords. Your web page may seem like spam for search engines.

How to set image alt text in WordPress?

WordPress has many built in SEO features. Ability to add alt text to images is also built into core functionality of WordPress. However alt text should be set individually for each image. There is no automated system that can check image content and write alt text describing the purpose of the image.

For setting alt text manually we will use options built into WordPress content editor. There are several ways to set alt attributes for images used in WordPress. Let’s look at each of them.

Add alt text via WordPress media library

1. When adding an image to a post using any editor WordPress Media Library will open.
2. Click on the uploaded image and select.
3. The Attachment details panel will show a form for adding “Alt Text” to the image. Type alt text for image and select image for insertion to the post.

Add alt text via WordPress Gutenberg editor

1. Select image and click three dots in the toolbar. Click on the “Show more settings” menu option.
2. Sidebar panel on the right side will open. Type alternative text to “Alt text” field in.
3. Publish post after all changes on page completed.

Add alt text to WooCommerce products

1. Go to products from the WordPress dashboard.
2. Edit the product that you want to add alt text.
3. Find block for adding featured image. And click to add an image.
4. Media library will open. Write alt text there and insert an image.

5. Create image sitemap

XML sitemap is used to inform search engines about important content on your website. General sitemap does not include images. With custom SEO plugins like Rankmath you can add images to post and page XML sitemaps.

This is usable when your blog loads images with JavaScript for example for lazy loading.

How to add images to sitemap XML?

Add images to sitemap using SEO plugins. Here is how to do it with the Rank Math SEO plugin.

1. Navigate to “Rank Math” → “Sitemap Settings” → “General” page.
2. Enable switch “Images in Sitemaps”. This will add image file URLs with alt text to posts and pages sitemaps.
3. Click the “Save Changes” button.

After enabling images in sitemap for SEO navigate to https://yoursite.com/post-sitemap.xml in your web browser. You will see the number of used images for each post.

After generating XML sitemap remember to submit it to Google Search Console if you have not done it already.

6. Image structured data

Schema markup, also known as structured data, formats page contents with special code for making it easy to understand by computers. This data is used by search engines to get important information from page content like title, description, image, URLs, author, date, language, media format, etc.

Check screenshot of search engine results with image schema markup (structured data). Images added to schema markup can appear next to page title and description.

On the blog page you can see images from current posts along with different images from other posts as well in the sidebar or in related posts widget. Image information is used in structured data to show which image is related to the current article. This way google can show the correct image for each article easily.

How to add image markup to article structured data?

You can add image markup to article structured data automatically with Rank Math SEO plugin.

Use following steps to define default markup for all posts and pages on your blog.

1. Navigate to “Rank Math” → “Titles & meta” → “Posts” page.
2. Select suitable schema type for your blog posts. Usually it is an “Article” schema type.
3. Save changes.

Repeat similar steps for “Pages” as well.

How to test image markup in structured data?

Google has a tool for testing structured data.

1. Visit Rich Results Test Tool by Google
2. Paste URL of your blog article.
3. Click the “Test URL” button.
4. After the test completes click on the article rich result and see related structured data.
5. There you will find image information used in your article.

Here is an example of an image from the post formatted in article structured data. This information can be used by search engines when showing your page in search results.

7. Redirect images to parent article for SEO

Images are best when used inside articles. They provide value and help to explain the topic visually. It is preferred when images are used inside articles.

WordPress also creates a page for every image in the media library also known as attachment pages. It is a simple page with one image and title. Attachment pages do not have any value for users and search engines. For this reason it is better to remove those almost empty image pages.

Why is removing attachment pages better for SEO?

• Attachment pages do not have much content. They have a title and an image. Page with no content has no value for SEO.
• Blog with 500 articles with 10 images in each article can reach 5000 images. Having a separate page for 5k images is a waste of crawl budget for search engines.
• Websites with 500 good quality content and 5k content for image pages with low quality can lower overall website rank. Because 90% of the website content will be low quality.

How to remove image attachment pages?

WordPress does not have a built-in feature to remove image attachment pages. Use popular SEO plugins like RankMath to remove image attachment pages. It also redirects the image page to the related article. If no related article is found then it can redirect to the blog home page or any other custom page that you define.

1. Navigate to “Rank Math” → “General settings” → “Links” page from WordPress admin.
2. Switch on the “Redirect Attachments” option.
3. Add custom URL or home page URL to “Redirect Orphaned Attachments” input field.
4. Click “Save changes”

Redirecting attachments option in RankMath SEO will also remove attachment pages from sitemap XML.

FAQ

How do I optimize images for SEO?

Use descriptive image names, add alt text to images, compress images to load the website faster. These are basic requirements to optimize images for SEO.

Which image format is best for SEO?

PNG and JPG image formats are best for SEO because they have small file size and are supported by most web browsers.

Do image names matter for SEO?

Image names should describe image contents. Meaningful names can help search engines to understand and classify images for related searches.

Are image captions good for SEO?

Image captions are text shown directly under the image. Having descriptive text in web page content can help SEO when it is nor repeating other surrounding text before or after an image. Use image captions where applicable to add value to the page. It can help people scan pages looking for interesting content.

Do images improve SEO?

Images help to describe articles better visually. Content with images are easy to understand, easy to scan for information and more entertaining. Images will give a good experience to site visitors. Users will be more likely to read more articles, share it in social media, and use your images in their articles by providing a back link. Google shows images for some search queries as they meet user intent. Images on your website meeting any of these use cases will improve your website SEO.

Check the following question to see how image optimization compares to web pages for getting more traffic to your website.

How to compare performance for image SEO vs web page SEO?

Use Google search console to view and compare image SEO performance.

You can compare your web page performance vs. performance for images using following steps:

1. Navigate to the “Performance” page in google search console.
2. Click the “Search type” filter at the top and in the opened window navigate to the “Compare” tab.
3. Select “Web” vs. “Image” from the drop down menu and click the “Apply” button.

In my report you can see that images on my website have 3 times less impressions and 30 times less clicks. This is because I do not have much content on my website and most articles are without images. Only 10 out of total 26 posts, 38% of articles, have images in them as of June 2022. This means I need to use more images and write more content for improving image SEO for my website.

Performance for images will be higher on recipe and tutorial websites.

Conclusion about Image SEO

Image SEO is not difficult and some optimizations like sitemap, structured data, attachment page redirection can be set up once with SEO plugins. Compression, naming, using alt tags should be applied every time when we use images. Use images to add some value to your content. Do not use unrelated images that do not help for the article.

When optimizing your website for search engines every little optimization helps. Image optimization is one of those little tweaks that will increase your overall website rank.

We cannot imagine content without images for recipe websites, tutorials, research articles, entertainment, review articles etc. In this SEO guide more than 16 images were used to better describe the topic. Without them content would be difficult to understand and apply.

Users will understand content easier and faster. Satisfying website users is best practice for search engine optimization.