How to Optimize Images for SEO: Beginner-Friendly Approach & Tools

It’s the 21st century, and images are becoming more prominent online.  This is evident with the statistics showing that images account for 15.8% of Google search traffic, articles with images get 94% more views, and 50% of online shoppers rely on images for purchasing decisions. 

However, relying on visual content for engagement comes at a cost – images are now major contributors to page weight across the internet. The more weighty a page is, the slower it may be, which may frustrate users. 

Therefore, website owners face a challenge: balancing engaging visitors with images while maintaining fast-loading websites. The solution lies in understanding SEO for images.

Optimizing your site’s images is equally important as you invest in content writing. This is because effective image optimization can:

• Improve visibility in Google’s search features
• Positively impact page speed
• Boost Click-Through Rates (CTR) by attracting users’ attention

In this beginner-friendly guide, we’ll uncover SEO best practices to help you maximize image usage on your website without sacrificing performance.

1. Use HTML Image Elements to Embed Images 

To get an image ranked on Google, the image needs to be easily accessible and indexed by Google. This is why embedding images using HTML <img> tags is critical. Google does not index images set as CSS background images (e.g., using background-image in CSS), but it can index images embedded within <img> tags, even if CSS controls the surrounding styling.

Here’s an example of an image code using HTML tags:

This method ensures that Google can access and index your image. Also, include descriptive alt text, as Google uses this to understand what the image represents.

Here’s how CSS might be used for styling an image to ensure the image is indexed:

<div class=”image-container”>

However, if you use CSS to embed an image using background-image, Google won’t index it:

.image-container {

  background-image: url(‘https://www.example.com/background.jpg’);

}

In this case, the image is only for visual purposes and won’t contribute to SEO.

2. Use Responsive Image Scaling

As the search rate on mobile devices increases daily, Google prioritizes mobile-first indexing. This means Google crawls the mobile version of a web page to understand the page before indexing, and Google will rank the page based on the mobile page content perspective. Even if a desktop version exists, Google prioritizes the mobile content for indexing and ranking purposes.

Now for images, it’s important to have images that can adjust and render optimally based on the screen size of the users’ device. This means that whether a user accesses an image with a phone, tablet, or desktop device, the image can fit into the user’s screen size. This offers a good user experience as users don’t have to zoom or scroll to see an image properly on their device.

Today, many content management systems (CMS), like WordPress, Wix, and Drupal, automatically offer responsive website designs and themes through their core functions. At the same time, you need to take responsibility for other image optimization processes like compressing, resizing them to appropriate dimensions, and ensuring they load quickly.

To make your images fully responsive, you can use the srcset attribute in your HTML to serve different image sizes based on the user’s device:

<img src=”small.jpg” srcset=”medium.jpg 600w, large.jpg 1200w” sizes=”(max-width: 600px) 100vw, 50vw” alt=”Example Image”>

This code helps deliver the right image size for the right device, enhancing user experience and page load speed.

To learn more about Google’s best practices for image optimization, Google provides an indepth guide.

3. Add Images to XML Sitemap

One of the best practices for helping Google quickly understand critical pages to index is using a sitemap. An XML sitemap is a site file that helps Google find site contents quickly and understand its structure. If you have a website with a few pages, an XML sitemap may not be a priority, but large ecommerce websites with tens of thousands of pages need an XML sitemap for Google to discover important pages quickly.

So one of the image SEO best practices is including images in an XML sitemap, which signifies to Google that those images you’ve included are important and you want them shown to searchers on the SERP (Search Engine Result Pages.)

If you use any CMS, you may use plugins like Yoast or RankMath to generate an XML sitemap automatically. For a custom approach, follow Google’s best practices for building a sitemap.

4. Use an Appropriate Image Format

Image format means the image file type you choose. It could be PNG, JPG, WebP, AVIF, SVG, etc. It’s important to note that each format has a unique use case. Usually, SVG image format is recommended for site logos, JPGs are good for things like screenshots and blog post images, and PNGs are good for JPG use cases but are usually larger.

Another important thing to note is that your chosen image format should match the file name extension. For example, you have an image in the WebP format while the file extension name has a jpg at the end. The image URL below shows that it is jpg, whereas if you load the image and try to save it, you will see it’s a WebP.

https://techseodigest.com/wp-content/uploads/2024/04/techseodigest-1536×864.jpg

What causes this kind of issue is when you use a plugin that helps you convert uploaded images to WebP. In my case, I uploaded the image into my WP site media folders as a jpg before the plugin had access to optimize the image to WebP. So, the plugin only worked on the image optimization and not the file extension name adjustment.

Google recommends avoiding this scenario to prevent errors and ensure that Google and other platforms can recognize the file type correctly.

5. Use Descriptive Image Titles, File Names, Alt Text, and Captions

This is where you add context to your images for Google to understand their relevance. Starting with the title to file names, alt text, and captions, you have to be explicit in describing the image in a few words.

• Image title: Just as you have a content page title, think of a captivating title that best describes your image. The option of adding a title to an image usually comes up when you’re uploading to your media library. 

While this has less SEO impact, you should still include relevant keywords or descriptions to offer a good user experience in the image context. For example, instead of having a generic image like “Image123” for an image showcasing a laptop on a page about remote work, we could use a specific title that says “Laptop for remote work setup.”

• Image file names: This is what you name the image on your device before uploading it into your CMS. Avoid using the default suggested image file name, such as IMG_435377.jpg. Use a relevant word or phrase that describes the image instead. You may also use a keyword in the file name. 

Remember to use short image file names and hyphens to separate the words so Google can understand them easily. So instead of using img_435377.jpg for a laptop described above, we may use laptop-remote-work.jpg or laptop-remote-work.webp. This provides more context to the image than the previous file name.

• Alt text: Alternative text is essential for both website accessibility and SEO. For accessibility, alt text provides a way for users with screen readers to understand the content of your images, even if they cannot see them. This ensures that your website is accessible to all users, regardless of their ability to perceive the images visually.

Also, in case of poor internet connection where images can’t be fully rendered, users can understand the image with text. Likewise, your page may benefit from search engine visibility for SEO if you use descriptive and relevant alternative text. 

When writing an alt text for images, be descriptive and include relevant keywords to boost its visibility. Think about your site visitor when writing an alt text. Assume they may close their eyes and someone reads the image to them. Can they picture the image in their mind with the alt text you’ve written? If yes, the alt text is good.

Here’s an example of a good alt text: 

✅ A modern silver laptop on a wooden desk used for remote work

❌A bad alt text: laptop

The alt text “laptop” is too vague and doesn’t provide enough detail. It doesn’t describe the context or specifics of the image, which is unhelpful for users who rely on screen readers and doesn’t add value to search engines.

A good alt text should be specific, descriptive, and helpful, while a bad alt text is too brief or irrelevant. While writing an alt text for a bulk of images may be daunting, especially for ecommerce websites, you may consider using an alt text generator to streamline the process. 

• Captions: Captions help readers quickly grasp the relevance of an image on the page, typically appearing below the image to provide context. While they don’t directly impact SEO, they can increase time spent on the page. Keep captions concise yet informative, adding value without overwhelming readers. Where appropriate, include keywords to align the caption with the page’s content.

Here’s an example of a good caption

✅ A modern laptop setup for remote work featuring ergonomic accessories.

Why it’s good: The caption provides context to the image, describing not only what is in the image (a laptop) but also adding relevant details about its purpose (remote work) and features (ergonomic accessories). It enhances the user’s understanding of how the image relates to the content.

❌A bad caption: Image of a laptop.

The caption “Image of a laptop” is too basic and doesn’t add any valuable information. It restates the obvious without giving any insight into the context or purpose of the image.

6. Resize Images

When resizing image size, it’s all about adjusting the width and height of images. Generally, images with large sizes can affect page load speed, whereas page speed is a major ranking factor on Google. Images with large dimensions could lead to poor page speed because browsers have to load the image’s default full size ( which may be bigger) before rendering the right size for the screen size.

So, instead of having images with large dimensions (width x  height) that will make your page lag in performance, frustrate website visitors, and lead to poor ranking, it’s best to resize them. 

Now you’re asking: how will I know the right image size dimension for my web pages? It’s simple: Each CMS has a recommended image size. So, you need to understand your website’s maximum width to know what image size to upload. For instance, the recommended image size in WordPress is up to 1024px by 1024px. 

Because different themes may have different dimension recommendations, checking the theme’s documentation for the recommended image size is important. The recommended featured image dimension on the Astra theme is 1200 x 630 pixels.

So, having known the right image size, use tools like Tiny IMG or Bulk resize to resize the images to the recommended size. You may also consider this factor when designing your site images. That way, you can create a perfectly sized image based on your website’s unique dimensions.

7. Compress Image File Size

In the previous section, we explored how to resize image dimensions. Now, let’s focus on reducing the file size through compression. File size refers to how much space an image occupies in kilobytes (KB) or megabytes (MB). It’s important to note that larger images can slow down your website’s load time, so balancing maintaining good image quality and minimizing file size is crucial.

For example, imagine you’re downloading a 22MB file versus a 2KB one. Which would finish faster? The same principle applies to image files on your website: the larger the file, the longer it takes for users to load your page. And the longer users wait, the more likely they are to leave.

Additionally, large image files can consume more bandwidth, increasing your hosting costs, especially if you have limited storage capacity. Therefore, beyond the user experience and SEO benefits, optimizing image sizes can save you money by reducing server strain and bandwidth usage.

So, how do you compress images? 

You can leverage an image compression tool to achieve this purpose. A tool like TinyPNG is a good option to consider.

Note: Compressing images can sometimes result in a loss of quality. Therefore, choosing the right image format is important, as different formats use different compression methods (lossy or lossless). When deciding on the appropriate file size, a good rule of thumb is to aim for images to be 100 KB or less. However, if compressing to this size impacts the image quality, only reduce the file size to a level where the image remains usable without significant quality loss.

8. Choose Unique Images

Over 50% of websites use stock images to showcase their brand identity and value. However, only a few could boast its effectiveness in perfectly showcasing their brand identity. See the image below.

Source: ReferralRock

While stock images may save time and resources, they may not uniquely represent your brand or add to your credibility. 

Also, using free images requires extra attention, as you need to understand the legal implications regarding hidden restrictions, respect terms of use, and more to avoid image copyright issues.

Above all, Experience, Expertise, Authoritativeness, and Trustworthiness (EEAT) is still a major factor that impacts a site’s performance in search engine rankings.

Let’s play a quick game:

A traveler stumbles upon two blogs. One shows a serene, rain-soaked street corner she once wandered or was familiar with, the droplets captured in soft light. The other blog uses a familiar stock photo of a generic city skyline, one she’s seen countless times before. Which blog do you think will feel more authentic? Consider yourself as the traveler. Which one would you trust?

Beyond optimizing images for search engines, think about your site visitors and the experience you want them to have with your brand. 

N.B. Images are critical site content. In as much as you invest quality resources into readable content on your site, your site images deserve more.

9. Optimize the Image Page Title & Description

According to Google:

Source: Google

In summary, Google recommends optimizing the page where your images are embedded to complement your image SEO practices. Ensure you optimize the pages for relevant keywords and add meta descriptions, titles, headings, and other metadata. Tick every relevant box of on page SEO best practices for the page as this may help the page to perform well on Google.

10. Add Structured Data

Structured data helps search engines better understand and categorize your website content, allowing for more accurate and enhanced search results. For images, you can use structured data to signal important information to Google. The type of structured data used for images is called ImageObject schema markup.

Adding ImageObject schema to pages where images are can improve how Google and other search engines display your images in search results, potentially leading to better visibility and click-through rates.

To add ImageObject structured data, visit Schema.org, navigate to the ImageObject section, and copy the base code. You’ll then modify this code to include your image’s specific details, such as image URL, caption, and license. Once you’ve customized the code, it’s crucial to test it using a tool like structured data validator tool to ensure it’s valid before pasting it into your website’s HTML. See the code below. The elements highlighted are those that need to be customized to your unique case.

Adding structured data to your images can significantly enhance your SEO, making your images more likely to appear in rich search results and improving user engagement.

<script type=”application/ld+json”>

{

  “@context”: “https://schema.org”,

  “@type”: “ImageObject”,

  “author”: “Jane Doe“,

  “contentLocation”: “Puerto Vallarta, Mexico“,

  “contentUrl”: “mexico-beach.jpg“,

  “datePublished”: “2008-01-25“,

  “description”: “I took this picture while on vacation last year.“,

  “name”: “Beach in Mexico“

}

</script>

Prioritize Image Optimization Alongside Content Optimization for Better SEO Results

Images will continue to play a critical role on the web, as searchers love engaging with them on web pages.

By applying these image optimization best practices, you’ll not only prevent your site visitors from leaving due to slow load times but also reduce the strain on your server caused by large image files.

Better yet, Google may reward your efforts with improved rankings, featured snippets, and higher visibility in image search results.

Remember: It’s not the images themselves that slow down your pages, but the lack of optimization! Start optimizing your site images today to enhance user experience and SEO results.