> ## 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.

# Next.js image optimization and dynamic cropping (video tutorial)


## Overview

Learn how to optimize and dynamically crop images in a Next.js application using the [CldImage](nextjs_image_transformations) component from the [Next.js SDK](nextjs_integration). This tutorial shows how replacing the standard Next.js Image component with CldImage avoids double optimization, automatically applies the best format and quality settings, and unlocks Cloudinary features like dynamic cropping and resizing.

## 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.### Why use Next Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=05 :player=cld} | Next.js has built-in ways to load images, but if you're already using Cloudinary, passing optimized images through the Next.js Image component means double optimization. The [Next.js SDK](nextjs_integration) gives you all the features of Cloudinary directly in your Next.js app without the redundancy. |

### Installing and replacing the Image tag
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=34 :player=cld} | Once the Next.js SDK is installed and you've imported the [CldImage](nextjs_image_transformations) component, replace the existing Next.js Image tag with CldImage. Instead of referencing the full Cloudinary URL, pass in only the public ID to load images directly from Cloudinary. |

### Automatic optimization
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=52 :player=cld} | By default, CldImage loads all images with [f_auto and q_auto](image_optimization#how_to_optimize_image_quality). With f_auto, Cloudinary automatically determines the most modern and efficient format for the requesting browser. With q_auto, it compresses the image as much as possible without visible distortion. |

### Responsive image sizing
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=19 :player=cld} | Because CldImage wraps the Next.js Image component, responsive sizing works the same way. Pass in sizes (e.g., `50vw` for a two-column layout) and all responsive breakpoints are generated using Cloudinary URLs. |

### Dynamic cropping and resizing
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=33 :player=cld} | Use Cloudinary's [dynamic cropping](resizing_and_cropping) to make images uniform. Set a width and height, and use `crop="fill"` to fill the dimensions. Automatic gravity is applied by the SDK, so you don't need to worry about your displayed images missing important content. |

### Learn more and review
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=02 :player=cld} | Visit the [Next.js SDK documentation](nextjs_integration) for configuration details and examples including background removal and more. In summary, the CldImage component gives you optimization, dynamic cropping, and resizing, all delivered from the Cloudinary CDN. |

## Keep learning

> **READING**:
>
> * Learn more about [image optimization](image_optimization) to deliver images with the best quality at the smallest file size.

> * Explore [image transformations](image_transformations) to discover all available options for resizing, cropping, and enhancing images.

> * Get started with the [Next.js SDK](nextjs_integration) and learn how to configure it for your project.

> * 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...

  
    Using the Next.js Image Component
    Deliver images using the Next.js Image component 
  

    Optimize Videos in Next.js
    Optimize delivery of videos in a Next.js app 
  

      Crop and Resize Images in React
      Crop and resize images using React with Cloudinary 
  

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