Publisher growth tactics for election season | WEBINAR
Publisher growth tactics for election season | WEBINAR
Through this module, you’ll learn what image optimization is, its importance to SEO, the best practices to use it effectively and the common pitfalls to avoid when optimizing images.
Video Duration
19:24
Answer Quiz
Take current module quiz
Materials
Ready-to-use templates
Resources
Reports and Resources
No quizzes to show for this module.
Image optimization is applying best practices to the images you use on your page so that your content ranks better on search engine results pages (SERPs).
Internet users have shown an increased preference for greater visual content. This means optimizing images is as important as optimizing the text in your content.
Image optimization is used in order to produce images in the best possible format, size and resolution to enhance the user experience (UX). For Google to be able to properly index the image and crawl it, to display it in SERPs, the image should be optimized in line with Google’s guidelines, and appropriately identified with the relevant metadata.
In this module, we’ll take a deeper dive into the salient aspects of image optimization.
Images are content, too. As with text, they show up in search results and influence how useful a reader finds your page. Here is why optimizing images matters for SEO.
For most pages, images make up over 70% of their weight, which means using unoptimized images can slow down loading times. Since site speed is an important ranking factor, this directly impacts SEO. Beyond site speed, unoptimized images can also impact user experience by causing issues such as layout shifts.
These factors impact the core web vitals (CWVs) of your site which Google uses to measure page experience.
For more on CWVs, see our detailed page experience module here.
Image optimization involves correctly identifying and labeling images using alt text and structured data, adding images to sitemaps and creating new sitemaps for images. All these help web crawlers quickly and correctly identify and process the images on a page, thereby improving crawling speed and efficiency.
Google searches are becoming more visual, rather than solely being about text-based keywords alone. The number of images on Google have soared over the last decade, making it more important than ever to optimize your image.
As early as 2018, Google announced its commitment to make visual content more central to search. Consequently, Google rolled out several newer functionalities — such as Captions, Quick Facts and Related Searches — all of which rely heavily on images. As a publisher, tapping into these features will likely directly impact your SEO and content discoverability.
Take a look at what happens when we search for the FIFA World Cup in Qatar.
There is now a dedicated side panel on the right showing images, which features right above the Wikipedia entry for the search term.
Clicking on the Images tab doesn’t just expand on the number of browsable image options, but as we can see in the green box below it now offers a carousel of suggested terms that allow you to filter images by name.
Scrolling further down (as shown in the image below) reveals more recommendations for related searches that can aid in narrowing down the results or expanding the query.
Having images from your content rank in the top images is another way for publishers to enhance content discovery.
Google has also been developing and updating Google Lens — its AI-enabled image recognition technology that’s found in the search bar of the Google app for iOS and Android
— to make it even more powerful.
With Google Lens, users can search for more information about images either by clicking a picture of something or by uploading a picture stored on their phone, then asking Google to bring up matches.
A powerful feature of Google Lens is multisearch, which allows users to add text descriptions to image searches to make it easier to search for visual information.
Google is also working to make multisearch more local, which means users can point their cameras at something, upload it to Google Lens, type in some questions, and Google will show the best results close to their present location.
Despite its obvious significance, publishers often tend to struggle with image optimization due to some commonly observed challenges.
When it comes to optimizing content for text, publishers often know which parameters to monitor and optimize — keywords, content pillars and clusters, headers and titles, etc.
However, when it comes to image optimization, publishers may not be aware of which metrics to monitor and improve. Common metrics include image size, image type and loading speed, to name few.
With regularly optimzing images for the many articles you create, doing this can make this a tedious task. Whilst there are ways of bulk optimizing images, such using plugins and using a CDN, maintaining image quality is also important. It’s a balance that is important to achieve through rigorous testing.
Now that we understand what image optimization is and why it’s important for SEO, we can begin looking at how to go about the optimization process.
PNG and JPEG are the two most popular and universally supported image formats. Knowing which of the two to use in which situation is important.
While PNG works well for screenshots, graphics and images with text in them, JPEG is good for photographs. PNG uses lossless compression which helps it retain image quality, while JPEG reduces image quality each time it is saved in the format.
SVG (scalable vector format) is ideal for logos and simple geometric shapes with low image complexity.
Newer formats such as WebP and AVIF are rapidly gaining popularity as alternatives to the above formats. While both formats provide higher quality resolution along with the capability to support animation, WebP in particular is supported across all modern web and mobile browsers.
On the whole however, PNG and JPEG/JPG remain by far the most popular image formats used by 81.3% and 76.6% of all websites respectively, with SVG following closely behind, as of November 2022.
The collective size of images on your page has a direct impact on its speed of loading. However, compression should not result in subpar image quality.
Finding the right balance between quality and size is essential, but can be cumbersome if you try to do so through trial and error. However, this is where online tools can really shine. Tools such as Imagemin can be used to compress images across various formats in both lossy and lossless scenarios.
Using the right format can help you find the apt balance as well. For example, consider using WebP. WebP is a better alternative to JPEG as it can provide a 30% lower image size without impacting its quality and resolution.
If WordPress is your CMS of choice, then you can use a plug-in like Smush, Optimus or Imsanity to optimize your images. These help you compress, resize, lazy load images and more. You can also look at replacing animated pictures like GIFs (that can be large in size) with CSS. CSS animation and effects can help you create complex images that retain resolution integrity and quality even through high zooming.
An image name helps Google understand the image’s context when it comes to ranking it in the SERP. For larger publications, it might not always be feasible to carefully name all the images on the site. In this scenario, you can create an image sitemap that can help Google locate the image, understand its purpose and index it.
Apart from contextual file names, we also recommend adding a title and caption for the image. While these are optional attributes, they complement your content by giving the search engine a more holistic understanding of your topic and theme, thus helping it better index the image.
How To Do This
Image names need to be added in your page’s source code. This is done using the img src attribute either manually or a CMS plug-in.
If your image contains a football, then the code for the image source should look something like this <img src=”football.jpg”/>, which helps Google understand what the image contains. On the other hand, code that looks like this <img src=”IMG11082022.jpg”/> is vague and doesn’t offer any context.
When people cannot see your images — an issue for those with a visual impairment or when low bandwidth makes rendering your images difficult — Alt Text attributes help to describe the image for them. This also helps search engines to crawl and index your images more easily.
How To Do This
Continuing with the example from the point above, the code for Alt Text should appear kike so <img src=”football.jpg” alt=”world cup official football on the ground”/>.
If you’re an experienced developer then you can add the alt text manually in your page’s code. If you use WordPress, then you can follow these steps:
By adding structured data to your images, you can give Google the necessary information to list them as rich results and snippets. This gives users more information helping them choose which link to click, thereby driving more traffic to your page.
At present, Google supports structured data for images across products, videos and recipes schema.
How To Do This
Google recommends using JSON-LD for creating structured data scripts for your content and images.
Structured data can easily be added using one of the several free or premium plug-ins such as Schema Pro, Schema.press, etc. Whether you add image structure data manually or through a plug-in, the steps will involve adding values for all the relevant image properties and data types, validating the code using the Rich Results test and then implementing it by submitting the image sitemap to Google for it to be able to crawl and index the images.
To understand more about structured data and how to use it, see our module on schema.
To learn how to create and submit sitemaps, see our detailed module on Google News sitemaps.
Page experience is an important criterion that Google uses when ranking pages. One of the elements that make up page experience is loading speed.
Here’s how you can optimize images to improve page load speed:
In it, only the critical resources are loaded in the beginning, while other low-priority resources are loaded on an as-needed basis. The benefits of lazy loading include reduced network traffic and associated bandwidth issues and data usage costs, improved readability of long pages, reduced loading of inline images that are not adding value to the content, etc.
Create Responsive Images
Users view images across a variety of devices. Implementing the srcset attribute for different devices allows the image to appear legibly across different screen sizes. Here’s an example of the img scrset code:
We’ve covered the essentials of image optimization. However, the points listed below also go a long way in helping to optimize images for SEO.
All the imagery in the world cannot offset low-quality content. The primary focus should be the content aimed at meeting the users’ needs. Images should be an organic extension of it and be used as an aid in the overall storytelling process. Peppering your page with images that are irrelevant or unrelated will not boost your ranking.
On the contrary, Google is against such practices and recommends using original content as much as possible. High-quality content is the surest ensuring your page ranks well in Google Search, including the images you use.
The content around the image provides vital information to users and the search engine regarding the image’s relevance. Google recommends placing the most important image close to the top of your page.
While it’s a matter of debate whether images placed further down the page rank as well as the ones towards the top, it’s best to follow Google’s guidelines on the subject.
All your efforts for image optimization are unlikely to yield results if your images are not accessible to Googlebot as a result of robots.txt or no-index settings.
These tell Google not to index or crawl your content, which in turn means it will not appear on the search results. You can use the “Inspect URL” feature on GSC to test the accessibility of content and images.
Furthermore, we also recommend checking to see whether a SafeSearch filter applies to you content in any way. SafeSearch is a user setting provided by Google that allows or blocks images with explicit content and requires sites to label the content appropriately.
Not only is testing important for discoverability, it’s also valuable to test how your images will actually appear across devices, before going live on-page. Google also offers immersive visual content with stories as part of its Web Stories format. While this is specifically designed to bring mobile-friendly visual content, the images and text also appear in Google Images and Discover. You can use the “Developer Preview” feature to test your content for more compelling storytelling.
Copyright free images are available from a number of sources such as Pixabay, Unsplash and Pexels to name a few. While these may be free to use, remember that the same image may have been used by several other content creators.
According to Google’s John Mueller, this can make it harder for the image to rank on Google image search. As far as possible, try to use original images.
Besides following the previous guidelines, it’s also important to avoid these common pitfalls to better optimize your images.
As mentioned earlier, using a descriptive Alt Text makes your images more accessible to users. Google will take cognizance of your Alt Text attributes and tend to rank them higher.
However, it’s easy to be tempted to pack in keywords with the aim of ranking high in SERPs. This is known as keyword stuffing and can be detrimental to your efforts. Not only may it lead to a poor user experience, but Google may also deem your page spam.
Here are a few examples of mistakes to avoid and Alt Text done right.
Verdict: Bad, since it is missing alt text attribute
Verdict: Bad, due to keyword stuffing.
Verdict: Good, but it should be more descriptive.
Verdict: Ideal
While Google has in-built optical character recognition (OCR) technology to read the text imprinted on images, it might not be 100% accurate each time. Moreover, both users and search engines may not be able to decipher the text embedded in the image.
If you have important information to convey it is better to use text instead of an image.
It probably won’t be possible to use original images every single time. In such cases, you might be tempted to use Google search to find new images. However, some of those images may be copyrighted, restricting their use. This means you need to check the image’s terms of reusability before using it on your page.
Google Images offers a filter known as “Usage Rights” to search for images that come with license information tagged to them by the host site or the image provider. This feature is available in the “Tools” section under the search box.
After selecting the image you can check the license details to understand the implications, costs (if any) and requirements of the usage of the image.
As you can see in the screenshot above, under “Usage Rights” the license options of Creative Commons and Commercial or other are apparent.
Generally, images with a creative commons license are free to use, but may require that credit be given and source stated. Images with a commercial license usually come with a cost of usage. Google recommends reviewing the license details before using any image on your page.
The max-image-preview setting allows you to set the maximum size for the image’s preview when it appears on SERPs. If there is no value for this setting, Google will display the image in its default size.
While this applies to all Google surfaces such as images, search and Discover, it is more pertinent when using Discover where larger formats make for a richer UX.
Using max image preview attribute has been documented to improve CTR and traffic for several publishers. Using this attribute allows Google to display large images in the preview as they are, without trying to compress them or change their settings. Having large, high-quality images in the preview itself is more likely to capture searchers’ interest.
Content delivery networks (CDNs) are outsourced hosting platforms that serve as a repository for images and other media files. Due to their advanced infrastructure that focuses on latency and bandwidth issues, they can offer quicker page load speeds than in-house hosted material. However, the benefits of CDN need to be evaluated for your specific needs.
While a CDN can help solve a few technical issues it may hurt your backlink profile. Backlinks are one of the highest-ranking SEO factors and are valuable to your site’s appearance in search results. You can learn more about the value of backlinks in our module on the subject.
When you host an image on a CDN instead of your own site, any backlinks to it will take the user to the CDN’s path for the image, thereby reducing the direct visits to your site that an effective backlink would have provided.
An image pack is a collage of images from different websites that can appear in Google SERPs. They look something like this.
When you click on any of the thumbnails, however, you are not automatically routed to the source site. Instead, you are shown a Google Images window with an expanded version of that image, like so.
It’s only upon clicking the image again — as seen on the right panel of the screenshot above — that you’ll leave Google and arrive on the source page. In other words, Google Images acts as an intermediary here before the routing action is completed.
If your image is part of an image pack, Google Search Console (GSC) will record an impression for that image each time the pack is loaded in a SERP. This is thanks to your image tag’s title attribute containing your URL.
But while you may record a high number of impressions, the actual number of clicks to your site is likely to be much lower thanks to the fact image packs contain query refinement links that generate a new Google Image search result rather than directing searchers off platform.
Because of the way query refinement links work, as well as how GSC counts impressions and clicks, image packs can dramatically distort your click-through rate (CTR) for images.
We now turn to a case study of a website to deconstruct how it has implemented the guidelines mentioned in this module to optimize images.
Kirbie Cravings is a San Diego-based food blog that has published hundreds of recipes on its site. Each recipe is accompanied by vivid and high-quality images.
When we right click on the page and view its source code, we see the max-image-preview:large attribute in the <head> element right at the beginning of the source code.
As a result, the publisher’s high-quality images appear in previews on Google surfaces.
At the same time, despite being large, these images do not slow down the page’s loading time.
We right click on the image and select “inspect”. This opens up a panel on the right hand side of the page in which we can inspect the properties of the selected element on the page. We see the following for the above image:
We see two interesting things here:
As we’d discussed earlier, images contribute the bulk of heft to a page’s weight, so keeping them light is essential to speeding up your page loading.
We’ve also discussed the importance of using the correct file format. We’d recommended .jpg/.jpeg for photographs, while .png should be used for graphics and digital images. We can see below that Kirbie Cravings uses .png wherever it’s used digital images such as logos and icons.
Next, within this same inspection panel, when we click on “Properties” we can see the page has used lazy loading, despite the relatively light weight of the images.
This page has meticulously optimized its images by:
As it evolves to better serve its users’ needs, Google is bound to add/update features and policies regarding image optimization and its impact on search results.
By keeping the current image best practices in mind when it comes to your website, you’ll be better positioned to provide the best UX, rank higher in SERPs and eventually drive traffic your way.
Active now
See more
