Cloudinary Blog

Python Image Processing, Compression, and Resizing

Python Image Processing, Compression, and Resizing

Approximately 62 percent of today’s online content is made up of images, optimizing which is a must to speed up loading of media-rich websites. A fast-loading site makes your visitors happy, which as a rule leads to higher conversion rates.

This article shows you how to optimize images in the Python programming language.

The Importance of Optimization

Three major reasons account for why optimizing images for websites is important:

  • SEO: Your website speed is a crucial ranking and engagement factor, that is, the site’s load time and overall size directly affect your search-engine ranking. Optimized images invariably cause sites to load faster.
  • Storage: Optimized images result in smaller files, hence less storage space.
  • Bandwidth: Optimized images save data bandwidth, correspondingly lowering hosting cost and visitors’ data usage.

How to Optimize for Page-Load Speed


Image Optimization in Python

You can optimize images in Python in one of the following ways:

  • With Pillow, which extends the Python Imaging Library (PIL) by adding more features and support for Python 3. Pillow works with many image formats, including PNG, JPEG, PPM, GIF, TIFF, and BMP.
  • With img4web, a Python script that optimizes JPEGs, PNGs, and animated GIFs on the web. The script produces lossless and only slightly compressed images, which nonetheless reduce load time and bandwidth.
  • With smush.py, a Python command-line tool (derived from Yahoo’s smush.it service) that functions as a lossless image optimizer for displaying images.
  • With Tinify, a Python package for compressing and optimizing JPEGs and PNGs by means of the Tinify API.
  • With scikit-image, a Python image processing library with a versatile set of optimization and transformation routines, e.g., rescale and resize.

A Superb Alternative for Optimization

With Cloudinary, you can efficiently optimize media assets—regardless of programming language. One reason is that, by default, Cloudinary automatically performs certain optimization steps on all transformed images. Plus, its integrated, fast delivery capability through CDNs ensures that your images are seamlessly displayed on viewers’ devices.

Note
Try out our generous free plan.

Cloudinary offers the following optimization capabilities:

  • Automatic quality adjustment and encoding: Once you have set up the q_auto parameter for an image, Cloudinary chooses the optimal quality-compression level and encoding settings according to the image content, its format, and the viewing browser. The result is a compressed image with superior visual quality. See this example:

    Ruby:
    Copy to clipboard
    cl_image_tag("woman.jpg", :quality=>"auto")
    PHP:
    Copy to clipboard
    cl_image_tag("woman.jpg", array("quality"=>"auto"))
    Python:
    Copy to clipboard
    CloudinaryImage("woman.jpg").image(quality="auto")
    Node.js:
    Copy to clipboard
    cloudinary.image("woman.jpg", {quality: "auto"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("woman.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('woman.jpg', {quality: "auto"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("woman.jpg", {quality: "auto"})
    React:
    Copy to clipboard
    <Image publicId="woman.jpg" >
      <Transformation quality="auto" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="woman.jpg" >
      <cld-transformation quality="auto" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="woman.jpg" >
      <cl-transformation quality="auto">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("woman.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("woman.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
    Woman

    To fine-tune the visual quality of images, set up the q_auto:best. q_auto:low, q_auto:good, or q_auto:eco parameter, as you desire.

  • Automatic formatting: The f_auto parameter enables Cloudinary to analyze the image content and selects the best format for delivery. For example, it might deliver images as WebP to Chrome or as JPEG-XR to Internet Explorer but retain the original format for all other browsers. With both f_auto and q_auto in place, Cloudinary would still deliver WebP and JPEG-XR to the relevant browsers. However, if the quality algorithm determines that PNG-8 or PNG-24 is the optimal format, Cloudinary might deliver selected images in either format.

  • Resizing and cropping: By adding the width (w) and height (h) parameters to image URLs, you direct Cloudinary to resize those images, as in this example:

    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")
    PHP:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("width"=>0.5, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(width=0.5, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {width: "0.5", crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="0.5" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation width="0.5" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="0.5" crop="scale">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("sample.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("sample.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Flower
    Ruby:
    Copy to clipboard
    cl_image_tag("sample.jpg", :height=>200, :crop=>"scale")
    PHP:
    Copy to clipboard
    cl_image_tag("sample.jpg", array("height"=>200, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(height=200, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.image("sample.jpg", {height: 200, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(200).crop("scale")).imageTag("sample.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {height: 200, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {height: 200, crop: "scale"})
    React:
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation height="200" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sample.jpg" >
      <cld-transformation height="200" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation height="200" crop="scale">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Crop("scale")).BuildImageTag("sample.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).generate("sample.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
    Flower

Here, Cloudinary maintains the aspect ratio but resizes the image to the height and width you specified.

Ruby:
Copy to clipboard
cl_image_tag("sample.jpg", :width=>200, :height=>100, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("sample.jpg", array("width"=>200, "height"=>100, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("sample.jpg").image(width=200, height=100, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(100).crop("scale")).imageTag("sample.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample.jpg', {width: 200, height: 100, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})
React:
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="200" height="100" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample.jpg" >
  <cld-transformation width="200" height="100" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="100" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(100).Crop("scale")).BuildImageTag("sample.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(100).crop("scale")).generate("sample.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)
Flower

Cloudinary supports many image-cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, and imagga_scale.

Conclusion

Properly optimizing and caching images is a crucial step toward enhancing website performance. The tips this post offers are just a start. See the Cloudinary documentation for more ideas on optimization of JPEG images without compromising quality and on image transformations.


Want to Learn More About 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