Convert image to webp in nuxtjs | Image Optimization

This article is how to optimize image and convert images into webp format in nuxtjs application.

Images play an important part in website to make a site visually attractive or to convey message and information in article or in blog post.

However if the images are not optimized or the size are huge, that will increase the load time of the webite and overall speed of the website.

But if you are using a Nuxt framework to create site like me, then optimizing image is very easy with it's image module.

Nuxt JS provide us with nuxt/image, which is a plug and play image optimization module for nuxt app. It helps us resize and transform our images in our code using its bult-in optimizer.

Optimize images with @nuxt/image

Follow the steps below to add and configure the plugin.

Step 1: First install @nuxt/image in your project.

npm install -D @nuxt/image
//For Yarn
yarn add --dev @nuxt/image

Step 2: Add the module in your nuxt.config.js file

export default {
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ]
}

If you are using your target as server in your nuxt.config.js file, then add @nuxt/image in your modulessection.

export default {
  modules: [
    '@nuxt/image',
  ]
}

Once you have added the module in your nuxt config, you can then use <nuxt-img> and <nuxt-picture> component in your app.

Usage of nuxt-img component

So now instead of using native img tag, you have to replace it with nuxt-img tag in your template. nuxt-imageoutput a native img tag once you build the app.

<nuxt-img src="/nuxt-icon.png" />

The module provide us with different props, which we can use according to our needs.

However, i have use only two props,

1. quality : to set the quality of my image and

2. format: to set the format of the output image. I have use the webp format.

<nuxt-img quality="80" format="webp" src="/nuxt-icon.png" />

You can use any of the available formats : webp, jpeg, jpg, png, gif and svg. If you don't specify any format, it will use the default format of the image.

You can go through the nuxt/image documentation to add props in your <nuxt-img > component.

Once you are done with it, you can just build or generate your site and deploy it. It will optimize your images accordingly.

Related Topics:

Add Code Syntax Highlighter PrismJS to Nuxtjs

How To Add Font Locally In Nuxt App

How To Add Robots.txt in your Nuxtjs Application

Generate sitemap for dynamic routes in nuxtjs application