What is Cloudinary ?
Cloudinary is a cloud-based image and video management service that enables a user to upload, store and manipulate images and videos for their websites and applications. It provides superfast image and video upload from your mobile or computer to the cloud. The ease of integration makes Cloudinary a better option for developers for their web applications.
Features of Cloudinary
- Large file handling: Handles large images and videos efficiently.
- Secure: Prevents unauthorized access of media and also provides tokens for secure access.
- Free tier plan: Provides a free tier plan that can be used for small scale projects.
Third party integration: Integrates with the third party platform like wordpress easily. Cloudinary provides a Cloudinary plugin for wordpress for seamless file upload and access.
Uploading Images to Cloudinary
There are many different ways to upload images to Cloudinary. Using Cloudinary upload widget and Cloudinary SDK are very easy and common methods.
Uploading Images using upload widget.
A Coludinary upload widget requires only a few lines of code and is very easy to integrate and also provides different media upload features. The interactive user interface of the widget makes file upload very easy and also improves the user experience.
Just include the widget remote javascript file in your project and it requires two more data values that are cloud name and upload preset.
The following example shows how to integrate Cloudinary widget into your project.
<script
src="https://upload-widget.cloudinary.com/latest/global/all.js"
type="text/javascript"
></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget(
{
cloudName: "your_cloud_name",
uploadPreset: "your_upload_preset",
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log("Done! Here is the image info: ", result.info);
}
}
);
document.getElementById("upload_widget").addEventListener(
"click",
function () {
myWidget.open();
},
false
);
</script>
You can get cloud names and upload presets from your Cloudinary console.
Uploading Images using Cloudinary SDK
Cloudinary SDK libraries implementation for image upload requires only three values.
- Cloud name
- Api key
- Api secret
Install the Cloudinary SDK library.
npm i cloudinary
Add your cloud name, api key and secret in the Cloudinary config.
cloudinary.config({
cloud_name: "your_cloud_name",
api_key: "your_api_key",
api_secret: "your_api_secret",
});
Below is the post method for uploading images to the Cloudinary.
app.post("/upload", upload.single("image"), async (req, res) => {
try {
const result = await cloudinary.uploader.upload(req.file.path, {
folder: "uploads",
});
res.json({
message: "Image uploaded successfully",
url: result.secure_url,
});
} catch (error) {
console.error("Error uploading to Cloudinary:", error);
res.status(500).json({ error: "Image upload failed" });
}
});
What is Image Optimization ?
Image Optimization in a website or an application means serving the images efficiently with proper compression and providing images only when they are needed.
Image optimization has various advantages like faster page loading time, good user experience, reduced storage and bandwidth required for delivering the images.
Image Optimization in Cloudinary
Image compression:
Image compression is a technique where the image file size is reduced by removing the unnecessary data
The Cloudinary q_auto feature automatically compresses the image without degrading the image quality into the smallest possible size.
While serving the image you can use the q_auto tag after /upload in the image url like:
https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg
New File Image Formats:
New file image formats like webp, svg, jpeg-xr and jpeg2000 provide more file size reduction as compared to older formats like jpeg.
The Cloudinary f_auto feature automatically provides the proper image format according to the user’s browser.While serving the image you can use f_auto tag after /upload like:
https://res.cloudinary.com/demo/image/upload/f_auto/sample.jpg
Responsive Image delivering using Srcset and sizing:
You can use different Srcsets and sizing in the img tag to correctly display the image according to the different breakpoints like:
<img
sizes="(min-width: 50em) 50em, 100vw"
srcset="
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_256/docs/house.jpg 256w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg 512w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_768/docs/house.jpg 768w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1024/docs/house.jpg 1024w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1280/docs/house.jpg 1280w
"
src="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg"
alt="Responsive house"
/>
C_scale,w_512 scales the image to 256 pixels.
Images Lazy Load:
You can load images whenever the user wants to see that image. Lazy loading reduces the amount of data access required when the page loads.
Lazy loading is used in Cloudinary client side libraries like React, Angular etc.
Developers can use <AdvancedImage/> component tag in their projects for lazy loading features.
Just npm install @cloudinary/react.
npm i @cloudinary/react
After installing the package you can use the Advanced Image component in your project.
Using the AdvancedImage component you can render the image when required like when the user scrolls the page and is about to enter the viewport then you can render your image.
Conclusion:
Cloudinary is a very powerful tool for image and video upload and their optimization. It offers features like large file handling, secure media access and third party integration. Most common methods used by developers for uploading images are Cloudinary widget and Cloudinary SDK.
The Image optimization features of Cloudinary give an upper hand over the other services as optimizing and maintaining the media files is the most required feature for developers.
A Software Engineer with a B.Tech. degree, leveraging a strong foundation to tackle challenges and innovate in the ever-evolving tech landscape. When I’m not coding, I enjoy unwinding with a good playlist, allowing music to fuel my creativity and well-rounded approach to problem-solving.
