Crop and resize images in Python (video tutorial)

Overview

Learn how to dynamically generate images at different sizes and aspect ratios, and dynamically crop with AI in Python using Cloudinary.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Managing image delivery

0:00	Delivering images at full size can lead to longer loading times and increased bandwidth usage. The Cloudinary Python SDK allows you to efficiently resize or crop images to optimize performance. Additionally, you can programmatically change the aspect ratio while ensuring that the most important parts of the image remain in focus.

Generating image URLs

0:20	Assuming you have Cloudinary configured, import the CloudinaryImage method. Then, use this method and pass it the public ID of an image to obtain its delivery URL. Include the 'format': 'auto' and 'quality': 'auto' parameters to ensure optimal delivery for different browsers.

Resizing using HTML

0:48	Open the image resized with HTML. In Dev Tools, you'll notice that the image is delivered at its original large size, even though it fits within the declared dimensions. This results in unnecessary bandwidth usage.

Resizing images with Cloudinary

1:10	To reduce bandwidth and loading times, resize the actual image by adding the c_scale parameter to the Cloudinary image method, adjusting the width to 600 pixels and significantly reducing the file size. Notice in Dev Tools the image is now significantly resized.

Cropping images for aspect ratio

1:31	For specific aspect ratios, change the method from 'crop': 'scale' to 'crop': 'crop' and define dimensions (e.g., 2000 x 2000 pixels). Use the 'gravity': 'auto' parameter to ensure the crop focuses on important areas, like a face.

Further scaling cropped images

2:04	To further reduce size, chain transformations by adding 'crop': 'scale' and specifying a width of 600 pixels. This approach provides flexibility and control over the final image dimensions, ensuring it meets your design needs while remaining as small as possible.

Exploring different cropping techniques

2:30	You can crop to different dimensions to zoom in or out. For example, cropping to 3000 x 3000 pixels and then scaling down or using 'crop': 'auto' to automatically determine the best crop based on the subject's position.

Automatic scaling with the fill cropping mode

3:30	The fill cropping mode automatically scales the image to fit specified dimensions while cropping as necessary, ensuring the final image is both visually appealing and appropriately sized.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.