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 component from Next Cloudinary. 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

Tutorial contents

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

Why use Next Cloudinary

0:05	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. Next Cloudinary gives you all the features of Cloudinary directly in your Next.js app without the redundancy.

Installing and replacing the Image tag

0:34	Once Next Cloudinary is installed and you've imported the CldImage 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

0:52	By default, CldImage loads all images with f_auto and q_auto. 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

1:19	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

1:33	Use Cloudinary's dynamic 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

2:02	Visit next.cloudinary.dev for documentation, 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

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.