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.

Webinar
How to Optimize for Page Load Speed

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

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

Python

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

PHP

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

Java

Copy to clipboard
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

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

Java

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

Python

Copy to clipboard
CloudinaryImage("dog").image(quality=cat)

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

Copy to clipboard
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

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

Vue.js

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

Angular

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

JQuery

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

JavaScript

Copy to clipboard
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

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more