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
Node >= 10 y Nuxt.js >= 2 son necesarios.
Añade @aceforth/nuxt-optimized-images
a la sección buildModules
de nuxt.config.js:
Si estás usando Nuxt < 2.9.0
, usa modules
en su lugar.
{
buildModules: [
'@aceforth/nuxt-optimized-images',
],
optimizedImages: {
optimizeImages: true
}
}
Ve la sección de configuración para todas las opciones disponibles.
Las imágenes no se optimizan por defecto. Tienes que instalar los paquetes de optimización además de este módulo.
Esto no te obliga a descargar grandes librerías de optimización que ni siquiera utilizas. Por favor, consulta la tabla de todos los paquetes de optimización opcionales.
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:
Paquete de Optimización | Descripción | Enlace del Proyecto |
---|---|---|
imagemin-mozjpeg | Optimiza las imágenes JPEG | Enlace |
imagemin-pngquant | Optimiza las imágenes PNG | Enlace |
imagemin-optipng | Alternativa para la optimización de imágenes PNG | Enlace |
imagemin-gifsicle | Optimiza las imágenes GIF | Enlace |
imagemin-svgo | Optimiza las imágenes e iconos SVG | Enlace |
webp-loader | Optimiza las imágenes WebP y puede convertir imágenes JPEG/PNG a WebP sobre la marcha (consulta de recursos WebP) | Enlace |
lqip-loader | Genera placeholders de baja calidad y puede extraer los colores dominantes de una imagen (consulta de recursos lqip) | Enlace |
responsive-loader | Puede cambiar el tamaño de las imágenes sobre la marcha y crear múltiples versiones para srcSet . Importante: Necesitas instalar adicionalmente jimp (implementación de node, más lento) o sharp (binario, más rápido) | Enlace |
sqip-loader | Carga imágenes y exporta pequeños placeholders como datos codificados por URL del tipo image/svg+xml | Link |
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
Ten en cuenta que, por defecto, las imágenes sólo se optimizan para compilaciones de producción, no para compilaciones de desarrollo. Sin embargo, esto puede cambiar con la configuración de optimizeImagesInDev
.
Dependiendo de tu configuración de compilación/despliegue, también es posible instalarlos como devDependencies. Sólo asegúrate de que los paquetes estén disponibles cuando construyas tu proyecto.