Optimize images in Flutter (video tutorial)

Overview

Learn how to optimize the delivery of your images in Flutter.

Video tutorial

Tutorial contents

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

Introduction

0:00	Cloudinary image optimization can dramatically reduce the bandwidth you use when delivering images. This tutorial shows how to trim bandwidth usage by directly applying transformations to images within your Flutter code, ensuring the automatic delivery of optimized images.

Set up the CldImageWidget

0:23	Display an image in your Flutter app by using the CldImageWidget. Note: If you need help installing the Flutter SDK and the required packets needed to import the CldImageWidget, see the Configure the Flutter SDK video tutorial.

Pass an public ID to display the image

0:40	Go to the Media Library and copy a public ID of the image you'd like to display. Replace <publicID> in the code snippet above with the public ID you copied. Reload your application and watch your image appear.

How much bandwidth does your un-optimized image use?

0:56	Access your Flutter DevTools in a browser, then, from the debugging tools, copy the URL of your new image and paste it into Insomnia (or use Postman, Curl, or any other API testing tool). Initiate a GET request and observe the size of your image. In this tutorial, the sample image is 1.4 MB, aligning with the size displayed in the Media Library.

Add a transformation to optimize your image

1:37

Add a transformation property to your cope snippet. Pass the ..delivery(Delivery.format(Format.auto)) parameter to deliver the image in the most suitable format for the requesting device, such as delivering WEBP instead of JPEG. Additionally, include the ..delivery(Delivery.quality(Quality.auto())) parameter to achieve the optimal balance between size and visual quality when delivering the image. Save and refresh your application.

How much bandwidth does your optimized image use?

2:25	Return to your DevTools and locate the URL for your optimized image. Observe that the URL now includes the f_auto and q_auto parameters. Paste this updated URL into the Insomnia tool and observe the image size reduced to 547.9 KB, just 33% of the original 1.4 MB.

Resize the image

3:08	The image is currently oversized. To ensure it fits the 400 x 250 SizedBox in your Flutter application, include the resize parameter in the transformation. Add the following line of code, refresh your app, and observe that the image is now properly sized.

How much bandwidth does your optimized, resized image use?

3:46	Return to DevTools and copy the resized, optimized image URL from Cloudinary. The URL includes additional parameters for resizing the image c_fit, h_250, w_400. When you insert this URL into Insomnia, the image size shrinks to 13.4 KB, a stark contrast to the original 1.4 MB. Consider the bandwidth savings across numerous images in your app.

---

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.