Docs - Nuxt Image

1. About Nuxt Image

Nuxt Image is a module that allows you to optimize images in your Nuxt project. It is built on top of the native <img> tag and provides a set of directives to optimize images.

It is crucial for performance optimization and to ensure that images are displayed correctly on different devices and screen sizes. Also to provide an ability to use responsive images from CDN that are easily managed and updated.

You can learn more about Nuxt Image here.

2. Default Configuration

Taskify uses recommended configuration of Nuxt Image.

image: {
  format: ["webp"],
  screens: { // Screen sizes are from Tailwind CSS
    xs: 320,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    xxl: 1536,
    "2xl": 1536,
  },
},

3. Optimization Techniques

Typical optimization techniques are:

Using format attribute to control the image format. Default is webp.
Using fit attribute to control how the image is resized to fit the container.
Using width and height attributes to control the size of the image. Responsive images are automatically generated.
Using alt attribute to provide a description of the image for accessibility.
Using loading attribute to control the load asynchronously or not.
Using preload attribute to control the preloading behavior of the image.

Here is an example of how to use these attributes:

<NuxtImg
  format="webp"
  width="1500"
  height="600"
  fit="cover"
  :preload="true"
  src="/img/about.png"
  alt="Office Image"
  class="rounded-xl"
/>

4. Image Formats and CDN Support

webp is the current most recommended image format for modern browsers. It is supported by all modern browsers and provides a good balance between image quality and file size.

Taskify do not use any CDN for images. All images are served from locally using nuxt-image module. Nuxt Image module uses IPX to serve images from static folder.