Large (largewise, not bytewise 😉) images are beautiful, but they come with some downsides. One of them is the loading time. Nobody has the time or resources to wait a long time just to download an obnoxiously large image. This makes finding good tools to compress image sizes essential. Fortunately, Nuxt 3 has an available plugin that allows you to determine how your image shall be downloaded.

Nuxt Picture

How to use Nuxt Picture

To use Nuxt Picture in one's Nuxt project, you have to install it like every other plugin.

# bash
pnpm add @nuxt/image

And add it to the nuxt.config.ts.

// ./nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
});

To change the directory from public to assets, you have to add the following to the nuxt.config.ts.

// ./nuxt.config.ts
image: {
    dir: '/assets/images'
},

This allows Nuxt Picture to take the pictures from the assets/images folder.

Let’s say you have a picture of a cute dog, which is located in the following path:

assets/images/cute-dog.jpg

A plus point for this is that this prevents the source images from being copied into dist and deployed. Therefore, these huge source images won't be used in production and your page speed will safely stay low. If you keep your pictures in the public folder, they will be copied to dist and deployed making them usable on the page and as these pictures are very large, they will increase the risk of a longer page load.

From JPG to AVIF: Compress effortlessly

A JPG is good for the picture quality but bad for the loading time, as it tends to get very large. Fortunately, there are other and newer picture compressions such as WebP and AVIF. AVIF has the lowest picture compression of all the picture formats but still retains a good picture quality, going from MB to kB.

You might think, "Do I have to convert all my pictures to AVIF now?" No. Nuxt Picture can do this for you. More than that. Using Nuxt Picture instead of Nuxt Image can help you convert not only to avif, but to any other picture format. This is great as avif has a browser compatibility of 88% which isn't enough. To amp this up, we need other picture formats as fallbacks. This is why we used webp as the fallback for when avif is not supported.

To achieve this, you have to do the following.

<!-- ./pages/index.vue -->
<template>
  <NuxtPicture url="cute-dog.jpg" format="avif,webp" :img-attrs="{alt: "A cute Dog", class:"w-full object-cover"}" />
</template>

Side note: The path to your picture is predefined by the directory in which Nuxt Picture is searching for your image — ours being assets/images. Therefore, you only have to add on to this path and only state cute-dog.jpg instead of assets/images/cute-dog.jpg, as this would be turned into assets/images/assets/images/cute-dog.jpg. Watch out for this.

When the picture is downloaded on your page, you can check the picture size in your network tab in the developer tools.

You see that the file ending is not changing—it still states .jpg, but internally Nuxt Img created a version of your picture and converted it to AVIF. This is an ongoing issue, which you can find here. You can do this with several picture formats—go to Nuxt Picture to learn more about these formats.

And here you have it - a page with large pictures without compromising on the page load.