> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](image_optimization). To learn about React SDK configuration, see [React integration](react_integration).

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=44 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=17 :player=cld} | 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](react_integration) in your application. |

### Adding format and quality optimization
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=26 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=06 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=40 :player=cld} | 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

> **READING**:
>
> * Read our [image optimization guide](image_optimization) to learn about delivering your images more efficiently.

> * Take a look at our [React SDK](react_integration) for more [image transformations](react_image_transformations).

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

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

  
    Optimize Videos in React
    Optimize delivery of videos in a React app 
  

    Product Gallery in React
    Embed the Cloudinary Product Gallery in a React app 
  

    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

&nbsp;

&nbsp;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.
&nbsp;