Facebook pixel

Image optimization for SEO in 2022

Image optimization for SEO in 2022

In 2021, most online journeys began with search engines.

A big part of the search is images. Users look for inspirations and visual explanations, narrow down search results, explore alternatives or visual product options using image search. The websites that focus on image SEO win the game here!

In this guide, we’re going to cover fundamentals you need to know about image optimization for SEO in 2022:

  • What image SEO is and why it’s important in a user’s journey
  • Best practices for image optimization as recommended by SEO experts
  • Automated image SEO options and frequently asked questions

What is image optimization in SEO?

Image SEO is a process of optimizing image properties so that search engines can easily find them and better understand the intent and context of the page. If done properly, image SEO has a substantial impact on search engine rankings.

Image SEO includes a few main aspects:

  • Image resizing and compression
  • Choosing appropriate file format
  • Writing comprehensive image alt text, title and caption

main elements of image seo optimization listed

Let’s take a more detailed look at how exactly image SEO improves your website’s performance.

Benefits of image optimization for SEO

Proper image SEO practices will improve these aspects of your website:

  • Rankings on search engines. After being crawled and indexed, well-optimized images help Google understand the content of your page better.
  • Website speed. Smaller image size is one of the most significant factors contributing to fast load times.
  • Bandwidth and storage space usage. Compressed images help with efficiency and server storage space.
  • User experience. Alt text is read to website visitors with visual impairment and displayed if images can’t be loaded.

Image optimization for SEO: best practices

The good news here is that image SEO is not that difficult. You just need to take these 12 tips into account and you’re good to go:

  • Create unique images
  • Use the right image formats
  • Reduce image size
  • Define image dimensions
  • Keep image quality high
  • Ensure your images are mobile-friendly
  • Add appropriate ALT text, image titles and captions
  • Add structured data
  • Create an image sitemap
  • Optimize all images for social media
  • Set images to lazy load
  • Leverage browser caching

Let’s cover every one of these image optimization tasks in more detail.

1. Create unique images

If you want your images to rank on the search engines and actually capture attention, they need to be unique.

Don’t use free stock images or simply a few pictures of your product from all angles. Instead, focus on giving them some more thought and personality. You can add your branding to the image or create a theme for your images that gets followed across all pages.

Think about how you scroll Instagram and only stop at images that stand out. The same behavior holds true on the search engines.

2. Use the right image formats

Most images that you see on the internet are in either one of the three formats - JPEG, PNG or GIF.

Since each image format uses a different compression method, they contribute differently to your overall page size. Some image files can weigh down your page speed significantly.

Google has confirmed that page load time is crucial to rank on both desktop and mobile. That’s why when you begin with image SEO, the first step is choosing the right image format. It should be a format that offers you the best compression while maintaining the best possible image quality.

Here is a breakdown of appropriate image format usage:

  • Choose JPEG for larger photos or illustrations
  • Use PNG when you want to preserve background transparency in images
  • Make use of WebP instead of JPEG and PNG for better compression
  • Use SVG for logos and icons only
  • Avoid GIFs altogether

Here’s a quick overview of all the image file formats you will typically see designers and marketers make use of:

main image file formats used in web and their use case examples

3. Reduce image size

One of the most crucial elements that factor into your page load time is the size of images. The heavier your image is, the longer it takes for the page to load and every second counts if you want to rank high on search engines.

If you’re not sure where to begin, start by identifying whether you need to reduce image sizes. You can do this using PageSpeed Insights.

Simply enter your website URL and if the size of your images is too big, the tool will recommend “properly size images” as an opportunity to you.

There are two straightforward ways to reduce image size:

  • By compressing the image. In this case, you can use an online tool like TinyIMG and apply a lossless compression method to reduce the size of your images.
  • By converting the image to another file format. Consider converting your images to WebP to reduce their size.

There won’t be much visual difference. And yet, with WebP your website speed will benefit the most.

Looking for image resize tool suggestions?

  • For WordPress websites, use Smush plugin. It will resize, optimize, and lazy load your visuals.
  • For Shopify stores, TinyIMG app is your one-stop-shop for image resizing, optimization as well as general SEO.

4. Define image dimensions

Image dimensions refer to the length and width of the image. Not having set dimensions can lead to certain issues:

  • You can have problems with website speed if your images are huge (for instance 4000x6000px).
  • Images can cause layout shifts. It means that as the shopper scrolls, the layout of your page changes because the browser has not allocated enough space for that element.

Avoid these and some other problems by defining the size of your images across the website. You can do so by adding HTML markup and informing browsers about the size of your on-page elements in advance.

Some image dimension recommendations:

  • For full-sized images that cover the entire screen, we recommend using 2400x1600px.
  • For images that appear within content should be sized at 1500x1000px max, but it can vary depending on the layouts you are using.

5. Keep the image quality high

There was a lot of talk in the previous points about image size reduction. That is not to say it should come at the expense of image quality.

If you run an online store, high-quality images are indispensable for good conversion rates. Customers will be reluctant to purchase your products if they are deprived of details. Image quality also plays a part in the brand image of your business.

Your best alternative for maintaining the balance between size and quality is using lossless compression or converting your images to WebP files.

6. Ensure your images are mobile-friendly

More than 50% of website traffic comes from mobile devices. If your images are not mobile-friendly and responsive to different screen sizes, they will not be able to deliver a consistent experience to all your target audience.

Thankfully, you don’t need to resize and upload all your images as per different screens.

As freeCodeCamp suggests, to make an image responsive, you need to give a new value to its width property. By doing so, the height of the image will adjust itself automatically. But the important part here is to know that you should be using only relative units like percentages instead of absolute units like pixels when defining the width.

You can also read the complete guide to responsive images.

7. Add image ALT text, title and captions

Alt text, title and captions are the written attributes of your image. They give the search engines a clear indication of what your image is about and help understand the context and intent of your content.

There are three things to consider:

  • Alt text. A quick description of the image, including a keyword that shows to people using a screen reader or when an image does not load on the page. To properly optimize image alt text for SEO, use the space to include keywords that apply to the specific image and be descriptive.
  • Image title and file name. While alt text should be your ultimate priority, file names add context to the visual and should follow the best practices. Title your images using descriptive words separated by hyphens.
  • Caption. Google refers to captions for a well-rounded understanding of the image. If the visual is of great importance to the content of the page, include a descriptive caption.

example of image alt text for a seo optimized image

8. Add structured data

One of the most recent image SEO necessities is adding structured data.

By using structured data, the search engine can display your images as rich results that include a prominent badge. This gives internet users relevant information about your image and the page, driving quality traffic to your website.

Here’s a look at what your images would look like if you provide the search engine with structured data:

Google Home device and Google Pixel displayed with rich snippets on search results

Some of the guidelines to keep in mind when creating structured data include:

  • Format (JSON-LD, microdata and RDFa)
  • Access (don’t block pages with structured data using noindex tag or robos.txt)
  • Content (follow Google webmaster quality guidelines and provide up-to-date information)
  • Images (all images must be crawlable and indexable)

For more information and detailed explanations, refer to Google guidelines on structured data.

9. Create an image sitemap

You can give the search engine additional details about your images and provide the URLs of the images that may be hard to discover using an image sitemap.

For example, here’s what an image sitemap looks like for two images:

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

<url>

<loc>http://example.com/sample.html</loc>

<image:image>

<image:loc>http://example.com/image.jpg</image:loc>

</image:image>

<image:image>

<image:loc>http://example.com/photo.jpg</image:loc>

</image:image>

</url>

</urlset>

Here’s an example of an image sitemap with a description for each image:

Example of image sitemap with Tag, Required and Description columns

10. Optimize all your images for social media

As internet users, we tend to share what we like on social media, be it links, images or videos. As a website owner, you need to ensure seamless social media sharing to make sure that your images are well-optimized for the different platforms.

This is where the Open Graph tags come in. These are the tags within the HTML code of your page that make sure when an image is shared on social media, the descriptive snippets are displayed accurately.

To check if you have social sharing enabled, try to create a mock post on any of the platforms. If a big, clickable image along with the link you’re sharing comes up, you have these tags implemented already.

checking if social sharing and open graph tags work by creating a mock post on a social media

11. Set images to lazy load

Lazy loading is a strategy wherein the browser is nudged to load images or any other media file only when they need to be shown on the screen. This does not impact how the other images are loaded, i.e., as you scroll.

Lazy loading can significantly speed up loading on long pages that include many images below the fold. It does so by loading them either as needed or when the primary content has finished loading and rendering.

The idea is to improve page load time. But at the same time, you have to ensure that the images an internet user came looking for are readily available on the web page.

To do this, you’re going to either learn a bit of Javascript, use a plugin like A3 Lazy Load or simply hire a developer.

Lazy loading is prone to bugs if implemented incorrectly. Check source code vs rendered code, because sometimes JavaScript swaps <data-src> and <src> correctly on desktop but not on mobile. Since Google renders pages mobile-first, in such cases it sees only the image URL stored in <src> but not in <data-src>, which can cause indexing issues.

12. Leverage browser caching

Browser caching refers to images getting stored in a visitor’s browser after their first visit. Next time they come to your site, the web page will load faster.

HTTP caching or browser caching can help speed up your page load time on repeat visits. Use this to your benefit by enabling browser caching for a set period of time on the buyer’s end.

Other useful image SEO tips

All of the steps above sounded familiar and you already practice most of them?

If you want to take extra measures, we have additional image SEO tips for you:

  • Complement image with relevant text, it helps establish context.
  • Don’t use text on images. It will hardly be visible to mobile users. Plus, Google won’t pick up on it so it adds no value to your page.
  • Check that your images are not blocked by robots.txt. You want all of your images indexed.

Image SEO optimization automation

If you have a big website or run a Shopify store, chances are the images on your website are abundant. Save time and implement automated image SEO practices by using plugins, extensions, or apps.

These tools will take care of image compression and resizing in batches without you having to lift a finger.

Here are a few solutions for image SEO optimization automation:

  • For WordPress websites, install a plugin such as Image SEO Optimizer, which applies automatic alt text.
  • If you’re a Shopify store owner, get TinyIMG app. It takes care of image optimization automatically plus includes general SEO features.

Image SEO - You can’t skip it!

Optimizing your images for the search engines ensures you are using every channel to reach and convert your audience. Even little details like the size of your images, description, alt texts and more can leverage the long-term benefits of search engine optimization.

In times when customer acquisition costs are growing by the day, grab the opportunity to drive organic traffic and get those conversions for free!

Use these tips we provide to conquer search engine rankings with your images. Best of luck!

Frequently asked questions

Do I need to implement image SEO practices?

Yes, it is important to implement image SEO to achieve satisfactory page speed, improve user experience and help Google understand your content better.

Which image format is the best for SEO?

​​PNG, JPEG, and GIF are popular image formats used on the internet. Each of these formats has its own benefits. But from an SEO standpoint, we recommend using JPEG for images with lots of colors and the PNG format for simpler images.

How to write image ALT text for SEO?

When writing alt texts for SEO-optimized images, make sure you include relevant keywords and use descriptive, natural language. And if you want to master alt text writing, read up more on image alt text optimization.

How image SEO helps to rank in Google?

When done strategically, images can be used to rank higher on the search engines. Images have the potential to rank on position zero and also rank in image search, leading to more organic visitors to your website. They also help the search engines understand what your content is about, boosting the rank of your web pages too.

About the author
Nikoleta Kokleviciute
Nikoleta is a Marketing Manager at TinyIMG, an app for image and SEO optimization for Shopify merchants. Nikoleta loves diving deep into digital marketing, eCommerce, social media trends, and creating content that benefits its readers!