Everything you need to know about image optimization

Images have already become such a natural part of the way we search for things that we hardly can imagine how to do without them. Rich snippets, as well as other SERP features, contain images, and there might be an Image Pack shown somewhere in the results. Visual search performed directly on Google, using Google Images, or via Google Lens is expanding, pushing businesses to think harder about image SEO and visual content in general.

Talking numbers, Google Images had a 22.6% share of all web searches in 2018 and visual search via Google Lens hit a billion in 2019. At that time, Google’s representatives were announcing that images were becoming “a bigger topic” and several data sources cited by Search Engine Land confirmed the trend of more images showing up in the SERPs.

Here’s how the Image Pack looks like at the top of the results page:

Or between the top results:

Visual content not only plays a vital role in how users perceive a web page and engage with it but also allows websites to become more visible in search. With that said, to generate more traffic and attract target visitors to your website, you absolutely need to optimize images. If you make it to the Image Pack, you’ll get more clicks from users on both pictures themselves and pages that contain them. In this article, we’ll go through the best practices of image SEO, moving from the very basics to advanced technicalities.

Five pillars of image SEO

Regardless of the format you choose, you should optimize your images so that they can be understood by search engines properly. The factors that impact website rankings are: 

• Quality and resolution. Search engines prefer high-quality high-resolution images. It’s recommended they are at least 1200 pixels wide for the height of 800 px (but the exact size will depend on your particular goals). You can offer the opportunity to open the image in a new tab or embedded window in a higher resolution: if you’ve created original photographs, illustrations, or infographics, give readers the chance to view them in better quality.
• Accessibility. Users with visual impairments won’t be able to learn what’s on the picture unless you provide a descriptive alt text. Alt is what will be shown if the image won’t load so make the text informative. Making images accessible also allows for better voice search and helps mobile users who turn image loading off. You should also avoid embedding text inside images because not all users can access text in images and page translations won’t include it.
• Context. The major thing to ask yourself before putting an image to a website is how well it fits into the context of the page. There’s no point in padding your content with images just because it looks better with some visuals. For example, if you’re writing a post about how to make coffee without a coffee maker and put nice stock images of coffee cups or coffee beans, they don’t add much value to your content. But if you illustrate each coffee making method with a respective image (like a photo of a DIY coffee brewing bag), it will be more helpful to your readers. 
• Uniqueness. Photographs, illustrations, and infographics customly made for your website are always better than stock images. Unoriginal content is discouraged by Google, as it’s said in content-specific guidelines.
• Speed optimization and responsive images. It’s crucial to have a fast-loading website, especially given the fact that images account for the majority of bytes on a page. Making images adjustable to any screen is also crucial as you never know what type of device people will use to access your content. If your page loads fast and uses HTML frameworks optimized for the AMP technology, mobile users will see the AMP logo in search results:

Best practices to help Google crawl and index your images

Now, as we know what aspects of visual materials matter for search rankings, let’s move to the basic rules you need to follow to keep your images SEO-friendly.

Official guidelines by Google state that valuing great user experience is the number one helpful image practice. So, if your images provide additional information to users and are placed near relevant text, then you’re on the right track. Other Google recommendations include:

• Creating a comprehensible URL structure for images. Just like with a website URL structure, your image URLs should reflect content hierarchy and indicate the essence of the picture. Note that if you decide to change image URLs at some point, it will take additional time for search engines to reprocess and reindex them.
• Adding structured data. We’ll cover this in more detail later but in short, structured data refers to identifiable types of content like a product or a recipe. 

Here’s how a product indicator looks like in Google Images:

• Following the SafeSearch guidelines. Image search on Google has a SafeSearch filter for users to block explicit content. Be careful with the images that might have some indicators of adult or violent content because if Google’s algorithms identify your image as objectionable, your page will be hidden from search results for users who turn on the SafeSearch filter. The Vision AI tool can give you insights on how Google detects images. If you do have adult-only images, group them separately in the URL structure and add metadata like <meta name=”rating” content=”adult” /> to your pages.
• Using descriptive alt text, titles, captions, filenames. Random or non-informative text in the alt attribute, image title, caption, and name can harm your SEO as users and search engines won’t get important clues about the content. We’ll explain these in more detail while discussing technical image optimization.
• Creating an image sitemap. You can include information about images in a website sitemap or create a separate .xml file. This will help Google navigate through your content. There are plenty of services and plugins that generate sitemaps and can help create an image sitemap. You can also learn more about image sitemaps from Google Search Central.

Different image formats and their impact on SEO

The first thing to know about visual materials is that they can weigh a lot and therefore damage your website’s load speed and performance. On average, images account for 21% of a page weight. Since page load is among the pillars of technical SEO which, in its turn, is the basis for any other SEO efforts, don’t underestimate optimizing image sizes.

Image formats you can use

Image formats differ in their quality and size limitations so let’s take a look at the major ones:

• JPEG is the most common image type that allows balancing quality and size. It’s a compressed image file that comes with a loss in quality.
• PNG provides better quality but leaves you with a larger file size. It also lets you preserve background transparency. It’s generally advised to use JPEG for photographs and PNG for practically everything else including infographics and various design elements.
• BMP is another format that allows for high-quality graphics and is indexed by Google. You won’t be able to compress BMP files unless you convert them to JPEG or PNG.
• WebP is a relatively new format which is promising in terms of powerful compression. Impressive reduction in size can improve your site speed: when YouTube switched to using WebP for thumbnails in 2014, the page load speed increased 10 times. The problem is that not every browser supports WebP at the moment. There are plugins like EWWW Image Optimizer that display WebP images on browsers that support them and show other formats to those that don’t.
• SVG is used for logos and icons. These are the smallest visual elements present on a website. It’s a simple and universal format, but it has some design-specific cons to it like potential problems with fonts. It’s advised not to use Inline SVG (with its code put right into the HTML) for better indexation in Google Images. 
• GIF is an engaging type of content that can drive visitors and shares. Google crawls GIFs just like any other image type but the obvious drawback is that GIFs can slow down a website.

The power of compression

When you’ve decided on formats you’re going to use and converted all the images, it’s time to find a powerful compression tool to optimize your page load speed.

There are an array of compression tools (from Photoshop to online services like Imagify) you can use to get the desirable image size. You can also choose a plugin that will do it for you but make sure that compression happens externally and not on your site’s servers.

Like many others, online image compression Optimizilla lets you adjust the quality and see a preview of a compressed image:

How to get quality and unique images

Search engines value original content and it’s easier to get to the top with unique visuals. Naturally, searchers also appreciate exploring web pages with original images that fit the context. However, it’s not always possible to create custom visuals so let’s see how to deal with stock libraries and how to edit images to make them look unique.

Are stock images bad for SEO?

Answering a question on Twitter, John Mueller claimed that using stock photos won’t hurt website rankings in Google’s regular search but might cause problems for presence in Google Images. 

If you’re on a tight budget and need your pages to go live without hiring illustrators, then stock libraries are of great help. When choosing images, think how relevant they are to your content and how they would look in a featured snippet. Explore Unsplash, Shutterstock, Depositphotos, or other galleries and compare how many licenced images you can download and in what resolution.

However, vote in favor of custom visuals whenever possible. They will engage users better and bring more conversions to your business. Many stock image cliches have become such a laughing stock that people can’t stop ranting about them. 

Image builders and editing tools

There are plenty of tools like Visme and Canva used and advised by SEO professionals that allow combining various templates and design elements. If you need a simple chart or infographic, you can use them to create visuals for your website.

You can also modify a non-unique image using these tools. Here are some other things you can do to make stock images look unique:

• Flip it. Making a horizontal flip is one of the simplest techniques you can use to modify an image. However, in most cases, Google will know that this is a slightly altered image that is also used elsewhere. 
• Crop it. You can easily change the image composition by selecting an area and cropping it. 
• Adjust brightness and contrast levels. You can use either auto-enhancing tools that will automatically detect what to change or professional software like Photoshop to manually adjust brightness and contrast.
• Add filters and effects. There are a lot of free and paid filters available online that can give pictures an artistic, retro, or some other look.
• Remove items. If you don’t need some of the objects from the picture, you can remove them using editing tools.

Image theft prevention

Working with custom-made visual content, you probably don’t want others to copy and use it on their websites without your permission. To prevent image theft, you’ll need to apply copyright-related metadata. IPTC Photo Standard is a universally recognized standard to describe photos and their copyright information in particular.

Different fields related to image credits were introduced by Google in 2018 and then expanded in 2020. Now, you can specify creator and licence information by using the IPTC Photo Standard. These are the fields you can include:

• Creator. Photographer’s name or organization if the photographer can’t be identified.
• Credit line. It can define the photographer’s name, as well as company or organization that is the provider of the image.
• Copyright notice. Used for claiming intellectual property.
• Web Statement of Rights. It’s a valid URL of the page with the licence information.
• Licensor URL. Contains a link to a page where users can buy the displayed photo.

Google accumulates this information and shows it in the search results. Here’s how copyright metadata looks like in Google Images:

Images can be filtered by usage rights in search: there are Creative Commons licenses and commercial licenses. It’s important that your content gets into a proper category.

Using metadata is the best way to protect your content from theft. Imatag 2018 survey showed that filling metadata fields about copyright is the number one method for photographers to secure their works. But even though 90% of respondents admitted using metadata, 48% stated that they still had experienced theft. 

Unfortunately, there are no bulletproof methods to protecting original visual content from being downloaded, manipulated, and used by third parties. Metadata can be deleted, images can be reversed to manipulate search results, watermarks can also be cropped out. Speaking of watermarks, in 2017, Google suggested using a random wrapping technique to improve unauthorized use prevention. But watermarks don’t look good on images: they might work for stock libraries but they will probably be disturbing for users just exploring an article. Watermarks can also negatively impact how users perceive an image in the search results so it will be clicked on less often. Although copyright protection methods don’t directly influence image rankings, they are important for the user experience, which is a vital ranking factor.

Technical image optimization

We’ve already touched on the importance of image attributes and structured data for image SEO. Let’s take a closer look at all the technicalities.

Loading images asynchronously

The technique called lazy loading makes images load asynchronously: it means that a user won’t see the whole content of the page unless they scroll down to the places where it’s located. You’ve probably seen it multiple times, when image placeholders are replaced with images in sync with you moving down the page.

If placeholders aren’t used, lazy loading can shift the layout of the page and disorient users. If you go for lazy image loading, make sure you use placeholders occupying the same part of the screen as the actual image. 

Using lazy load makes sense only if you have a lot of images on a page. To apply the technique, you can use plugins like Native Image Lazy Loading or manually add it to the code. You need to add the lazyload class to the img tag, specify the placeholder and the original image in the src and data-src attributes:

<img class="lazyload"
     src="placeholder.jpg"
     data-src="image.jpg"
     alt="image description">

JavaScript processes these instructions and is responsible for the lazy load functionality. Since it may not be supported by all browsers, you should add the <noscript> tag for images to be shown when JavaScript is unavailable. 

Another way of loading content asynchronously is decoding: an image is converted, stored in the browser’s cache, and shown to a user as they scroll through the page. With the decoding attribute, you can distribute the load and tell the browser what to load and when. There are three options:

• <img decoding=”async” src=”image.png”> suggest the browser that the decoding process can be deferred
• <img decoding=”sync” src=”image.png”> tells the opposite
• <img decoding=”auto” src=”image.png”> lets the browser decide on its own when to decode an image

Using multiple ratios to consider different devices

Formerly, it would be enough to provide a single version of an image. Now, Google encourages to specify several aspect ratios for images to be shown correctly on different screens. The srcset attribute is used for specifying different resolutions as well as image thumbnails. Google will index the main image put in the src attribute, while srcset will give browsers the opportunity to load the right size of the image. 

<img src="image.jpg"
          srcset="small.jpg 500w,
                        medium.jpg 640w,
                        big.jpg 1024w"
          alt="image description">

Most popular CMSs have evolved to make images responsive automatically. WordPress pioneered this opportunity in 2015: starting from the version 4.4., users just need to upload their images, and the srcset and sizes attributes will be filled by WordPress. The only thing to care about is whether images have an accurate sizes attribute—it’s possible to check it in the functions.php file. Shopify introduced automatic responsive images in 2018; Magento offers several themes with this option. Some other CMSs that don’t make images adjustable to different sizes automatically provide a specific tool to set the accurate parameters: for example, Drupal 8 and later versions have the Responsive Image module. Learn more about different platforms from our article on choosing the most SEO-friendly CMS. 

Describing your image in alt, title, caption, and filename

• Alt text. Adding a descriptive alt text helps you improve your rankings by associating your images with relevant queries. It’s also an accessibility requirement since alt text is the only option for people who can’t see the image to understand what it’s about. If an image doesn’t have the alt attribute, search engines will think it’s not important and therefore won’t rank it well. And if an image has the alt attribute but without any text, it will be perceived in the context of the text it’s placed next to.

Here’s how adding alt text works in WordPress:

• Title. The Title text is shown when a user hovers over an image. It’s not as crucial for SEO as the alt attribute but Google recommends including it anyway. Contrary to the alt text, you can write a title that describes context rather than an individual image. But keep it short and don’t stuff it with keywords.

As you can see from the example below, the title text often acts as a tooltip which isn’t very helpful and doesn’t add much information to what’s presented on the image:

• Caption. It’s an additional phrase you can put below an image to accentuate some thought related to the image itself and its context. Sometimes, it’s better not to use any captions as it won’t add anything important to the image.

Here’s an example of a naturally placed caption:

• Image URL. Image URLs should follow your site’s structure: for example, by going from category to subcategory to page to particular image.
• Filename. Search engines also scan names of image files so don’t miss the opportunity to name them properly. The filename should be descriptive but not very long, can contain your target keyword, and should have words separated by a hyphen. For example, if the photo shows a tropical green smoothie, it’s best to name the file “tropical-green-smoothie” instead of leaving the default name generated by a camera like IMG_7489. 

Filename, alt, and title, as well as width and height data, are included in the src attribute that marks the image. For example:

<img src="tropical-green-smoothie.png"
     alt="green smoothie with tropical fruits"
     title="recipe of a healthy green smoothie"
     width="500" height="600">

Schema markup for different types of content

Images can help identify a specific type of content on a page, such as product, recipe, or video. Each of them has a label displayed in search results on desktop and mobile devices. Mobile search will also have the Product label as a separate option on the settings tab:

These labels are created thanks to structured data, also called schema markup. It’s important to optimize your images located on pages with specific content so that searchers could easily navigate the SERPs to find exactly what they are looking for. A branded logo that might be displayed in Google’s Knowledge Graph can also be specified with the help of schema markup.

To add schema markup, you can use plugins like Schema App Structured Data, consult Google Structured Data Markup Helper, or manually add the code to your website. Make sure to choose JSON-LD over Microdata because Google prefers this scripting language.

For example, Google Structured Data Markup Helper offers a 3-step process and provides instructions each step of the way. You choose the type of content your page represents and then select an image and fill the required fields. The system will generate the code that you need to insert into the source code of your web page.

Setting the right image for social shares with Open Graph tags

The Open Graph protocol helps you control what content will be displayed on social media when your page is shared. You should set a particular image for platforms to load because otherwise, they can scrape something irrelevant or don’t show anything at all. 

Two examples of sharing an article on Twitter:

Images for social shares can be set automatically by a CMS but if you don’t use any, you’ll need to manually assign the og:image tag for each web page. You can make a separate image for social media and don’t use it on the page itself. 

Here’s how adding a picture for Facebook and Twitter preview works in WordPress:

Adding a Pinterest Save button

Speaking of social shares, it’s nice to have a Pinterest button attached to your visuals. Providing the option to save your image on Pinterest boards might increase awareness of your business. A whopping 98% of Pinterest users reported trying new things they find thanks to the service, so it’s your chance to attract your target and credit-worthy audience.

Pinterest provides instructions on how to add their Save button to web pages but many CMSs can let you do that even easier—for instance, with the help of a plugin in WordPress or using built-in functionality in Squarespace.

The example below has a Pinterest button and a higher resolution view option: 

Image check in SE Ranking

You can audit your site images using SE Ranking. The Image analysis section in the Website Audit will show a list of images missing the alt text and images that are too big. Make sure to fill the alt attribute for each picture on your website and reduce their size to speed up your website’s load times. Learn more about what aspects to check from our article on doing a site audit the right way.

On-Page SEO Checker also checks if the alt text is there. Besides, the tool analyzes if the visuals are unique and makes recommendations regarding image filenames.

Since the main purpose of the tool is to assess how well a given page is optimized for a target keyword, you’ll also see if your images contain that keyword in alt. 

Given that images are key elements of most SERP features, you can review which of them your website has using the Rankings table:

Summary

When optimized properly, images can greatly improve your website’s search visibility and serve for better user engagement. With visual search being on the rise, don’t underestimate the value of images and follow all essential Google’s recommendations regarding resolutions, alt and other attributes, and structured data. But before anything else, add visuals to your pages if they fit the context and vote for original content that adds value to website visitors.

Written by

Anastasia Osypenko

A content marketer and editor at SE Ranking, Anastasia writes about SEO, marketing, and tech. Besides covering various topics for SE Ranking, she spends time making music, watching old movies, and playing with her dog.