Introduction to Cloudinary

Overview

Cloudinary is a service that allows you to manage and efficiently deliver media such as images and videos, enhancing browser display speed. There are two main usage patterns:

• Managing and delivering content on Cloudinary
• Managing and delivering content using S3 or similar services

Managing and Delivering Content on Cloudinary

Cloudinary provides tools to manage media content directly on their platform, allowing for optimized delivery and streamlined media management.

Managing and Delivering Content via S3 and Other Services

Content is managed using storage services like S3 and retrieved through Cloudinary.
This approach seems to be gaining popularity.

Features

Let’s explore the benefits of using Cloudinary.

１．Delivering Images in Optimal Formats

To improve image delivery performance, minimizing file size is critical.
This helps reduce image loading time on websites, resulting in faster overall site performance.

Cloudinary focuses on WebP, an image format developed by Google.
WebP is described as:
"A powerful image format first introduced by Google in 2010. Using advanced compression techniques, WebP encodes photos in a significantly smaller file size compared to common JPEG (lossy) and PNG (lossless) formats."

However, not all browsers support WebP. While it works on Google Chrome, some browsers may not support this format.

Cloudinary addresses this by detecting whether the browser opening the website supports WebP. If supported, it automatically converts and delivers images in the WebP format.
(Note: This requires adding the f_auto parameter to the URL, which is beyond the scope of this article.)

２．Image Processing on the Cloudinary Side

When using Cloudinary to fetch images or videos, you can process the media directly on Cloudinary before displaying it on your site.

This is beneficial because, in traditional setups, resizing or other modifications are handled via CSS after fetching the image. This involves the following steps:

1. Fetch the image.
2. Apply CSS modifications.
3. Display the image.

This sequence can negatively impact performance.
With Cloudinary handling processing, the workflow is simplified to:

1. Fetch the processed image.
2. Display it.

As a result, site performance and loading speed improve.
Additionally, Cloudinary offers developer-friendly interfaces such as RESTful APIs and SDKs, making it easy to integrate into applications.

３．Media Delivery via CDN (Content Delivery Network)

Cloudinary also functions as a CDN.
By delivering content (images and videos) from servers closest to the user, performance improves, and loading times are reduced.

Moreover, processed images and videos (as mentioned in Feature 2) can be cached for faster subsequent loads.

Let's Try It!

Let's actually try using Cloudinary!
Click the link below to access the Cloudinary website:

Cloudinary

Once you reach the site, select "SIGN UP FOR FREE" from the menu.
There are several plans available, but for now, let's choose the free plan! (Details about the other plans are omitted for simplicity.)

After completing the sign-up process, select "Media Library" from the menu to navigate to the following screen.
For this hands-on session, try uploading an image! Click the "Upload" button.

Feel free to upload any image, but the author will upload the following image as an example! (Image sourced from Unsplash.)

Once the upload is complete, you're all set!

Now, regarding the URL for retrieving the uploaded image, Cloudinary URLs are typically structured as follows:

For this case, the following items are mandatory, while the others can be set optionally. We’ll omit the optional ones (apologies in advance).

• Cloud Name: This is a value assigned to each user. You can check it by navigating to the dashboard from the menu.
  
• Asset Type: This specifies the type of content, which can be selected from image, video, or raw. For this case, we will use "image".
• Delivery Type: This specifies how the content will be delivered. For this case, we will use "upload". For information about other fields, refer here.
• Public ID: This is the ID assigned to the content on Cloudinary. The following part represents the Public ID.
  
• Format: You can specify the content format (e.g., jpg, png, etc.). For this case, we will use jpg.
  For other options available for images, refer here.

Given the above, the URL of the uploaded image would be as follows (replace Cloud Name and Public ID with your own values):

https://res.cloudinary.com/*******/image/upload/dog.jpg

When you input the above URL into your browser's address bar, you will be able to retrieve the image as shown below.

Summary

This time, we covered an overview of Cloudinary and a quick hands-on tutorial!
The core features of Cloudinary, such as content transformation and retrieving content from S3, will be explained separately in the future!