DEV Community

Cover image for Performant Images with Nuxt Image and Cloudinary
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

4

Performant Images with Nuxt Image and Cloudinary

When people ask me what is my first recommendation when trying to improve performance of their websites, my first idea is always to look at the images. Are they served in the modern and optimized formats? Are they properly sized? Are they lazy loaded properly so that the browser will start fetching them the time they are actually needed?

And because of that, I always tend to start using performant images in my projects from the very beginning. As my favourite modern web framework is Nuxt, I instantly thought about Nuxt Image - a module that helps you deliver more performant images to your users. But in order to deliver even better experience, you can configure your Nuxt Image module to work with one of many third party image providers - and here I will always choose Cloudinary 🚀

In this article, I will show you how you can use Nuxt Image and Cloudinary to deliver optimized and performant images to your users.

I hope you will like it :)

Enjoy!

🟢 Performant images with Nuxt Image and Cloudinary

The first thing we need to do to have these performant images is to install the Nuxt Image module in our project. We can do so by using nuxi like following:

npx nuxi@latest module add image
Enter fullscreen mode Exit fullscreen mode

This will add the module to our project with the default (local) configuration. In order to work with Cloudinary, we would need to change that to following:

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

The Cloudinary provider for Nuxt Image automatically enables automatic format selection and automatic quality selection for best performance. And this means, that we do not need to take care of these aspects unless our use case is different than the most common ones.

Apart from automatic quality and format selection, there are several things we could do to deliver more performant and optimized images to our users.

First, we can configure the sizes property of our images that will be used to generate resized and optimized versions of an image. It can be done like following:

export default defineNuxtConfig({
  image: {
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})
Enter fullscreen mode Exit fullscreen mode

Next, we can add global modifiers that will be added to all our images like following:

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
      modifiers: {
        quality: 'auto:best',
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

And finally, for the NuxtImg component itself, we could pass following props to achieve better performance:

<NuxtImg src="/nuxt-icon.png" loading="lazy" />
Enter fullscreen mode Exit fullscreen mode

You can check all list of available props here

However, if you are looking for more advanced Cloudinary usage or prebuilt components like VideoPlayer, OgImage or ProductGallery, check out Cloudinary module for Nuxt by visiting module documentation or GitHub repository.

I have also published few articles about it that you can check out here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

Vue School Link

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use both Nuxt Image and Nuxt Cloudinary module to deliver performant images to your user.

Take care and see you next time!

And happy coding as always 🖥️

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
andrea_wilson_05b8c94be95 profile image
Andrea Wilson

Great Post

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay