Optimize images in Flutter (video tutorial)
Last updated: Sep-02-2024
On this page:
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
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
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
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?
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
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?
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
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?
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
Related topics
- Read our image optimization guide to learn about delivering your images more efficiently.
- Take a look at our Flutter SDK for more image transformations.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Configure the Flutter SDK
Install and configure the Cloudinary Flutter SDKOptimization Tips
Tips for delivering optimized imagesVideo Transformations
Build an e-commerce video showcasing products, in Node.js
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.
✖️