Here’s What You Need to Know About SEO Image Optimization.

Google’s new image search interface isn’t the only platform focusing on visual content and product discovery.

There is a lot to be said about online performance and images. This post will provide an overview of major components of image optimization to assist you with your SEO efforts, ranging from easy wins to slightly more sophisticated strategies.

Why image search matters

Although there are no specific figures, Google claims that hundreds of millions of people use Google Images every day to visually discover and explore the material on the web. According to Moz, image search accounts for 27% of all inquiries generated across the top ten US web search properties:

Google changed the “View Image” button from Image Search to “Visit [Page]” about a year ago. As a result, analytics platforms began to observe an increase in sessions primarily driven by image search, and content exposure for the host pages grew (instead of random image files without context). Images, in addition to complementing content and boosting user experience, are once again an essential source of traffic and should not be overlooked.

Properly naming and describing images for SEO

The actual image file names themselves are one of the simplest and most frequently missed optimization chances. Those should employ a few carefully picked keywords – ideally, keywords for which the image could rank – while avoiding stop words (a the, in, of, and so on) and separating keywords with hyphens (e.g., IMG-458752.jpg would become Brooklyn-bridge-night.jpg).

The next easiest parameters are image alt and title elements (of the HTML tag), which not only help images rank higher in search, but also develop the page’s relevancy and improve user experience, eventually all ranking factors. In the case of picture links, such features also provide context to search engines about the destination page, which helps it rank even higher. Unlike file names, those attributes should be written in a grammatically logical and concise manner: alt attributes are read aloud by accessibility software and screen readers, and title attributes appear when users hover over photos, so don’t pack keywords in there and vary it up!

As we occasionally hunt for highly particular products, it’s a good idea to include SKUs, ISBNs, or model numbers in alt attributes for e-commerce and product photos. It’s also worth noting that on-page image captions and keywords in the surrounding text area help search engines deduce additional context for photos and boost their ability to rank.

It’s worth noting that the host page’s HTML title elements are now displayed in image search results, so make sure they’re somewhat related to the image as well (see above screenshot).

Choosing the right image formats, sizes and dimensions

Image file size has a disproportionate impact on page load time, so it’s critical to get it properly. JPEGs are typically more SEO-friendly than PNGs, especially if translucent backgrounds are not required because they offer higher compression levels. The vector-based SVG file format is commonly used for logos and other high-resolution computer-generated visuals (make sure that your server caches, minifies, and compresses that format as well). GIF files should only be used for simple animations that do not require large color scales (they are limited to 256 colors). For large and lengthy animated graphics, it may be preferable to utilize a genuine video format, which supports video sitemaps and schema.

What counts most is the actual file size (in Kb) of the photographs themselves: if possible, try to keep them under 100Kb. If higher file size is required above the fold (for hero or banner images, for example), it can be beneficial to save photos as progressive JPGs, which allow images to begin appearing progressively as they are loaded (a blurry version of the full image first appears and gradually sharpens as more bytes are downloaded). So, first, choose the best format for your purposes, and then choose the best parameters for them!

Although Google Lighthouse and PageSpeed Insights audit tools recommend even more specific compression formats (Next-Gen formats such as JPEG 2000, JPEG XR, and WebP), these are not yet universally supported by all browsers; however, some CDN providers do offer WebP conversion when visitors use compatible browsers.

In terms of dimensions (image height and width), make sure that images are not wider than the most popular largest desktop screen resolutions (usually 2,560 pixels in width at most, or browsers will scale them down) and that your CSS makes your images responsive (images adjust automatically to screen or window size). Depending on your website’s visual needs, this may imply saving many versions of the same image in different dimensions in order to only dynamically offer the best-optimized image dependent on the user’s screen (mobile, tablet, expanded or resized desktop window, etc.). This can be accomplished automatically by using plugins or by using the and/or elements.

Here are a few examples of popular picture compressing software:

• GIMP is a free, cross-platform image editor that may be downloaded.
• TinyPNG: TinyPNG employs intelligent lossy compression algorithms to minimise the file size of your PNG and JPG files.
• Smush is a WordPress image compression and optimization plugin.
• MinifyWeb: a free internet solution for compressing web files:

Please keep in mind that, for the time being, Google does not employ EXIF metadata but may use IPTC metadata, notably for copyright information.

Properly hosting and caching images

Images can not only considerably increase page load times due to file size, but they can also significantly increase the number of requests sent to the server before the browser can finish loading the page, competing with other critical resources and slowing down the pace even more.

To speed up the process of collecting and loading images, we employed “image sprites” (many images saved as a single one and relying on CSS to be shown) and hosted images on a cookie-less subdomain in the past (commonly referred to as domain sharding). However, with HTTP/2 now enabling several concurrent server requests, this is no longer an issue. Depending on your individual setup, hosting photos on the same host as your HTML files may be faster.

As previously stated, Google Images (until last year) directly linked to the image locations themselves, so many webmasters and SEOs felt that hosting images on their domains was even more important to capture any potential link equity from anyone “hot-linking” or embedding your images into their content.

Other advantages of hosting photos on your domain or subdomain include cache management, branding, and redirect control. There are few (if any) advantages to only hosting photos on third-party sites unless they are on a content delivery network (CDN), which can reduce load times by sending images closer to the user’s location. When using a CDN, be sure to point one of your custom subdomains to your CDN provider’s server (for example, fd5dfs4sdf69.cdnprovider.com becomes images.yourdomain.com). This makes switching CDN providers much easier because you won’t have to update and redirect your image URLs, and it also provides clear branding benefits.

In any event, make certain that HTTP/2 is enabled for your subdomains or third-party CDN.

When it comes to caching, be sure that all image types have server expirations configured. Images should be among the resources that have the longest cache durations (usually many weeks).

Properly loading images on your pages

Images can slow down a page not only because of their file format, file size, and amount but also because of how they are loaded.

Despite the fact that the current HTTP/2 network protocol enhanced the process of loading several photos at once, lazy loading below-the-fold images (particularly larger ones) can provide considerable performance benefits in some circumstances (particularly long-form media-heavy articles or images galleries for instance). The lazy loading strategy allows the website to finish loading even if several off-screen images do not begin loading until the visitor scrolls down the page. Although this strategy can enhance page performance, it can have a negative influence on picture indexing if not used correctly.

Note: If you’re going to build an endless scroll experience, make sure to enable paginated loading, possibly using additional tags for pictures, and so on.

Image sitemaps can also aid with indexing if discovery and crawling are difficult. Including photos in your structured data on your page boosts the likelihood of a carousel or rich result (images badges).

Scale your images to their actual display size: Another area of optimization that is frequently overlooked is ensuring that you are not supplying larger images than are required to display correctly in the browser window. Pages frequently load images, which are then scaled down by browsers to match users’ screen configurations: it is critical not to provide images that are wider than the user’s window can display in order to save unnecessary bytes.

Right-click an image in your web browser, select Inspect, and hover over the img element to see the original (or “natural”) picture dimension as well as the browser’s scaled-down version. Ideally, they should be as near together as feasible.

It is also crucial to remember that if you want your photos to be indexed and ranked in Google Images, you should use the usual HTML element; Google has historically not indexed resources loaded as background images using CSS. Also, make sure that your robots.txt rules do not prohibit your photographs from being crawled.

How to audit images on your site

Site owners, developers, and webmasters can usually immediately identify the worst offenders by sorting their FTP picture folder(s) by size. Examine the Images tab and sort by size when auditing third-party sites using crawlers like Screaming Frog:

Select an image URL and then click the “Inlinks” tab to inspect the embedding page and ensure that any large images are lazy-loaded and/or could benefit from improved compression.

On a manual page-by-page audit, Google Lighthouse and PageSpeed Insights audit tools can report on image compression and cache settings (note that there are techniques to batch analyze URLs using a command-line interface as well):

Image search performance reporting

Reporting on image search with Google Analytics has traditionally been difficult. Google updated image traffic several times over the years (moving from referral to organic, from google.com/imgres to images.google.com, etc.) before finally admitting that the easiest place to report on your site’s image search performance is via Google Search Console.

To see image performance on Google, sign in to your verified Search Console property, then navigate to the Performance report, change the search type to “Image,” and click “Apply”:

In Search Console, you can limit your search to images.

You’ll be able to view the same KPIs and data like search queries, such as clicks, impressions, average CTR, position, queries, pages, countries, and devices, from there.

What you should know about Search Console image reporting:

• The actual image file names will not be displayed in SERPs, but rather the pages on which they are embedded (host pages); this implies that the technique does not distinguish between different photos on the same page.
• Because the number of results displayed per row and page is partly determined by the width of the screen, the position merely approximates how far down the image appeared (position are counted from left to right and top to bottom)
• If an image appears in the conventional web SERPs (rather than the Images tab), its clicks, impressions, and placements are recorded separately in the regular Web results.
• Only clicks that take viewers to the page housing the image(s) are counted as such; whereas impressions record everything (thumbnail or enlarged picture) but only count once per host URL (multiple images displayed in SERPs from the same URL would only record a single page impression)

Image recognition and new image search features

With Google’s reverse image search capabilities, Google Lens, and newer AI and machine learning products like Vision AI (which you can test here by uploading a picture), it is clear that Google is making progress in understanding what’s within images, both in terms of objects and text, and it would make sense for images to play a larger role in SEO in the near future.

With the recent introduction of “shoppable advertising on picture search,” it appears that more Image Search modifications are on the way. Product schema markups, including carefully selected photos, are now more vital than ever for e-commerce websites. Although primarily active on mobile, we can see Google’s direction with their recently redesigned Product markup page, where schema “product” labels include price, availability, and reviews directly within Image Search:

Google, like advertisers, recognizes image search’s potential as an inspirational and visual discovery tool that can be monetized and exploited for traffic, as evidenced by the interest in Amazon Spark and Pinterest (which recently went public).

Conclusion

When it comes to visuals, there is almost certainly more to them than meets the eye. Images on the web are sometimes disregarded and underrated, yet their importance is expanding for a variety of reasons, ranging from just supporting user experience and content to helping consumers to visually find more things directly through image search. Depending on your business kind and aims, optimization and execution might vary widely, so start with the end in mind and convey the best plan to your editorial staff to collect as much (transactional) traffic as possible!