How To Optimize Images For SEO

Brandon LazovicJanuary 6, 2021

When people think of SEO, optimizing images is usually a low hanging fruit. 

However, while image SEO has an effect on how the photographs are ranked in Google Photos, it also positively impacts your organic rankings as a whole. 

Read our guide on how to properly optimize your images for SEO. 

Optimizing Your Image File Name

First, you’ll want to make sure your image file name is optimized. 

Image names should be short and descriptive - the best performing image names are typically 8 and 16 characters long, or about 2-3 keywords. 

Here is an example of what that might look like: 

Good: Bird.jpg

Bad: bird-birds-wings-swallow.jpg

An HTML example of your image file name will look something like this: 

<img src=”image-name.jpg”>

You want to make sure that while your file name properly captures the essence of the photo, that you aren’t keyword stuffing/over optimizing your image for the types of searches you want to rank for. 

Use The Right Image Format

There are a few different types of formats that you can use for your images. 

The best format does not exist for images, as different formats serve different purposes. However, here are a few considerations: 

  • Choose JPEG for larger images or illustrations: it will give you strong color and clarity results with a reasonably limited file size; 
  • Use PNG if you want to maintain the clarity of the context in your image; 
  • You can also use WebP, a new-gen format recommended by Google for SEO. can achieve high quality results with smaller file sizes.
  • Use SVG for logos and icons. With the support of CSS or JavaScript, you can handle images in SVG format, for example, without sacrificing quality. 

Proper Image Resolution and Size

Loading times are very critical for UX and SEO. The quicker the page is, the easier it is for visitors and search engines to access (and index) the website. 

Images may have a massive effect on loading times, particularly when you upload a large image to show a very tiny image, such as a 1920x1080 pixel image viewed at 300x200 pixel resolution. 

Make sure to adjust the scale of the file to how you want it to be viewed. For example, WordPress lets you achieve this by instantly supplying an image of various sizes after it has been uploaded. 

Unfortunately, it doesn't mean that the size of the file is fixed, it's just the size of the image being shown while still loading at a larger resolution, so make sure that you’re creating file sizes based on the viewing parameters of your website. 

Responsive Images

With mobile becoming the most used device when browsing the web, you’ll need to ensure that your images employ responsive design. This means that they automatically resize to fit all types of device screens, whether on mobile, tablet, or desktop. 

Images should have a srcset attribute that will allow them to serve different image sizes per screen width. 

Looking to learn more about search engine optimization? Read our SEO beginner’s guide for everything you need to know about SEO and how to drive business results through search engines like Google and Bing. 

Compress Image Size

Not only should you create a proper image resolution for your images, but you should try to reduce the overall image file size without compressing quality to help boost page loading times. 

Here are a few tools that you can use that will automatically compress your images before upload: 

After optimizing your images on your target web pages, you can test your page speed with the following tools to check for additional compression opportunities to prevent poor load times: 

Include Captions

The image caption is the text that follows the image on the page—when you look at the pictures in this post, it is the text in the gray box underneath each one. Why are captions relevant for image optimization? 

Image captions are read on average 3 times more than the body copy itself, so by not using captions, you’re missing out on a great opportunity to engage users on your website. 

It isn’t always relevant to add a caption to every single image, but if it DOES make sense, be sure to include a caption for relevant images. 

Include Alt Text

The alt text (or alt tag) is applied to the image such that the informative text is in place if the image cannot be shown to the visitor for whatever reason. 

Alt text is typically used for visually impaired or blind users using screen readers that can read the alt text of an image. It’s also useful as a backup in case an image isn’t served properly on your website and helps with SEO by improving the semantic meaning of your page. 

Make sure alt text is added to each picture you use and that it has the SEO keywords included for the page. Be sure to explain what's in the picture so that both search engines and users can better understand it. The more relevant knowledge the image has, the more search engines have to work with when ranking it in their results pages.

An example of alt text could be “picture of new Chevy Volt parked.” 

An HTML example of alt text is: <img alt=”image description”>

Your Alt Text should be short but descriptive while avoiding keyword stuffing. You should also avoid using terms like “image” or “picture of”, as it’s redundant. 

Include Title Text

Title texts are displayed when your mouse hovers over an image. Title text for pictures is similar to that of alt text, but many people who use image titles will often reuse the old alt text or leave it out altogether. 

It’s better to include that type of supporting information within the page itself, rather than serving it as strictly Title text, but it doesn’t hurt to include alt textfor the SEO benefits (although some recent studies have shown that title text doesn’t have a direct impact on SEO, whether good or bad). 

Include FigCaption

Like the caption, the FigCaption is the HTML code found alongside your image source code. Using FigCaption is important in showing search engines the relationship between the image and its context, while also emphasizing the images keywords or call to action. 

An HTML example of FigCaption includes <figcaption>I love parking my Chevy Volt at my new office building in Detroit!</figcaption>

Make sure that your caption captures the essence of your image while also including keywords that you’re trying to target on your web page. 

Include Image Structured Data

Adding organized data to your sites will help search engines generate rich results of your images. Google has mentioned that structured data is a small ranking factor in its search engine. It also helps in obtaining better search results within Google Images. 

Google Images supports the following types of schema markup: 

There are a number of guidelines that Google recommends following when adding schema to your website, which you can read here. 

Create XML Image Sitemap

As stated by Google: 

“Additionally, you can use Google image extensions for sitemaps to give Google more information about the images available on your pages. Image sitemap information helps Google discover images that we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate images on your site that you want Google to crawl and index.”

A sitemap is an XML file that includes details about your website URLs. Sitemaps are great for assisting search engines in discovering new content - and an image XML sitemap can help to ensure that all the images on your website are being crawled and indexed by search engines like Google and Bing. 

Read our latest guide on how to create XML sitemaps for your website.

Serve Images Through CDN

CDNs are one of the best speed optimization tools available for your website. Many websites with CDNs usually have separate CDNs specifically for images. The goal of using a CDN for your photos is to help organize your pictures and load them for your site users as soon as possible. Running a CDN image will speed up the distribution of the pictures on your web pages.

Here are a few different CDNs to choose from: 

Lazy Loading Images

Lazy loading is where the browser defers the loading of images before they’re viewed on your web browser. Other images are loaded when and where they need to be loaded, or when a user either scrolls/clicks to that image element on the page. 

Lazy loading will dramatically speed up loading on long pages that have several images below the fold by loading either as required or when the primary content has finished loading and rendering. 

There has been a lot of discussion in the past about whether lazy photos are good or poor for SEO. Google has also sent out mixed signals in the past. However, with web core vitals becoming more important for Google’s SEO algorithm, it’s better to ensure that your perceived load times are great, both in the eyes of Google and your site users. 

Summary
Best Practices For Image Optimization And Page Speed Performance
Title
Best Practices For Image Optimization And Page Speed Performance
Description

In this video i'll be going over how to optimize your images for search engine optimization. Images aren't often seen as like the biggest ranking factor in google but it is important to ensure that you're optimizing them to be seo friendly.

Categories:
Digital Marketing
Social Media
Digital PR
Photography
SEO
Analytics
Tool Reviews
Local SEO                                                          
Contact: 
brandon.lazovic@gmail.com                           

Sitemap           Privacy            Editorial Guidelines
Copyright © 2021 Brandon Lazovic LLC. All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram