Programmable Media

Optimize Images with Nuxt Cloudinary (video tutorial)

Last updated: Sep-12-2024

Overview

Learn how to optimize images in NuxtJS using Nuxt Cloudinary.

Video tutorial


Tutorial contents

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

Use Nuxt Cloudinary to deliver images

Jump to this spot in the video  0:00 The Nuxt way to load images uses the img tag. A better way uses Nuxt Cloudinary to deliver images with all the Cloudinary functionality.

Use the CldImage component to deliver images

Jump to this spot in the video  0:29 After Nuxt Cloudinary is installed, use the CldImage component to deliver images and pass the publicId of the image.

Nuxt Cloudinary optimizations

Jump to this spot in the video  1:00 Nuxt Cloudinary automatically adds Automatic format selection and Automatic quality selection to your delivery URLs.

Add image transformations

Jump to this spot in the video  1:18 Add image transformations to the CldImage component.

Support for responsive images

Jump to this spot in the video  1:43 To support responsive images, sizes and srcset attributes are automatically configured for you.

Keep learning

Related topics

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

Using the Nuxt Image Component
Deliver images using the Nuxt Image component
Optimization Tips
Tips for delivering optimized images
Content-aware Video Cropping
Smartly crop a video using content-aware AI

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: