Using Image Search in Your App

Implement Google Custom Search API to automatically provide relevant images for user-generated content, improving engagement and user experience.

Using Image Search in Your App

Every content on a site, in an application or simply in a letter, looks more expressive and eye-catching when it's accompanied by an image. Images are a vital part of our online lives, from ordinary users to media giants and news portals.

The Problem

Let's say we ask a user to create some content in our system, for example, their financial goal. In this case, it's necessary to put an image here (to provide an example of the user's motivation, visualization).

Most of the time, the user will skip this phase, since there are multiple steps involved in finding/selecting/taking a photo and uploading it. People are lazy, and if a photo is not readily available in their desktop or photo gallery, they'll often skip this step.

Available Solutions

There are lots of solutions available:

Although these are very good services, most likely you will have to pay for them. This can be frustrating when many of the features that come with a paid service may not even be needed.

Google Custom Search Solution

If you are already working with some Google products in your project, why not utilize their search service? According to statistics from 2018, 90.15% of users will use Google for image searches.

Setup

First, add the necessary packages:

pip install google-api-python-client google-auth-httplib2 google-auth-oauthlib

Don't forget to add these packages to requirements:

pip freeze > requirements.txt

API Configuration

  1. Activate custom search in your Google account to receive an API_KEY
  2. Create a Custom Search Engine ID (CSE_ID) using the panel at https://cse.google.com/cse/all
  3. Enable the image search function

Implementation

Create a service class that receives a phrase or term for entry (in our case, the goal header) and returns an array of images.

Supported Parameters

Google Custom Search service supports many parameters. For our use case, we used:

searchType='image'  # Indicates we're looking for images
imgType='photo'     # Options: clipart, face, lineart, stock, photo, animated
imgSize='xxlarge'   # Options: icon, small, medium, large, xlarge, xxlarge, huge

Parameter Choices

  • imgSize: We tried all options and found xxlarge returns the most relevant images
  • imgType: photo option is most suitable for realistic images
  • imgDominantColor: Optional parameter to specify predominant color in photos

Pagination

The pagination parameters were skipped intentionally as 10 images are given by default. This is exactly what we need for the user to choose from.

Response Handling

We return only the links, then depending on the selected image, we will process it as needed:

  • Save the image
  • Optimize for web
  • Crop to required dimensions
  • Apply any other transformations

Results

The user enters the title, and we can provide excellent accompanying pictures automatically. The result will differ from what the user would get when using the browser, as the browser has different search settings by default.

Benefits

  • Improved user engagement
  • Reduced friction in content creation
  • Automated image suggestion
  • Cost-effective compared to paid services
  • Leverages Google's powerful image search

This solution significantly improves the user experience by automatically providing relevant images for user-generated content without requiring manual search and upload steps.