Imágenes Optimizadas para Nuxt

Optimiza automáticamente las imágenes utilizadas en los proyectos en Nuxt.js (JPEG, PNG, SVG, WebP y GIF).

Este módulo está inspirado en el trabajo de Cyril Wanner en next-optimized-images.

Características

El tamaño de las imágenes puede reducirse hasta un 60%, pero esto no es lo único que hace @aceforth/nuxt-optimized-images:

• Reduce el tamaño de las imagenes al optimizar las imágenes durante la compilación.
• Mejora la velocidad de carga al proporcionar imágenes progresivas (para formatos que lo soportan).
• Hace que las imágenes pequeñas se guarden en línea para ahorrar solicitudes HTTP y los viajes de ida y vuelta adicionales.
• Agrega un hash de contenido al nombre del archivo para que las imágenes puedan almacenarse en caché a nivel de CDN y en el navegador durante mucho tiempo (Este es el comportamiento por defecto de Nuxt.js).
• Mismas URLs de imágenes en múltiples compilaciones para un almacenamiento en caché a largo plazo.
• Proporciona parámetros de consulta (query params) para la gestión y configuración de archivos específicos.
• Las imágenes JPEG/PNG se pueden convertir a WebP sobre la marcha para un tamaño aún más pequeño.
• Puede redimensionar imágenes o generar placeholders de baja calidad (lqip) y extraer los colores dominantes de las mismas.

Instalación

yarn add --dev @aceforth/nuxt-optimized-images

npm install --save-dev @aceforth/nuxt-optimized-images

Añade @aceforth/nuxt-optimized-images a la sección buildModules de nuxt.config.js:

{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],

  optimizedImages: {
    optimizeImages: true
  }
}

Ve la sección de configuración para todas las opciones disponibles.

Paquetes de Optimización

Además de este módulo, deberás instalar los paquetes de optimización que necesites en tu proyecto. Luego, @aceforth/nuxt-optimized-images detecta todos los paquetes soportados y los usa.

Así que sólo tienes que instalar estos paquetes con npm, no hay ningún paso adicional necesario después de eso.

Los siguientes paquetes de optimización están disponibles y soportados:

Ejemplo: Si tienes imágenes JPG, PNG y SVG en tu proyecto, necesitarás ejecutar

npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

# o

yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

Para instalar todos los paquetes opcionales, ejecuta:

npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo  webp-loader lqip-loader responsive-loader sqip-loader sharp

# o

yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo  webp-loader lqip-loader responsive-loader sqip-loader sharp