Image SEO 101: How to Get Better Rankings for Your Images

Even if you think you have the most minimalist content publishing workflow on the planet, sooner or later — you are going to use an image to explain and/or present something. And when you do, you have to ask yourself, “Am I optimizing my images for potential SEO traffic?”

We have come a long way in using images within blog posts and other forms of content. Not only have images shrunk in size, there’s a whole new arsenal of web-friendly image formats. Many of which are tailored specifically to optimizing image performance and presentation.

Needless to say, search giants like Google are investing enormous resources into Machine Learning and A.I. to further enhance search algorithm’s ability to understand pictures and not just index them.

You can visit the Google Cloud Vision platform and see for yourself, just how “smart” some of the Google algorithms are at understanding the intricacies of a photo.

This post is going to explain the latest SEO techniques for visual content and give you a clear direction to follow and act upon.

Ready to get started? Let’s get to it.

Should you be using images in your content?

The answer is a resounding yes. Don't make your readers bleed their eyes out on a 2,000-word article because you thought it doesn't need a photo or two. Images are invaluable visual assets, great for adding details to your story, but also for breaking the story into smaller sections.

And don't forget that images come in many different formats. A ton of tools provide great help in improving your content marketing strategy using visuals, and you can always try something more exotic, perhaps an interactive infographic?

Create a sitemap for your images.

Google has made it clear that images have an impact on SEO, and encourages all webmasters to create a separate Sitemap for all visual content:

By adding more context around images, results can become much more useful, which can lead to higher quality traffic to your site. You can aid in the discovery process by making sure that your images and your site are optimized for Google Images.

As a WordPress user, you don’t have to worry much because plugins like Yoast provide XML Sitemaps out of the box. And if you don’t use WordPress you can always use Google’s Webmaster Tools or another sitemap-generator service.

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

Alt text helps Google understand photo content.

Alt tags for Images have been around since the beginning of HTML. And Google is very adamant to ensure that webmasters properly tag their images.

Here is a quick rundown of the alt attribute by Thomas Bradley:

As you can tell, it’s not difficult to add alt tags. In Google’s own words, “When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page.”

The photo perfectly illustrates what to follow when you are adding alt tags to your photos. Stick to clearly defined and easy to understand tags, so that Google’s search robots can best index your images.

Decide on a file type.

Speaking of image formats: each one has a different structure, and as a result, a different file size.

Ilya Grigorik from Google says, “Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space.”

If you invest in image optimization you are going to reap rewards not only in the performance department but also in your SEO rankings.

The above image shows a basic thinking process for selecting the right file type. But, JPG and PNG images are not the only file types making strides in modern publishing. SVG and WebP are getting a lot of traction, and it’s worth learning about both independently.

New image formats

PNG, JPEG or the SVG are the established image file formats. Nevertheless, the development of image file formats is still continuing. The JPEG 2000 and JPEG XR formats, for example, are further developments of the original JPEG format. They offer the same quality despite having a smaller file size. In addition, the JPEG XR format supports transparency just like the PNG format.

In addition to these further developments, new file formats are also being developed. The main goal is to keep the file size small without compromising quality. Current developments include the formats FLIF (Free Lossless Image Format) and HEIF (High-Efficiency Image File).

And then you have an entirely new image format known as WebP. WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

A problem in this context is that as of now, there is hardly any existing support by the known browsers. Tools such as Can I Use? can be used to check the compatibility of different file formats with various browsers.

Reduce file size by using compression tools.

Google has been pretty vocal about encouraging webmasters to use compression tools. After all, you can compress most images without losing any visible quality to the picture.

But, still, why compress images?

For one, by compressing images you’re making drastic contributions to increasing your page loading times. As a result of this, the overall user experience is improved and that means more business for you.

In a study concluded by KISSmetrics — even the slightest increase in page load times can lead to a severe decrease in conversions.

Photo: Skilled

And this plays out even worse for users on mobile devices. On average, images use up to 70% of the entire page weight. This translates into problems such as images having absurd dimensions, having too many images, and overall slowing things down, thus increasing the likelihood of a user abandoning the page altogether.

Image size depends on the quality of the image. In other words, the number of pixels that a photo is using. Photos with greater pixel count equal greater file size and quality. So, if you trim down 25% in pixels — you still get a solid photo without sacrificing quality, but greatly decreasing the file size.

What compression tools can you use?

At the very least, you can resize all of your photos to match the dimensions of your contents’ container area. For most blogs, this is no bigger than 800px-wide.

Additionally, you can use online services like TinyPNG which compress both PNG and JPG files.

You can also use software like ImageOptim — comes in Windows, Mac, Linux, and Web API format.

And if you really want to go the extra mile and drastically reduce image-based page weight, you need to look into SVG — a popular vector graphics format tailored specifically for seamless web experiences.

A brief introduction to SVG.

The biggest and most important difference between SVG versus JPEG and PNG is the type of file format. SVG files are vector graphics, and SVG stands for Scalable Vector Graphics. The format dates back to the development of W3C in 2001. The format is based on the markup language XML.

It is, therefore, possible to integrate SVG files directly into the HTML code of a web page. The browser then loads the graphics directly and without a file from the server, unlike with JPEG or PNG. This has a positive effect on the loading times of the website, as fewer requests have to be exchanged between the browser and the server. SVG files can also be scaled without loss. This is not possible with JPEG or PNG files. That means SVG files are particularly suitable for logos or graphics.

Direct integration in the HTML code also has a disadvantage. SVG files are not considered to be very secure. The format has inherent security holes which can, for example, be infiltrated by malicious scripts. These can adversely affect the performance of a website and therefore create a poor user experience. As a result, user signals relevant to ranking can deteriorate.

Use Schema Markup where appropriate.

You should know by now that Google is being pretty serious about using Schema Markup to organize the web search result pages. And this applies to images to an extent, too.

So far, Google is using Schema Markup to better understand posts that are marked as videos, products, recipes and animated GIF images. Each of these tags can have an image show up in the SERPs as long as an image has been specified.

As you can see, images put inside a recipes markup tag can also show up in the featured snippets box. But most commonly, such Schema images show up in search listings alongside the content title.

So, if you publish recipes or you are the owner of an eCommerce store — starting exploring the ways in which to add Schema Markup to your pages.

Keep in mind that this only applies if your site has a particular type of content. E.g. product pages or video publications. Google has not made any public effort to try and understand ‘featured images’ and other types of visual content.

What the future holds

The biggest buzzword in connection with image optimization in SEO is Visual Search. An image search based on the image information and no longer on text-based information. The project Google Lens on Android smartphones shows the possibilities of visual search. The above-mentioned Cloud Vision API also shows what is already possible in terms of visual search with the help of machine learning.

In addition, modern smartphones, tablets, and desktop computers are equipped with high-resolution displays. Resolutions in the range of 4K are now standard. These pose new challenges for technical image optimization in SEO. The challenge lies in the size of the files. A retina-capable file has at least twice, and ideally three to four times, the resolution of the actual file. These high resolutions result in larger files.

As a result, more storage space is needed and loading times will increase. It is no longer a matter of megabytes, but of a few hundred kilobytes. This can have a significant impact on performance. Once again, the image files should be as large as necessary and as small as possible. The development of the above-mentioned file formats, FLIF and HEIF, already takes this into account.