Image optimization for SEO in 2023

Images play one of the leading roles in your website’s success. They make your content easier to read, resulting in a better user experience. Also, certain types of images, like infographics, increase the possibility of getting a backlink, better SERP ranking and visitors’ number growth.

It’s no secret that images can make your page load slower. Despite that, they are still a better visual option than videos or other heavy attachments. And the image you’re about to use can be SEO-optimized to leave a lesser impact on your page’s loading time.

In this article, you will learn why optimizing images for SEO is important. We will also walk you through the best 14 practices of image optimization for SEO and give you additional image SEO tips leading to faster and more efficient results. Read on, and make your website easier to find and enjoy.

What is image optimization in SEO?

In SEO, image optimization is a practice of adjusting image metrics to help search engines process it easier. Image SEO targets several main aspects – file sizes, formats, and names, dimensions, alt texts, and more.

Here’s the whole map of image optimization for SEO elements:

So, images themselves are only a single part of the overall context that Google is evaluating for rankings. That said, all image SEO compose parts should go hand in hand with each other to achieve profitable results. This way, you can have improved page loading speeds, more SERP visibility, superior positions in image search, and, potentially, better page rankings or backlinks.

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:

• Reduce image size
• Use proper image names
• Use the right image formats
• Create unique images
• Define image dimensions
• Keep image quality high
• Ensure your images are mobile-friendly
• Add appropriate ALT text
• Use descriptive 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. 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 a free online image compressor.
• 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.

2. Use proper image names

Descriptive file names are one of the key aspects that Google’s image SEO guide takes into account. Correct image names add context to the visual and make them easier to detect by the search engine.

A well-optimized image file name could like like this:

brown-leather-shoes-men.jpg

However, the one below is non-descriptive:

IMG_43354541.jpg

So, make sure you use precise and descriptive words to tell what the image represents. Additionally, it’s recommended to separate the words using hyphens.

3. 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:

4. 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.

5. 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.

6. 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.

7. 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.

8. Add image ALT texts

Alt text are the written attributes of your image. They give the search engines a clear indication of what your image is about.

The alt text itself is 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.

Here’s a simple but on-point example of how the alt text for your image could look like:

9. Use descriptive captions

Google refers to captions for a well-rounded understanding of the image. Unlike image titles and alt texts, captions aren’t a direct contribution to SEO. But it can strongly add up to the user’s experience, as it’s visible to a plain eye, as well as lower bounce rates.

However, it’s not recommended to put captions under each image, as you can over-optimize the page. Instead, follow a rule of thumb: if the visual is of great importance to the content of the page, only then include a descriptive caption.

10. 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:

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.

11. 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:

12. 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.

13. 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.

14. 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.

Benefits of image optimization for SEO

Image SEO can positively affect your website in several ways. It can be better SERP rankings, improved user engagement, and more. Here, you can find all the main benefits that proper image SEO practices will deliver to 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 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!

Curious to read more? Check out these articles:

• Blog Post Images - Best Practices
• A beginner’s guide to Mobile SEO
• Top 20 SEO Mistakes That You Should Avoid in 2023

Share

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!