Image SEO Optimization: The Ultimate Guide for 2021. WordPress Friendly

What Is Image SEO?

When people deal with images Search Engine Optimization (SEO), they only pick the low hanging-fruits: loading-time optimization and alternative texts. Image SEO is real science and goes way beyond that.

Image SEO impacts the way your images are ranked in Google images but not only. It also affects your organic research potential as a whole: optimizing your images for Search engines will positively impact your page’s ranking too.

Images are often displayed in the search results.

This SEO guide will provide you all the tips and information you need to know to perfectly optimize your images for search engines.

User Experience Should Be At The Core Of Your Image SEO Strategy

On the one hand, if you fill in image HTML attributes properly you strengthen your page semantically and help Search Engines understand your content.

On the other hand, image optimization can improve your loading-time and your user experience: there is no good article without any good images.

In this guide, I will make a wide sweep of what you need to know to make the most of your images for search engines, but also for your users. Google SEO starter guide is very clear on that!

All the tips and hacks I will mention in the guide are somehow aimed at improving SEO AND User experience.

Why Is Optimizing Images For Search Engines Important?

Image SEO Matters

Facts don’t lie: the marketing and SEO power of images is insane. SO insane!

Before creating our plugin WordPress for Image SEO, I combed through each relevant SEO and Marketing studies about the impact of images on Search Engines and customer behaviors. Here is a summary of what I discovered:

Impact of Image optimization for Search Engines

  • Image search represents about 30 % of all queries generated across the top 10 US web search properties (Source Moz);
  • More than 1/3 of all search keywords now contain Google Images and one out of two, when images are in the 10 first results, they are actually ranking in the top 3 positions (source SeoClarity);
  • Every day more than one 1 billion queries are made in Google Images (Source Google);
  • There are more than 600 million searches on Pinterest every single month (source Pinterest);
  • Images are returned by Google for 34% of search results (source Econsultancy);
  • Tweets with images receive 150 percent more retweets (source crazy eggs);

Increase Your Conversion Rates With Image SEO

  • Content with optimized images increases user engagement by 90% (source Buffer);
  • Tweets with images receive 150 percent more retweets (source crazy eggs);
  • On average, people forget about 90% of information 72 hours after being expo to it. Adding a nice picture can improve recall up to 65% (source MGAdvertising);
  • About 70% of customers say that the quality of images on the product sheet is a determining point in selecting and purchasing the product;
  • When using images, Pinterest ads have an amazing 8.5% conversion rate (source Heap Analytics);
  • etc, etc, etc.

This means that optimizing your images will increase both your organic traffic (SEO optimization) and sales (UX Optimization).

Optimizing Image HTML Attributes for Search Engines

In this chapter, I’ll go through all the HTML attributes that matter for image SEO aka:

1. Image Name

HTML

The name of your image file is one of the most important factors for image SEO.

2. Alt Text Attribute

HTML

The alternative text attribute will help Google robots to understand the content of your images.

3. Title Text Attribute

HTML

The title text attribute is less important than the filename and the alternative text attribute when it comes to SEO.

The title text attribute improves the user experience when you scroll over an image.

4. Figcaption Tag

black Tesla carrying with electricity on a parking
I don’t always refill my car, but when I do, it’s with electricity!

Ok it’s not my car, but anyway!

HTML

The figcaption tag is often displayed under an image, to provide more information about it.

Let’s Deep Dive Into Image Tags And Attributes

I will use the same photo to tackle each image HTML attribute and help you understand the differences between them.

I’m sure you have already asked yourself what was the difference between the ALT tag and the TITLE tag, haven’t you? So let’s get started!

Image names are important

How to Name Images for SEO?

Let’s start with the most obvious and the easiest: the image name. SEO is all about helping search engine robots and crawlers understanding your content and how your users interact with it. Your image name should reflect that.

“ Image names and alt texts are best when they’re short, but descriptive. ”

This quote comes from Matt Cutts who has been working for Google since January 2000. Image names should therefore be a combination of a few relevant keywords.

SEO Tip: Best Length For Image Names

Image names have to be short but descriptive. According to the data we have processed since the creation of our plugin, images that are performing the most have a length of about 12 characters.

We advise you to keep your image length between 8 and 16 characters. No more, no less.

This length corresponds to 2 or 3 keywords. It’s enough to help Google understand your photos and it will prevent you from doing keyword stuffing.

Avoiding Keywords Stuffing in Image SEO

Ever since Google has been dominating the Search engines market, keyword stuffing has become irrelevant or worse: Google is now penalizing more and more websites using keyword stuffing and black hat SEO skills.

Don’t try to trick Google!

We strongly advise you to apply our guidelines and best practices when it comes to filling out image HTML attributes for SEO.

You can use tricks such as filling your alternative texts or names with what’s in your page title, but at your own risk.

How To Write Image Alternative Texts for SEO?

People often struggle to understand how to write optimized alternative texts because they don’t understand what is an alternative text and what are they used for.

What Is An Alternative Text?

Let’s first clear the air about the terminology: Alternative text, ALT text, ALT Tag, ALT attribute, ALT are exactly the same thing. Period.

Although the most correct term is “alternative text attribute” they all refer to the same thing: a textual alternative to the image.

The ALT tag should describe what’s on an image (= the content) and the function of this image on the page.

Each time that an image has a purpose on your page, it should have an alternative text.

What Is The Alt Text used for?

ALT texts serve three functions.

  1. Accessibility: visually impaired or blind users using screen readers will be read the content of the alt text, allowing the image to be accessible to those with visual disabilities.
  2. Back-up: ALT tags are displayed in place of the image in browsers when the file cannot be loaded.
  3. SEO: It helps search engines to determine the content of the image and improve the semantic meaning of your page. That’s why image SEO is important to rank well in Google Image but will also have a positive impact on your whole search engine optimization strategy.

How to write a perfectly optimized alt text?

ALT texts should be built on two pillars: Content and Function. Your ALT must describe your image (= content) and explain why you use it for (= function).

The context of your page should be the logical link between the content and the function of your image.

ALT tag examples

  1. “Car on a parking”
  2. “black Tesla carrying with electricity on a parking”
  3. “picture of a black Tesla parked”

The best alternative to the image in this situation is “black Tesla carrying with electricity on a parking”.

Why? Because it gives just the right amount of information to someone with visual disabilities to understand what this picture is about.

Alternative texts can (and should) be longer than your alternative texts. There are no rules about it: Try to write the fewest keywords possible to describe the picture to someone that cannot see it.

The 3 Commands Of The Alt Text

  • Be short but descriptive (remember?)
  • Be innovative and avoid keyword stuffing and don’t provide the same information as text within the context of the image.
  • Don’t use terms such as “image of ” or “picture of …” to describe the image.

I wrote an extensive article about how to perfectly write alternative texts with examples. You should give it a look.

Decorative Images?

You don’t need to add an alternative text on decorative images. You can let them blank of add a null alt tag: <img alt=””>.

The Truth About Image Title Text

We saw several WordPress plugins offering automatic title tags generation for SEO: TITLE TAG DOESN’T MATTER FOR SEO.

They are not indexed by Search Engines. Period. This being said, title texts are not totally useless.

What Is a Title Text And What Are They Used For?

Title texts are displayed when the user mouse over a picture or a photo. It can be nice for the user experience. We recommend you not to spend much time on title text optimization. They are not important for SEO.

The SEO Power of Image Figcaption

Figure and figcaption are probably the most underestimated SEO and marketing weapons. Users focus 60% more on figcaption texts than on the paragraphs that surround the pictures. That’s insane.

Figure and figcaption: definition and structure

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Source W3C : HTML: The Markup Language (an HTML language reference)

Figcaption texts have to be written within a figure element.

The figcaption element represents a caption or legend for a figure.

Source W3C
HTML

Are figure and figcaption important for SEO ?

What I will say for figcaption is also true for the paragraphs surrounding your pictures.

For Search Engines, the content that surrounds your images is more likely to be in connection with it. It’s therefore important to use the keywords you are targeting in the figcaption or just before or just after the images.

Figcaption is the cherry on the cake

As I said before, people clearly pay more attention to the caption. You have to use this opportunity to emphasize your keywords, your call to action, or your best selling arguments. It can also be humor.

The results of the tests I did are crystal clear: images with figcaption rank better when they are surrounded by an optimized legend.

How to make the most of figcaption

Image names have to be short; alternative texts (alt) have to be descriptive, title texts can be left blank but figcaptions have to be catchy.

Use, in one sentence, your best punchline, if possible using optimized keywords for SEO, but think about UX first.

HTML

In this example, I optimized UX first with a (poor) joke, but I also optimized SEO using keywords such as “car”, “electricity”, “refill” and Tesla.

How to Optimize Image HTML Attributes on WordPress?

Without plugins, Image SEO optimization on WordPress is a pain in the ass. For instance, you can’t rename your images after you uploaded them.

Hopefully, we’ve developed an SEO plugin using artificial intelligence to help people to deal with this issue.

Image SEO Plugin WordPress

Image SEO Plugin uses AI to automatically fill out alt texts and rewrite image names. You can optimize your images on upload or bulk your entire Library.

Image SEO Optimizer plugin is an amazing time saver.

There is a freemium version of it for occasional bloggers (10 image optimizations every month). Otherwise, you can subscribe to a monthly plan starting from 4,99€ or purchase a pack of images.

This plugin saves a ton of time!

Image Optimization: Users First!

Images are the best asset for user experience because they make your page useful and attractive.

However, Images might also be your worst nightmare because they increase your page loading time. They can also break your web design or carry out the wrong message.

It means that you should not overuse images. It also means that you have to be really picky when it comes to image or photography selection.

In this section of the guide, I will use the pieces of advice of professional photographers to help you choose your images.

How To Choose Your Images?

Images Have To Be Unique And Original

Customers like original and new content. There are more likely to close a web page carrying out information or a product that they have already seen somewhere else.

Yet, what are the first things users’ eyes get when they land on a page? Its primary pictureMaybe the title.

It means that the first image of your page has to be catchy and original. This is essential and can significantly decrease your page bounce rate.

Let’s imagine that your page is a Tinder profile: you have to use YOUR best picture first if you want girls or guys to keep scrolling your profile. It should be just the same for a web page: use YOUR best image first if you want people to keep scrolling down.

I really insist on this point: to be optimized, the first picture of your page should be unique. People don’t like fake or duplicate content, neither does Google.

Unique images are indeed more likely to rank higher in the search results and that’s where you want your images to be right?

So it’s best if your featured image is not coming from a free stock photo website.

Should I Use PNG or JPEG For SEO?

I spent a lot of time on Reddit and Quorum before writing this guide to understand what people were asking about image SEO optimization. ” It is better to use png or jpeg for SEO ? ” was a top 5 question.

Sadly, there is no good answer to that question: the image format should always be adapted to the purpose of the picture.

Best SEO Practices for JPEG or JPG

JPEG (Joint Photographic Experts Group) is the most common image format on the internet. You should use it for images where the quality matters: photography, product sheet, etc.

JPEG files can be compressed tremendously, which leads to quality images with relatively small file sizes. You should always compress your image.

Spoiler alerte: WebP are better than JPEG for SEO.

Best SEO Practices for PNG

PNG (Portable Network Graphics) was created to replace GIF. PNG pictures have better quality and size than GIF. PNG files support transparency making them really useful for graphics or icons.

You should not use PNG for pictures or photography because the ratio quality/size is much better with JPEG.

Best SEO Practices for GIF

In 2020, the only reason justifying the use of GIF on the internet is simple art and animations.

Keep your GIF for your conversations with your employer. They are bad for SEO

If they are not really good for SEO, GIF images have incredible marketing power and it can be nice to put one GIF on a landing page.

Best SEO Practices for SVG

SVG (Scalable Vector Graphics) is a kick-ass format for SEO for two reasons: it’s light and it’s responsive. SVG images are also awesome on a retina screen.

SVG images and their behaviors are defined in XML text files which means that they can be created and edited with any text editor. You should try to use SVG images as often as possible for your SEO optimization.

How to create an SVG?

Not every image can be converted in SVG. To get your SVG file you need to download Adobe Illustrator or use an image online converter. Be careful with the SVG file or code that you find on the internet. They might open a security breach for your website.

I personally get my SVG file on Flaticon. The largest database of free icons available in SVG.

Best SEO Practices for WebP

Like JPEG or PNG, WebP is a method of lossy compression that can be used for photos or images. A comparative study made by Google recently demonstrated that WebP files achieve an average of 30 % more compression than JPEG without loss of image quality.

You should thus prioritize the use of WebP over JPEG or PNG. It will positively impact your loading time.

Also, note that WebP format has been developed by Google and it’s no secret that Google tends to favor its own products.

How to convert a photo in WebP?

All information is available on Google website. Note that you will need to be comfortable with writing command in the terminal of your exploitation system.

It’s not rocket science, but if you experience trouble, shoot me a message at aurelio@imageseo.io and I’ll write an article about it.

You can use also use an image online converter (see above) or a plugin like Imagify.

Recap about image optimization format for SEO

Image FormatSEO Recommendations
JPG / JPEGPrioritize the use of WebP.
PNGOnly use PNG when you need the transparency or for really small images.
GIFOnly use GIF when you need to animate an image.
SVGUse SVG as often as possible but don’t download SVG from websites you don’t trust.
WebPYou should always try to use WebP over other formats when you are not restricted by transparency or animation.

WebP format is a relevant endeavor for image SEO.

EXIF Metadata Impacts Image SEO

EXIF metadata is used by cameras to store information in photos, during image compression. They embed data such as date, time, camera model and settings, geolocation, etc. They are sometimes used by the police to find out where a picture was taken. They are useful for Google algorithms because they carry out specific data about your picture.

” It is something that Google is able to parse out and I think we do reserve the right to use it in ranking!
EXIF Data matters for SEO said Matt Cutt

EXIF data optimization shouldn’t be your priority when you are optimizing your image SEO. You need to focus first on image names, alternative texts, and compression.

This being said, it’s really worth to spend time optimizing the EXIF Data of a few pictures. It might be the ranking factor that will allow you to overtake your competitors.

Note that Exif and IPTC data are also important for Google Lens.

To edit and optimize your EXIF data for SEO you only need GIMP, but you can also do it with Adobe Photoshop or Adobe Lightroom.

EXIF DATA SEO GIMP

The path is : Image > Metadata > Edit Metadata.

Then, select the empty fields you want to update and click on “Write Metadata”.

Only add relevant data such as 2 or 3 keywords (no more), author, and location, especially if your image concerns a local business.

IPTC / EXIF data might be extremely relevant for local SEO.

Don’t forget to tick the three boxes Exif data, XMP data & IPTC data when you export your image.

I know that photographers are really interested in this topic. If you own a photo website, check out my ultime SEO Guide for photographer. You will like it!

Where To Find Good Pictures For SEO ?

When I don’t take the pictures myself (remember what I said about the importance of the originality criteria for image SEO optimization) I get them on two sites dedicated to free sharing stock photography: UnSplash and Pixabay. They have a lot of amazing pictures free of rights.

You can also use Canva to create amazing illustrations.

Optimize Images Loading Times for SEO

Website speed is an important SEO ranking factor

If you have read this far in the guide you know that page loading-time can dramatically impact your ranking position in the SERPs. If you don’t optimize them, images can consequently have a negative impact on your SEO because of their size.

Google said that site speed is one of the most important factors used by its algorithm to rank websites.

Pages with long loading times are also bad for the user experience. This might have substantial consequences: lowering your bounce rate, leading to negative reviews, reducing your conversion, etc.

Use Responsive Images

One of the most common mistakes about image SEO is when you upload a large image, then display it really small. In this situation, the large image is always uploaded. It’s therefore important for you to take the time to resize images the way you want them displayed.

Note that WordPress automatically provides images in multiple sizes and responsive images after upload. If you are not using WordPress, you have to do it yourself with GIMP, Sketch, Photoshop, or Illustrator.

Set Up SRCSET Attribute On Your Images

Once you have created your image in several sizes, you need to add a srcset attribute to it. This will allow browsers to select the appropriate file source for every device.

HTML

You can define the size by the image width (w) or by the image density (x). Don’t mix both like in our example. I only did it to show you the structure.

HTML

There is no evidence that you should use one over the other but since I’m a control freak, I’d recommend you to use width, over density.

Width is less likely to break your design or anything.

SEO trick: Lazy load Your Images

Lazy-loading is a Javascript technique that defers the loading of images, leaving them ”off-screen” until you need them. Lazy-loading only comes into action when users reach your content as they scroll down the page.

Lazy loading your images won’t prevent them from being indexed by Google robots. It’s a quick win for SEO and UX. However, be careful: you should not lazy load all your images. Only the ones that are not critical.

If you are using WordPress, there is an excellent speed optimization plugin named WP-Rocket that can implement Lazy-Loading on images for you.

If you are not, I invite you to read Google guidelines on Lazy loading implementation or the guide on lazy loading of CSS-Trick.

Edit: the last version of WordPress natively implements image lazy-loading.

Image Compression: Reduce Images’ Size

Image compression is the low hanging fruit of image SEO optimization: you have to grab it. It will boost your page performance and improve your user experience.

You should never be afraid of compressing your images: most of the time the user cannot see the quality lost.

Image Compression How It Works?

Lossless or lossy compression?

There are two main techniques for image compression: Lossless compression and lossy compression.

  1. Lossless image compression: the image quality remains largely the same;
  2. Lossy image compression: some loss of quality occur, even though, it’s almost never perceptible for the human eyes.

I mentioned before the importance of EXIT and metadata for SEO. The lossless image compression method is almost only about getting rid of this metadata. That’s why I said that you should only optimize EXIF data for your most important images.

In the lossy image compression method does not decompress digital data back to 100% of the original. It means that when you use lossy compression, your image will lose some pixels and therefore some quality.

At this point, you are probably asking yourself: should I use a lossy or a lossless image compression for my images? Most of the SEO Guides and Blogs speaking about image optimization say that it’s all about finding a good compromise between file size and image quality. This is true, but not completely.

SEO is all about finding a good compromise, BUT when it comes to image compression we can trick the human eyes and that’s why you should prioritize compression over quality. To some extent of course.

Image Compression Tools and Plugins

You can compress your images with software (GIMP, Photoshop, Illustrator, etc) or online compression services such as Image Optim.

If you are using WordPress, I recommend you to use ShortPixel because:

  • it offers the possibility to remove (or not) EXIF data;
  • Setting options are cool;
  • It can convert your JPEG in WebP;
  • The image compression results are totally satisfying.

If you don’t like ShortPixel, Imagify, Smush are also excellent alternatives for image compression and optimization on WordPress.

Help Google To Index Your Content With Images Sitemaps

In order for your site’s images to be included in the SERP, they need to be included in the Google index.

The indexing of your images by Google is determined by algorithms, but you can influence the process and help Search Engines by creating image sitemaps.

What Is An Image Sitemap?

sitemap is an XML file where you provide information about the pages, videos, and images on your site, and the relationships between them. It helps Search Engines crawl your website.

If your internal linking is optimized and your site small, you shouldn’t need sitemaps. However, as soon as your sites become large, crawlers can overlook your content and skip some part of it. That’s why sitemaps and image sitemaps are important for SEO: they can guarantee that all your content is indexed by Google.

How To Write An Image Sitemap?

You can use a separate sitemap to list images, or you can add image information to an existing sitemap. This example shows a sitemap entry for the page http://imagesitemap.com/page.html, which contains three images.

XML

When your images sitemaps are ready, don’t forget to send them to Google using the Search Console Sitemaps tool. For all the other Search Engines, add the following line of code in your robots.txt file:

Sitemap: http://mysitemap.com/sitemap_location.xml

What Is The Best SEO Plugin For Image Sitemaps ?

All the major SEO Plugins available on WordPress have an images sitemaps creation feature. I recommend using SEOPress over Yoast and RankMath.

Why? Because I have been working with people from SEOPress in the past and their support is really reactive.

Thoughts and conclusion on Image SEO optimization

I have been working daily on Images SEO over the last 10 months and if I had just one additional comment to make it would be: the future of the web is visual. You should really pay attention to image SEO because the return on investment on image SEO actions is crazy good.

We are coming to the end of this guide on image SEO optimization. If you have a question or a comment, feel free to shoot me a message on Twitter!

Our SEO Tool will grow your traffic

Why have you neglected images search engine optimization for so long ?

Try it for free