Image SEO: Bookmark This Best Practices Guide

Image SEO is an important process that helps your website’s images be discovered, crawled, indexed, and ranked by search engines as efficiently as possible. This will not only improve your site’s visibility in search engine results pages (SERPs) but also enhance user experience by ensuring your pages load quickly.

While Google offers valuable resources on Image SEO best practices outlining what their algorithms prioritize, this blog is focused on practical steps that you can do right away to get your images perfectly optimized for Search engines.

Image SEO Best practices

By following the best practices, you can optimize images on your website and help search engines for better visibility and indexing. Let’s understand the importance of these image seo tips and how you can implement on your website.

Choose the Right Format & Size

Google Search supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG. Different image formats like JPEG, PNG, and WebP have their own advantages depending on the type of image. For example, JPEG is generally best for photographs, PNG for images with transparency, and WebP offers high quality with smaller file sizes.

If you want to learn more about choosing the right image format, here’s the best reference backed by technical aspects.

What is the best Image format?

The best image format I would suggest is WebP. As an SEO consultant, I always recommend WebP as an excellent replacement for JPG, PNG & GIF for better SEO. Google also recommends serving images in WebP format.

Choose the Right Dimension

Just like image format, using the right image dimensions is also important for optimizing images for SEO. Large images can cause performance problems, but that doesn’t mean you have to use ultra-small images that look blurry and pixelated. The key point is to ensure that images are as small as possible without reducing overall visually noticeable quality.

When loading an image, the browser doesn’t immediately know its dimensions unless they’re explicitly provided. It is recommended that all img tags include both width and height attributes. Always use standard HTML tags img while defining the images.

By serving images only in the sizes required for display, you can minimize downloaded data, ensure proper space allocation for images, and achieve faster loading speeds by reducing the chances of layout shifts.

I recommend, running a Lighthouse test to know better about your images which are not in a proper size. If you like to know more about the technical aspects, here’s a better guide on serving images with the correct dimensions.

Compress Your Images

Reducing file size without sacrificing quality is crucial. Tools like Adobe Photoshop, TinyPNG, or Squoosh can help compress images effectively. My favourite image compression tool is Squoosh.app, as it is a web-based tool and easy to use. Finding the optimal settings for your image requires careful analysis across several key factors.

For those who need a deeper exploration, I will link an informative article from Google, to get more technical knowledge on choosing the correct level of compression. That’s all about images!

If you’re using videos in your content, consider using the WebM format instead of gif. Here’s Why!

How to Find Large Images on a Website?

While optimizing images on a website, it is important to the optimizations for all images. It is easy to find and list all images on your website along with the pages it present. Checkout this step by step guide on how to find oversized images using screaming frog.

Use Descriptive Filenames, Titles & Captions

Google understands what your images are about by considering the surrounding content, including captions and image titles. Naming your images descriptively and in plain language helps search engines understand and rank your content better.

Google also recommends, adding the extension of your filename to match with the file type. Avoid using generic file names, instead make it meaningful. In the era of AI, Google engines could understand a lot if you could provide a helpful file name.

Difference between Image Filenames, Titles and Captions, in the context of SEO.

  • Filename: Filenames help Google understand the subject matter of the image and can also improve user experience if the image fails to load. Always try to use filenames that are short, but descriptive.
  • Title: In long-form content, titles act as identifiers for images, often numbering them for easy reference. This allows you to refer to specific images within your text by using their corresponding titles.
  • Caption: Captions are generally longer than titles. They can describe the content, add context to the surrounding text, or even provide more details like the location of the image, the people pictured, or the historical background.

User Better Alt Texts

Alt text (alternative text) provides a textual alternative to images for visually impaired users and helps search engines understand what the image is about. Even though it is for accessibility enhancements, Google also uses alt text to understand the image’s content. Additionally, if you use an image as a link, its alt text becomes the anchor text, providing context for users who hover over the image.

When writing alt text, focus on creating informative content that uses relevant keywords naturally within the context of the page. Avoid using too many keywords in the alt text area, as this creates a poor user experience and might hurt your SEO.

If you’re serious about the alt text improvements of your website, consider watching this video by Matt Cutts.

How to find images that have no Alt Text?

Check out this awesome tutorial by Screaming Frog on how to find images that are missing Alt Text.

Video tutorial to find images missing Alt text attributes

Use Responsive Images

To ensure compatibility with older browsers and crawlers, it’s recommended to always include a fallback image URL using the src attribute alongside responsive image techniques like the picture element or srcset attribute on the img element.

This allows the browser to choose the most suitable image based on the device’s capabilities, including factors like pixel density and screen size. Here’s an extensive article from Google that explains more about the best practices backed with technical details.

Defer Off-Screen Images (Enable Lazy Loading)

This technique, called lazy loading, delays the loading of images outside the viewport (the currently visible area of the screen). Instead, it prioritizes loading images that are currently visible or about to become visible as the user scrolls.

This can be done by adding a lazy tag to the image. It is a powerful technique that significantly improves page load times, especially for image-heavy pages.

The above-mentioned method is called Browser level image lazyloading and it is quite common in every website. Apart from that, there are a few more points you need to consider while handling lazyloading. Refer to this article to learn more about the best practices of Browser-level image lazyloading.

Here’s an example of a perfectly working Lazy loaded content. Source: web.dev

Include Images in Structured Data

Structured data is an important element while optimizing for image SEO. Adding structured data to your images can make them eligible for rich results in search, increasing visibility and click-through rates. As a result of these, you can drive better and more relevant traffic to your site.

However, it is important to note that you need to follow the correct structure data guidelines and do not forget to include the image attribute, which is necessary for rich results in Google images.

Include Images in your Sitemap

The image sitemap is a more effective way to inform Google about images that its crawlers (Googlebots) haven’t previously discovered. For instance, images only accessible through JavaScript code might be missed by Google bots. An image sitemap helps search engines find and index these images more efficiently.

According to Google, both generic sitemaps and image sitemaps share the same basic structure. Therefore, the best practices for creating sitemap are the same.

Monitor On page Performance

Use tools like Google’s PageSpeed Insights, Lighthouse, or GTmetrix to analyze your website’s performance, including image loading times, and follow their recommendations for on-page improvements.

Implementing these strategies can significantly impact your site’s SEO performance, enhancing both visibility in search engine results and the overall user experience.

Check out this video by John where he shares a robust perspective on Image SEO for Google.

That’s all about Image SEO for now. I will update this article once I get more validations and points about Image optimization for search engines. So, keep this article on your bookmarks for a later visit.

Last Updated on March 25, 2024 by Ujesh

3 responses to “Image SEO: Bookmark This Best Practices Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *