Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

Moving My Crowded Image Folder From Local To Cloudinary

May 03, 2020 #Cloudinary

Early in the year of 2020, I watched a tutorial about Gatsby.js from Jason Lengstorf on frontend master. He mentioned images consume some of the Netlify’s build time.

What is “Netlify build time”?

netlify build time with starter

The free tier comes with 300 minutes of build time every month. It’s more than enough for a new developer’s blog to be hosted on Netlify for free. Thank you Netlify!

But, If you’re freelancing and building websites for clients. You going to hit 300 minutes of build time fast. If you want to save some build time, you could host your images somewhere and pull the image to your project with URL.

Even though I know I can save some build time but I still not motivate to explore Cloudinary. Until I started my blog on mid of April 2020,

Image explain thing more concise, I often print screen and use image explain thing in the blog.

When I keep adding more image to the folder. My image folder starts growing long.

images asset folder

It’s easy to find a new image in VS Code with “Git version control”, the new image I just add to the project will be shown in green text.

But it’s not that easy to find a photo I added 1 month ago. Especially glance though an image list in the folder.

Sometimes, we need to use the same image, aren’t we? How can I easily find the image? I start wondering how can I organize my image? I definitely will keep on adding more photo.

End of April 2020, YouTube recommends me to watch a Jason Lengstorf YouTube video regarding Cloudinary feats Domitrius Clark which was published on April 17, 2020. In this video, Jason mention cloud storage for image, and image transformation with the image’s URL.

I know, it’s the right time for me to explore a new thing - Cloudinary

I highly recommend you to watch Jason’s YouTube video about Cloudinary mentioned above.

First try

I register an account at Cloudinary website, answer some questions and walkthrough a 5 steps introduction. Then I go to the media library and found a sample photo.

I copy the URL

copy cloudinary image url

And put in as a image source in my React.js project.

<img src="https://res.cloudinary.com/ansonlowzf/image/upload/v1588473024/sample.jpg" />

A beautiful flower image has shown up

sample photo in cloudinary

It’s that simple,

It’s work on CodeSandBox too.

Tag an image

I click the manage button in the sample image

cloudinary sample photo manage button

And found this section

cloudinary add tag section

Folder structure + tag + grid thumbnail in Cloudinary.

At this moment, I think I found the solution to organize my images. Even, there are thousands of images.

Transformation

After taking 2 basic courses provided by Cloudinary academy and earn the certificates.

Cloudinary, not just a cloud storage, it’s more like a digital management hub.

You can do these on the fly - in URL:-

  1. Resize width and height of your photo
  2. Crop your photo,
  3. Transform your face image to thumbnail
  4. Change image format to jpg, png, webP and more
  5. Apply filter to your photo
  6. Remove image background
  7. Most importantly - You can add watermark to your image
  8. And so much more…

If you prefer to edit your image in the graphic user interface (GUI). You can edit in your Cloudinary platform.

An image solution for me

I still haven’t use Cloudinary to its full potential. More importantly, It’s solved my image organizing problem. After this blog, I going to move all my images to Cloudinary.


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me