Cloudinary Blog

Compression of Image Files With Only One Line of Code

Automating the Compression of Image Files with One Line of Code

I recently came across a tweet by organizer and developer advocate iChuloo by way of @JAMStackLagos on how to reduce the size of an image with only one line of code on Cloudinary.

That tweet rang a bell. I then recalled that I’d used that exact codeline in at least two React projects in the past.

This article digs deeper, showing you how to compress image files, again with one line of code, in PHP, Java, or Python on environments or frameworks like React, Node, Vue, and Angular.

Image Compression

As a rule, compression of image files are either for storage or for delivery.

Image Storage

The compression of image files for cloud storage when requesting their upload to Cloudinary. Subsequently, Cloudinary applies to the files the transformations you specified before storing them. The examples below show the codeline in Ruby, Python, PHP, and Java. You can also code in a similar manner in other modern languages.

Ruby

Cloudinary::Uploader.upload("cat.jpg", :quality => 60)

Python

cloudinary.uploader.upload("cat.jpg", "quality" = "60")

PHP

\Cloudinary\Uploader::upload("cat.jpg", [ "quality" => "60"]);

Java

cloudinary.url().transformation(new Transformation().quality(60)).imageTag("cat.jpg");

In the code above, quality is a compression parameter that specifies the image quality and size for storage. If you’re not sure what number to assign to quality, just type auto. Cloudinary then automatically adjusts the compression quality for your image by applying the optimal balance between the image’s file size and quality.

Image Delivery

In this context, you upload images straight to the cloud and then apply the quality compression parameter when delivering them to users. You can also serve images in the formats that pertain to the various web browsers and mobile devices.

You configure quality on a 0-100 scale. The higher the image quality, the larger the image size; the lower the image quality, the smaller the image size. To compress images on the fly, adjust their quality parameter. See the examples below.

Node.js

cloudinary.image("cat", {quality: 50})

Java

cloudinary.url().transformation(new Transformation().quality(50)).imageTag("cat");

Python

CloudinaryImage("dog").image(quality=cat)

Alternatively, simply add a q parameter to your image’s URL, for example:

https://res.cloudinary.com/demo/image/upload/q_50/cat.jpg

Here, q stands for quality; 50 is your choice on a 0-100 scale.


Front-end developers can drop the components in their app out of the box, like this:

React.js

<Image publicId="cat.jpg" ><Transformation quality="50" /></Image>

Vue.js

<cld-image publicId="cat.jpg" ><cld-transformation quality="50" /></cld-image>

Angular

<cl-image public-id="cat.jpg" ><cl-transformation quality="50"></cl-transformation></cl-image>

JQuery

$.cloudinary.image("cat.jpg", {quality: 50})

JavaScript

cloudinary.imageTag('cat.jpg', {quality: 50}).toHtml();

Here, cat is the name of the uploaded image, which is usually the public ID (publicId) on the Cloudinary storage platform.

Conclusion

Uploading without images optimization or compression wastes bandwidth. Plus, delivering them on your app invariably takes longer. Why not automate the compression process with Cloudinary’s effective and simple drop-in tools so that your visuals load fast?

Register for free and for more details, check out the following Cloudinary documentation:


Further Reading on Image Optimization

Recent Blog Posts

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more