@floatingpixels/nuxt-imagetools

Nuxt Imagetools

Nuxt module for image manipulation and optimization. You simply put high-quality images in the assets folder, and import them in your pages and components. Optimized renditions are automatically generated during build-time, and an image component automatically uses the right, optimized image for each browser and resolution in runtime.

This module is a wrapper around sharp and imagetools.

✨  Release Notes

Features

• ⚡️ Ready-to-use image component
• 📦 Automatic image optimization
• 🚀 Output modern formats
• 🖼 Resize Images
• 🔍 Image lazy loading
• 📏 Image aspect ratio
• 📐 Image cropping
• 🔒 Remove Image Metadata

Optimizing your images by hand is a tedious and error-prone process: Opening the image in Photoshop, naming and exporting each image individually, and then reference everything correctly in the HTML. This is where imagetools comes to the rescue: simply reference your image in code, specify the needed transformations and imagetools will take care of the rest! All this happens during build-time, so your users will only download the optimized images.

This module optimizes images offline during built-time, providing an alternative to Nuxt Image and other modules, which mainly rely on CDNs and online optimization.

Quick Setup

• Add nuxt-imagetools to your project

# Using pnpm
pnpm add -D floatingpixels/nuxt-imagetools

# Using yarn
yarn add --dev floatingpixels/nuxt-imagetools

# Using npm
npm install --save-dev floatingpixels/nuxt-imagetools

• Add nuxt-imagetools to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['floatingpixels/nuxt-imagetools'],
})

That's it! You can now use imagetools in your Nuxt app ✨

Usage

To get started quickly, a sensible default configuration is provided. It generates webp and avif renditions in common browser resolutions for each image, and automatically generates a sourcemap that can be used in the provided Image component. This component selects the right image for each browser and resolution using the standard HTML picture element.

<script setup lang="ts">
// simply import your images and add ?imagetools to the end of the path
import pic_1 from '~/assets/high_quality_image.png?imagetools'
</script>
<template>
  <div>
    <Image
      :picture="pic_1"
      alt="Picture One"
      sizes="(min-width: 1280px) 50vw, 100vw"
    />
  </div>
</template>

The sizes attribute is used to specify the size of the image at different screen sizes. The browser will select the right image for the current screen size and resolution based on what you define here. The picture attribute is used to specify the image to be displayed. The alt attribute is used to specify the alternative text for the image.

Configuration

The defaults are trying to cover the most common use case. You can also customize the defaults, or generate different formats, sizes, aspect ratios and outputs and use them in whatever way you like. This is how to change the module defaults in nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  imagetools: {
    formats: ['avif', 'webp'],
    quality: 85,
    widths: [640, 768, 1024, 1280, 1600, 1920],
  }
}

formats

Formats to generate

• default: ['avif', 'webp']
• type: string[]

See vite-imagetools documentation for more information.

quality

Quality of the generated images (0-100)

• default: 85
• type: number

See vite-imagetools documentation for more information.

widths

Resizes the image to be the specified amount of pixels wide. If not given the height will be scaled accordingly.

• default: [640, 768, 1024, 1280, 1600, 1920]
• type: number[]

See vite-imagetools documentation for more information.

prefetch

Prefetch all images - setting to false prevents media to be included in the header as prefetch. If set to true Chrome loads ALL assets, including all renditions of assets that are not used, which is NOT what you want under normal circumstances.

• default: false
• type: boolean

See this Nuxt issue for details.