1. Tutorials
  2. Image Processing

Resize Images From Google Cloud Storage Using Cloudinary (Python)

October 27, 2019

Register a Cloudinary account (Free tier available, credit card not required).

  • You need to pick a cloudname, which will form part of the image url as in https://res.cloudinary.com/[CLOUD_NAME]/....

After succesful setup, you shall have the following

  • Cloud name
  • API key
  • API Secret

As part of the account settings

  • Automatic backup: off
  • Enabled unsigned uploads: off

Google Cloud Storage Setup

To enable Cloudinary access to your Google Cloud Storage bucket, you need to do 2 things

  • Whitelisting: Add an empty file at .wellknown/cloudinary/[CLOUD_NAME].

    • Goto Google Cloud Console -> Storage, click on the bucket, click Create folder with name .wellknown/cloudinary.
    • Navigate to the folder .wellknown/cloudinary. Create an empty file on your local computer, name it the same as your cloud name and upload the file to this bucket.
    • You you don’t do this step, cloudinary.exceptions.Error: You can't directly access the requested gs bucket, please contact support to whitelist is raised when trying to upload.

  • Cloudinary Service Account

    • Goto Google Cloud Console -> Storage, select the bucket and click on the 3-vertical-dot on the far-right and select Edit bucket permissions.
    • Click Add members and put in service@cloudinary-gcs-production.iam.gserviceaccount.com
    • Give it the role of Storage -> Storage Object Viewer and click Save.

Python

pip install cloudinary
import cloudinary
import cloudinary.uploader

cloudinary.config(
  cloud_name = CLOUDINARY_CLOUD_NAME,
  api_key = CLOUDINARY_API_KEY,
  api_secret = CLOUDINARY_API_SECRET
)

gcs_id = 'gs://[BUCKET_NAME]/directory/filename'

'''
folder (optional)
- it helps to group images in a specific folder when browsing using Cloudinary Console -> Media Library
- make it easy to delete all images by directory
- you can group images by user or image types

public_id (optional)
- public id is useful to avoid accidentally upload the same image multiple times
- the final public_id is actually folder + public_id
'''
data = cloudinary.uploader.upload(gcs_id, folder='DIRECTORY', public_id='FILENAME')

# save this id for future operation
# if you are using folder: public_id = [FOLDER]/[PUBLIC_ID]
public_id = data['public_id']

# save this url for display image in website
secure_url = data['secure_url']

Manipulate image via code

public_id = ...

img = cloudinary.CloudinaryImage(public_id)
url = img.build_url(width=100, height=100, crop="fill")
# http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_100,h_100,c_fill/[FOLDER]/[ID].jpg

Manipulate image via url

You can manipuate the image directly via url without calling img.build_url.

Make an image into a square without distorting the image.

http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_100,h_100,c_fill/[FOLDER]/[ID].jpg

Make an image into a square, maintain aspect ratio and fill blank area with color.

http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_100,h_100,c_pad,b_white/[FOLDER]/[ID].jpg

Make an image maximum width or height as 1600px.

http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_1600,h_1600,c_fit/[FOLDER]/[ID].jpg

Change image format into .webp or .jpg

http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_1600,h_1600,c_fit/[FOLDER]/[ID].jpg
http://res.cloudinary.com/[CLOUD_NAME]/image/upload/w_1600,h_1600,c_fit/[FOLDER]/[ID].webp

Cloudinary Tips

  • Cloudinary charge by credit: 1 Credit equals 1000 transformations or 1GB of managed storage or 1GB of monthly viewing bandwidth.
  • To save money on managed storage (and Google Cloud Storage as well), you might to to store/upload images as .webp (30% savings, and you could serve the image as .jpg later) and resized (the original might be 4800px, but my website won’t show larger than 1600px)
  • Responsive images

NOTE: Android Resize Image and save as JPG or WEBP.

NOTE: Review: Compare Image Processing Service/API Prices

References:

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.