Cloudinary Blog

Python Image Optimization and Transformation

Python Image Optimization and Transformation

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 Python images.

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 affects your search-engine ranking. Optimized images invariably cause your site to load faster.
  • Storage: Optimized images result in smaller files, hence less storage space.
  • Bandwidth: Optimized images save data bandwidth, correspondingly lowering your hosting cost and your site 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 builds on 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 JPEG, PNG, and animated GIF images on the web. The script produces lossless and only slightly compressed images, which nonetheless reduce load time and your site’s bandwidth.
  • With smush.py, a Python command-line tool that functions as a lossless image optimizer for displaying images online. Smush.py originated from Yahoo’s smush.it service.
  • With Tinify, a Python package for compressing and optimizing JPEG and PNG images by means of the Tinify API.
  • With scikit-image, an image-processing library in Python with a versatile set of routines, e.g., rescale and resize, for optimizing and transforming images.

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 your 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 your 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 select 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 as parameters, 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 of those formats.

  • Resizing and cropping: By adding the width (w) and height (h) parameters to their URLs, you can resize images with Cloudinary, 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

Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Read more
TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Read more
lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

As a 20-year online leader in travel and leisure retail, Europe-based public company lastminute.com along with its 1,200 employees are committed to enriching the lives of vacationers through comprehensive and enticing products and services. Beyond flight deals and tours, it's the images and videos, whether of that luxury villa in Greece, romantic Parisian street, or exotic stroll through the Marrakech markets, that attract audiences and boost bookings.

Read more