Using Google Vision API to Name Images for Your Website: A Comprehensive Guide

Intro

Naming images can be tedious and annoying. But it’s a critical part of SEO. Unlike humans, search engines cannot “see” images but, instead, rely on text-based information to understand and index them. That’s where Google’s Vision API comes in. A descriptive, keyword-rich image name improves the likelihood of the image appearing in relevant search results, thus driving more organic traffic to the website. Furthermore, well-named images are more accessible, benefiting users with visual impairments who rely on screen readers, and contribute to a better user experience overall. They also provide context to the search engines about the content of the webpage, thereby increasing the page’s potential to rank higher in search results for relevant queries. Therefore, naming images effectively serves a dual purpose: enhancing accessibility and boosting SEO performance. The Google Vision API is a tool that can help automate this process, ensuring that you’re utilizing best practices.

What is Google Vision API?

Google Vision API is part of Google Cloud’s machine learning technologies, which allows you to understand the content of an image by encapsulating powerful machine learning models through a simple REST API. It can recognize thousands of objects, read printed and handwritten text, and much more. In this context, we are particularly interested in its ability to provide relevant metadata for the images we use on our website.

Why Use Google Vision API?

Let’s say a client gives you several thousand images all named “Image00(random numbers).” You could go through each image and rename it by what’s in each image hand, but that’s nuts. It’d take forever and wouldn’t be as accurate as it should be.

Or, you could use Google’s Vision API to do the heavy lifting. Here’s how it works:

Vision API looks at the image and gives you a list relevant keywords that it identifies in the image.
Then you string those keywords word together and make that the name of the file.
That’s it.
For example, the image below, originally named “fish.png” produces a new image named “fin-organism-fish-marine-biology-art-electric-blue-underwater-ray-finned-fish-graphics-painting.png”

fish

fin organism fish marine biology art electric blue underwater ray finned fish graphics painting

Consistency

Naming images consistently can be a difficult task, especially for larger sites with multiple contributors. The Google Vision API provides a uniform method for generating names.

Improved SEO

Search engines like Google use file names and alt text to understand the images on your site. Properly named images can help your site rank better in image searches and improve the overall SEO of your website.

Automation

Google Vision API can process thousands of images in just a few seconds, making it ideal for large websites with tons of images. This level of automation can save you hours of manual work. Even for smaller sites, it’s still a major time-saver.

User Experience

Accessibility is often overlooked by SEOs, but it’s critical. An appropriately named image can serve as an additional clue for the content of the web page, which can improve the overall user experience. Not every user can see your image. And not every user will actually load your image for a number of reason. Naming your images properly ensures the content of your images can still be known.

How to Use Google Vision API to Name Your Images (Basic Setup)

Below is a simplified guide on how to use Google Vision API for naming your images. Note that you’ll need basic knowledge of Python and JSON for this. Also, note that this example is meant to demonstrate the basic process. A much more practical, albeit, more complex setup will be shown further below. This just shows how to process a single image, which isn’t super useful in practice, but makes it easier to understand the basic concept. Ultimately, you’ll probably want to dump a large number of images into a folder and process everything in a specific way that suits your particular needs. And you’ll probably want to string all of your actions together so that you can, for instance, just double-click a single .bat file and run the entire process. I’ll show you how that works after we go over the basic setup.

Step 1: Set Up Google Cloud Vision API

Here’s where we connect to the API and get ourselves some credentials.

Head over to the Google Cloud Console.
Create a new project or select an existing one.
Navigate to “API & Services” > “Library” and search for “Google Cloud Vision API”.
Enable the API and follow the instructions to set up the credentials.

Step 2: Install Necessary Libraries

Use pip to install the required Python packages:

bash

pip install --upgrade google-cloud-vision

Step 3: Initialize the API in Python

First, set your environment variable to the path of your Google Cloud credentials. There’s better ways to do this in practice, but the idea is that you make your credentials available to your app.

bash

export GOOGLE_APPLICATION_CREDENTIALS="path/to/your/credentials.json"

Now, initialize the API in your Python script.

python

from google.cloud import vision_v1 client = vision_v1.ImageAnnotatorClient()

Step 4: Upload and Analyze Your Images

Let’s say you have an image named ‘example.jpg’. Your goal here is to get an array (list) of keywords that the API has identified as the main content of your image. Here’s how you can analyze it:

python

with open('example.jpg', 'rb') as image_file: content = image_file.read() image = vision_v1.Image(content=content) response = client.label_detection(image=image) labels = response.label_annotations

Step 5: Extract Relevant Metadata and Rename Images

After receiving the response, you can loop through the labels to generate a name for your image.

python

image_keywords = [] for label in labels: image_keywords.append(label.description.lower()) image_name = '-'.join(image_keywords[:5]) + '.jpg'

You can now rename your image to image_name. What the code does here is take the keywords, connects them together and gives you the string you’ll use to rename your image.

How to Use Google Vision API to Name Your Images (Advanced Setup)

Everyone’s code will need to be setup for their own purposes, but I’ll give you my basic setup.

Write a python script that looks at all the images in a folder and produces a csv with names of the image files

import os
 
os.chdir("C:/vision-image-app/raw_images") 
path = os.getcwd()
 
print('List file and directories at path :', path)

f=open("image_names.csv",'a')

f.write("name\n")
for file in os.listdir(path):
    if file.endswith(".jpg"):
        f.write(file + "\n")
        # get list of .csv file present given folder
        print(file)

    if file.endswith(".png"):
        f.write(file + "\n") 
        # get list of .csv file present given folder
        print(file)
    
    if file.endswith(".bmp"):
        f.write(file) 
        # get list of .csv file present given folder
        print(file)
        
    if file.endswith(".jpeg"):
        f.write(file) 
        # get list of .csv file present given folder
        print(file)

Then write another python script that:

Reads the image_names.csv file and sends each file to the Google Vision API
Returns a list of labels for each image
Writes the labels to a new new_file.csv file in the same folder

import io
import os
import csv

from google.cloud import vision

#credentials. If you want creds, visit https://cloud.google.com/vision/docs/ 
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = 'visionapi.json'

# Instantiates a client
client = vision.ImageAnnotatorClient()

# The name of the image file to annotate
file = open('C:/vision-image-app/raw_images/image_names.csv')
csv_data = list(csv.DictReader(file))

os.chdir("C:/vision-image-app/raw_images" )

for row in csv_data:
    file_name = os.path.abspath(row['name'])
    file_name2 = os.path.splitext(row['name'])
    # Loads the image into memory
    with io.open(file_name, 'rb') as image_file:
        content = image_file.read()
    image = vision.Image(content=content)
    #### LABEL DETECTION ######
    response_label = client.label_detection(image=image)
    l_description = []
    for label in response_label.label_annotations:
        print(label.description)
        l_description.append(label.description.replace(" ", '-'))

    with open('new_file' +'.csv', 'a', newline='') as file:
        mywriter = csv.writer(file, delimiter=',')
        mywriter.writerows([[file_name2[0], str(l_description).replace("[", '').replace("]", '').replace(",", '-').replace("'", "").replace(" ", "").lower() ]])

Then write another python script that:

Reads the new_file.csv file and renames each image file with the labels returned from the API

import os
import csv
import io

os.chdir("C:/vision-image-app/raw_images") 

with io.TextIOWrapper(open('new_file.csv', 'rb')) as csvfile:
    csvreader = csv.reader(csvfile, delimiter=',', quotechar='"')
    for row in csvreader:
        for ext in ['.jpg', '.png']:
            name = row[0] + ext
            new = row[1] + ext
            if os.path.exists(name):
                os.rename(name, new)
            else:
                print(name + " does not exist")

After that I wrote a few other scripts to move the files to specific locations and rename the folders how I want, but this is the gist of it works.

Also note that you’ll need a json file with your credentials that you’ll get when you set your project up in Google Cloud.

Enjoy.

Conclusion

Google Vision API offers a reliable and efficient way to generate descriptive and SEO-friendly names for your website images. It may require some setup and a bit of coding, but the benefits in terms of SEO, user experience, and overall consistency make it a valuable tool for web developers and content managers alike.