Image SEO is a topic you should already be taking very seriously, at the very latest since the announcement of the Google Core Web Vitals and loading speed as a ranking factor. There are various ways to optimize your images in WordPress. Here's our overview of the most important tips and tools.
Images, photos, infographics and other illustrations have become an integral part of writing high-quality articles. However, they do not only loosen up the text or clarify some processes better than words could. Using the right approach, they can make your website even faster and even more discoverable in search engines.
WordPress SEO texts
In my tutorial Optimize texts for search engines, I show you how to prepare your blog posts and landing pages for search engines. Used together, these guides give you most important tips for your WordPress SEO.
One point to consider straight away is that Google and smaller competing search services offer an image search. That means people can get to your website via an image search. So why let the great opportunity of image SEO with WordPress slip through your fingers?
How does image SEO affect your visibility?
Let's look at SEO for images independently from WordPress. If you include high-quality images in a post, then you can attract the attention of many visitors. But not only the search engines play a role here. If you prepare your images accordingly, it can influence various aspects.
For one thing, you increase your visibility significantly because your images themselves can naturally be found in the search engines - not just your text. As mentioned above, this is how visitors might find their way to your website. Let me show you how this works with a quick demonstration.
The image search on Google
I use the Google search and enter the term "recipe pasta". I don't just want a recipe in text form so I switch to the image search. Now, I'm shown images of delicious pasta dishes:
I really like the third picture from the left; the pasta just looks delectable. So, I click on the image and land on the corresponding site. The owner has put effort into image SEO here.
As you can see, if you use search engine optimization for images correctly, you can target many additional people. But that's just one example of many.
Images influence not only search engines, but also people. And where are people active every day? On social networks like Facebook, Twitter, Instagram, Pinterest, LinkedIn & Co.
Let's take the above example a step further. Imagine you run a food blog. How great would it be if visitors who found your recipe share the corresponding post on social media, for example on Facebook. And if there's no decent image available or properly integrated on the post, visitors see a very sad picture - namely no picture at all!
In this form, a post does not encourage clicks or sharing. On the contrary, the post will be lost in the vastness of the social network and users will not take any notice of it. When a suitable image is displayed next to the text, it significantly increases the appeal of the post:
For a food blog, for example, you should not use images that consist mainly of text content. People expect to see the finished recipe. I still choose text images from time to time, however. I'll explain why in the next section.
Where can I source high-quality images?
There is often a small problem with high-quality images. A problem of a legal nature. You will certainly know that you are no longer allowed to simply use Google Image Search to copy images. This is because they are protected by copyright. That means you have the following options:
- Use paid platforms
- Use royalty free images
- Create or photograph images yourself
Not every website has a budget to purchase expensive stock images from, for example, Fotolia or Shutterstock. With royalty-free images, like those from Unsplash or Pexels, there's always the danger that the images were not uploaded by the copyright holder. There are even reports of sophisticated scams that can end up costing you dearly.
Platforms such as Pixabay do indicate the possible uses. But there have already been legal disputes that ended to the disadvantage of the owners of websites. My tip is therefore to make a screenshot of the license information when downloading the image. For the reasons mentioned above, I decided to use image I've created myself where I work a lot with text content. I can publish these with a clear conscience and without legal consequences. If you have a website that relies a lot more on images, you might want to go a different route.
Use images SEO efficiently
How can you optimize images for SEO? First of all, I would like to show you some common steps you can take to improve the visibility of your images or your website. In the next section, I will show you how these processes can be implemented for your image SEO with WordPress. Because not all problems can be solved by installing a WordPress plugin.
Unoptimized images worsen your ranking
Most people with a website think that optimizing images for search engines is all about getting better results in search or in social network previews. But this is not the case. Images also need to be improved in terms of the Google Core Web Vitals mentioned at the beginning. These factors are all about the usability of your website; check out this article on the new ranking factor for more information. Moreover, your target groups are increasingly accessing the internet on their smartphones.
So when websites have large and non-optimized images, the website loads slowly and the user has to wait. But who wants to wait for non-optimized images? The result will be a worse Google ranking from May 2021.
The image size
That's why you should try to keep the image size as small as possible without losing image quality. If you create the images yourself, you can control the image size via the editing program. Adapted formats for the website, i.e. width and height in pixels and article images depending on WordPress theme, have also proven to be very efficient. WordPress then doesn't have to scale the images unnecessarily.
When you take a picture with a professional camera, it could be thousands of pixels. The contents of a website are usually limited in width. It therefore makes sense to upload the image only in this width. Especially as it can easily be multiple MB in size, something that's no longer necessary in modern web design - and kills your loading times.
Format & compression
The format of your images is often related to compression and a few other factors. While images with transparent elements are more likely to be saved as PNG, for example, the JPG format is more suitable for colorful graphics.
JPG allows a higher compression and can therefore significantly reduce the file size. In return, the quality of the image suffers a little. AVIF and WebP for WordPress are other newer formats that are designed with the future in mind. These formats deliver even better results.
Fill in metadata correctly
Most search engines still build on so-called metadata. This is basically information that the website stores in the source code so that search engines can assign the data.
As the largest provider, Google is technically very advanced and does not require metadata to be as detailed as the small search engines. Nevertheless, I would always include it. It doesn't harm your website and the additional deposited sentences and words increase the chances of your site being found.
By the way, the metadata has nothing to do with the name of the image files. You should already name the images with a description of the content before uploading them. Let's come back to the example of the food blog. A pasta dish with ground beef sauce should be called something like "pasta-dish-with-ground-beef-sauce-to-cook.jpg". Metadata for images is simply inserted in the source code as HTML. If you add the appropriate information to the images when you upload them, WordPress does it for you. More on this later.
For example, the source code for a properly populated image might look like this:
<img src=“domain.de/Nudel-Teller-mit-Hackfleischsauce-zum-Kochen.jpg“ alt=“Nudel Teller mit Hackfleischsauce“ title=“Nudel Teller mit Hackfleischsauce“ />
The alt tag represents an alternative (text) label that can be displayed if the image is not displayed. Due to an outdated browser or a broken link, for example. But it is also important for people who use a screen reader. Website accessibility is another reason why you should pay attention to talking content here. The image title tag (not to be confused with the title tag of the website!) is used to display further information about the image on mouseover.
Image optimization outside of WordPress
If you create or edit your images yourself with an image editing program such as Gimp or Photoshop, you don't need to use a solution in WordPress. It's easier and more resource efficient to do the optimization directly in the program. Here is an example from Photoshop:
The original 4 MB article image file for this text has become a 340 KB JPEG file with an image size of 2560×1440. And that with hardly any visible loss. The situation with PNG is, depending on the image, somewhat similar.
If you now reduce the resolution of the images, i.e. adjust them to the WordPress theme, you can create even smaller file sizes. In my own blog, for example, the title images have a size of 720×360 pixels. This depends on the theme and may look different for you.
WordPress plugins for image compression
Do you want to compress your images directly in WordPress, instead of or in addition to the external option? Then read our comparison of 5 popular plugins for image compression. Our guide also shows you the right workflow for this important work.
Find out image size in WordPress
A small note about the image sizes in WordPress. You can easily find the image sizes but they have nothing to do with the media specifications in the general settings of WordPress:
Here you can set the standard sizes used by WordPress. When you upload an image, WordPress will generate additional images in these sizes. However, this does not change the sizes as they are displayed in your WordPress theme.
Some themes give you the option to do this in the settings and others don't. If not, you can simply go to your website in the browser and take a closer look at an image, for example the article image, by right-clicking on it. You will find the sub-item "Show graphic info".
If it says in the "Dimensions" that the image was scaled to a different size, you just need to adjust the corresponding images again. Because a different size to the cropped image is required by the theme.
Define meta information in WordPress
Images play an important role in search engine optimization and not only because they enhance texts. They also make your site visible and you can show Google & Co. what you write about on your website.
It's a good idea to think of images as a necessary addition to the content. For the search engines recognize the potential, you need the meta information. As mentioned above, you should already provide the images with an SEO-optimized file name before uploading. Name the images very precisely. The title should reflect what can be seen on the image.
WordPress allows you to enter the metadata for images directly when uploading them. However, I recommend that you do not add the images while writing but go through the media gallery. To do this, simply click to the left side of the WordPress backend on Media -> Add file. There you can select an image from your PC and upload it.
When the image has uploaded, click on the "Edit" button that appears. WordPress then opens the media file and shows its most important information. You can now fill in the spaces marked in red on the image:
If you add the image later in the Gutenberg editor, it will automatically receive the appropriate meta information. Try to avoid using images more than once, however. Instead, upload them again with a new file name and new metadata. These details are usually optimized for a specific post.
Lazy loading for images in WordPress
In order to get a website that is as fast as possible and can withstand Google's new Core Web Vitals, only the content that is currently necessary should be loaded. Images that are displayed in the lower part of a long article do not need to be displayed or loaded at the beginning.
This is where lazy loading comes into play. This means the delayed loading of images that are not located in the "above-the-fold" area that the reader sees directly. While this function was previously only possible with certain WordPress plugins, e.g. Autoptimize or WP Optimize (only from Premium), users who've installed at least WordPress 5.5 has something to be happy about.
Lazy loading is now already included in the core of the code. And, in WordPress 5.7, there's even Lazy Load for iFrames. So if you have an older version installed, it's definitely time to update.
Caching with WordPress
You can achieve a significant increase in performance in WordPress by using a cache. A distinction can be made between browser caching, which only stores certain files on the end device, and server-side caching. In the latter case, the dynamically generated content of WordPress is also made available in static files on the server.
This means the website does not have to access the databases every time it is requested. Such calls increase the loading time and also the load that your server has to bear. For large websites with many visitors in particular, this can be an effective way to save resources.
The disadvantage is that you can't create certain page content dynamically. For example, if you have different banner ads in use, you would have to exclude them from caching. Or accept that they don't change in a post. For online shops with WooCommerce, you also have to consider certain exceptions to ensure the order process works correctly.
Alongside the very extensive plugins like WP Rocket that are paid and offer many different settings, you can also implement caching with free plugins like WP Optimize or W3 Total Cache. RAIDBOXES offers its own server-side caching where the NGINX cache becomes active before WordPress takes over. This way, web pages can be delivered without slowing down WordPress. Another advantage is that you no longer need a WordPress caching plugin - so there's no need to worry about complicated settings.
Image SEO in WordPress
Optimizing images in WordPress can really pay off. Not only will you increase your rankings, but you can also attract additional traffic. But it does, of course, take some effort. Especially in the beginning when you're still new to the topic. With time, however, SEO optimization for images goes faster and you'll achieve better results.
As Google is paying more and more attention to loading times, it makes sense to not just look at the meta information. Offer the images in the correct file format, compressed and with exact sizes. Your visitors will appreciate it because the page will quickly provide the desired information. If the content is right as well, there's nothing standing in the way of your success.
More articles from wp unboxed on SEO to help you on Google & Co: