Optimize images in React (video tutorial)

Overview

Unoptimized images are a leading cause of performance problems on websites, resulting in slow loading times that frustrate users and hurt conversion rates. This tutorial demonstrates how to use the Cloudinary React SDK to automatically optimize images with format and quality transformations, and resize them to match your UI requirements. Learn how to reduce image file sizes from megabytes to kilobytes while maintaining visual quality.

For more information on image optimization techniques, see the image optimization guide. To learn about React SDK configuration, see React integration.

Video tutorial

Tutorial contents

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

Introduction

0:00	Unoptimized images are a leading cause of performance problems on websites. Slow loading websites frustrate users and hurt conversion rates. Learn how Cloudinary's React SDK makes it easy to optimize images automatically.

Demo application

0:44	See a demo application that loads images from the local machine. These images are completely unoptimized, resulting in huge file downloads that slow down the website.

Configuring the Cloudinary SDK

1:17	Change the image source attribute to point to Cloudinary instead of the local machine. The images are already uploaded to Cloudinary in their original file size, ready to be optimized. See how to configure the React SDK in your application.

Adding format and quality optimization

2:26	Use the Cloudinary React SDK's advanced image component and chain on optimization parameters. Add the format('auto') method to let Cloudinary automatically choose the best format (WebP, JPEG, PNG) for the browser. Add the quality('auto') parameter to let Cloudinary determine the optimal quality setting.

Restricting image dimensions

3:06	Further optimize by restricting the image size to match your UI requirements. Use the resize() method with the scale() parameter to set a maximum width of 400 pixels, ensuring users only download images sized appropriately for display.

Results

3:40	See the dramatic improvement: images reduced from 4 megabytes to just 10-20 KB. All images are served in WebP format, the most efficient format for the browser. The page looks just as good but loads much faster, providing a better user experience.

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.