Do you run rigorous checks before publishing a post, to make sure your content is free from any typos or grammatical errors? Sure, you do.
Do you run your images through a checklist as well? No?
Well, you are not alone.
While most bloggers work very hard to optimize their content, image SEO is often an afterthought.
It is time to change that.
You can and should leverage the power of images on your website. And as with everything else in life, it’s pretty easy once you know how.
One-time action items for your entire website
Let’s start with these 4 tasks that you need to do only once for your website, to give your image SEO a shot in the arm.
1. Create an image sitemap
Include images in your website’s sitemap, just as you would include all your website’s posts and pages (or at least the ones that need to be indexed or discovered by the search engines).
Google’s image sitemap guidelines say that you can choose to either include your images and posts all in the same sitemap or create a separate sitemap for images.
However, if you use a CDN to host your images, they may not get included in the general sitemap generated for your website, since such common sitemaps usually include only files belonging to the same domain. So consider creating a separate image sitemap for such cases.
Also, if your site accesses images using JavaScript code, Google may not be able to find those as well, unless you have them listed in a sitemap.
Read more on why Google recommends image sitemaps.
How do you create an image sitemap?
Most WordPress SEO plugins such as RankMath or Yoast create a sitemap that includes images along with posts and pages (in the same sitemap) by default. You can also choose to exclude or include featured images since those tend to be ‘fancy’ at times and may not necessarily add value if indexed.
2. Use a CDN
Use an Image Content Delivery Network to help you load images much faster. Delivering high-quality images can slow down your website terribly – which is never good for SEO of course.
If you aren’t sure what an Image CDN is, or a CDN too, here’s a really quick explanation –
What is a CDN?
CDN is an acronym for Content Delivery Network. It is quite literally that.
A CDN is a network of connected servers all over the world in different data centers.
When a user visits your website, the data center that is physically closest to that visitor’s location serves up your content. Which obviously makes it faster.
For example, let’s say your website’s content sits on a server on the West Coast. A visitor from the East Coast lands on your website and browses through your site.
Now, fetching content from the West Coast all the way to the East will take time and slow down your website. Instead, if you use a CDN, your content could be sitting in a Data Center in New York, making it that much faster to load your website.
Google takes website speed quite seriously and so should you. Using a CDN can help improve your website’s performance dramatically.
Of course, there’s more to it than that really simplified explanation. If you are hungry for more about CDNs, read our detailed CDN guide. Read this for a list of the best free CDN solutions.
What is an Image CDN?
An image CDN is very similar to a regular CDN that I just described – but it has the added ability to transform an image, modifying its size, format, and quality, so that the image is optimized for the device that it is being viewed on.
For more, Google summarizes the basics right here.
Here are some popular providers for Image CDN services –
Optimole – Compresses, transforms, stores, and delivers images in an optimized manner. Optimole can integrate with your WordPress website easily using its WordPress plugin which has a stellar rating on WordPress.org. Read our detailed Optimole review here for more.
Quicq – Promises to speed up your image delivery performance. Read our detailed Quicq review here.
And there are many more CDN providers for images you might want to consider – MaxCDN, Cloudinary, Filestack, Imgix, and Imagekit.
3. Enable Lazy Loading
Lazy loading is exactly what it sounds like – images are loaded just in time on the visitor’s browser, when the visitor actually scrolls down or navigates to that area and “demands” that image.
How do you enable lazy loading?
Lazy loading for all images uploaded to the Media Library was added as a default feature in WordPress Version 5.5 (by adding a loading=”lazy” attribute to img tags that have width and height attributes). Later, WordPress Version 5.7 went on to include lazy loading for iframe tags as well.
However, you could still choose to use a WordPress plugin such as the free a3 Lazy Load plugin if you would like to –
- Disable WordPress’s default lazy loading behavior or
- Enhance WordPress’s lazy loading features by supporting lazy loading for
- images outside the media library
- browsers that may not support this WordPress attribute
- Iframes or videos that WordPress is unable to lazy load
4. Enable Browser Caching
Browser Caching is when a browser saves downloaded resources locally and then serves those up from there instead of downloading them again when the user re-visits the website.
How to enable browser caching?
If you are not keen on dabbling with code, it is best to leave it to a caching plugin like WP Rocket or W3 Total Cache. If you are not afraid of coding, then follow these instructions to DIY your browser cache.
Repeatable Action Items for Each Image
Here’s a list of 6 action items that should be part of your content checklist. Make sure each of these image optimization requirements is adhered to before publishing any post with images.
5. Choose the Correct Image Format
“WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images”
Google notes on WebP
Google supports images in a number of formats, however, the relatively new and lesser-known format WebP is ideal. JPGs are usually used for photos. PNGs are typically used for illustrations and logos (because PNGs allow transparent backgrounds).
Google recommends using WebP for performance, based on the results of a study that it conducted comparing WebP, PNG, and JPG images.
Convinced? Here are some tips from Google on how to use WebP images.
6. Name your Images Properly
The file name of your image can help search engines “read and understand” your image. Randomly naming an image file for, say a brown laptop bag, as MYPRODUCT202541.jpg doesn’t help at all.
Instead, naming it as ‘light-brown-laptop-bag.jpg’ gives the search engine clues about what the image is all about.
Again, as always, avoid stuffing keywords into your image file names. Instead, keep it as natural and ‘human’ as possible.
7. Compress your Images
You need to keep your image file size to the lowest possible, without compromising on the quality.
While there is no fixed limit or recommended file size for an image, most websites that I have seen use images of file sizes between 50KB and to 100KB.
You can use free WordPress plugins such as WPSmush, TinyPNG, OptiMole, or EWWW Image Optimizer to compress images on your website.
8. Add Meaningful Alt Tags
Each image has a tag called “alt”, which literally stands for alternative text. Alt tags are one of the most important aspects of your images for both SEO and accessibility.
Make your images accessible
Screen reader tools that are used by visually impaired users, read the text content on your website out aloud. For images, the alt text is read out by such tools.
So if your alt text does not describe the image properly, it would make no sense at all to the website visitor.
You might also want to consider using an Accessibility Checker tool to assess whether your website’s accessibility needs improvement.
Make your images search engine-friendly
Google has no way to “read” your images, so it uses your alt text to decipher the image. Also, when a browser is unable to load an image for some reason, it simply displays the alt text for it.
Some things to steer clear of while adding alt tags –
- Do not try to stuff a long list of keywords into your alt text – Google is smart enough to see through that.
- Avoid duplicate alt tags for images on the same post or page – all it does is annoy Google.
Adding alt tags to images is easy with WordPress, using the Image Block. You might only need plugins if you want to bulk-update alt tags for all images on a website.
A side note – Image titles and captions have been deprecated by Google since August 6, 2022. In other words, Google now completely ignores these image tags.
If you have already specified these tags for your images, you don’t need to go back and delete them. There’s no disadvantage if you have this additional data, but there’s no advantage either anymore.
9. Avoid Animated GIFs (like the plague)
Animated GIFs can lead to large, bloated files.
Instead, using videos like MP4 could help reduce the file size significantly. Using a WebP video is even better. Refer to Google’s example for proof.
10. Use Images that Complement the Content
You should ensure that your image (and the alt text) is in line with the text content before and after the image. If not, it can get confusing and be misinterpreted by search engines too.
For example, it is unnatural to embed an image of, say, a spaceship between two paragraphs that describe a pasta recipe.
In Conclusion
To summarize, all you need to do is deliver your images efficiently, help Google find your images, and understand your images accurately.
There’s so much SEO juice that these simple image optimization techniques can help generate. You have no excuse to ignore these really. Paying just a little attention to image SEO can help improve your website’s user experience dramatically. And the organic traffic that it generates is a welcome bonus.
Do leave a comment and tell us how you have been optimizing images for your WordPress website. Any image optimization WordPress plugin that you have tried and loved (or hated)?
On a related note, if you’re looking to edit images already on your WordPress site, check out these amazing image editors.
