15 marzo de 2019(2 min. de lectura)

Una nueva forma de optimizar las imágenes en tus proyectos Nuxt

Julio Marquez
Julio Marquez@juliomrqz
Claude Giovagnoli
Claude Giovagnoli@giovagnoli
Patricia Mora
Patricia Mora@patriciajumper
Creamos un nuevo módulo que permite optimizar automáticamente las imágenes utilizadas en los proyectos Nuxt.js (JPEG, PNG, SVG, WebP y GIF).
Una nueva forma de optimizar las imágenes en tus proyectos Nuxt

Estamos muy emocionados de presentarte otro módulo que hemos creado para el ecosistema de Nuxt.js: Nuxt Optimized Images, una nueva forma de optimizar automáticamente las imágenes utilizadas en tus proyectos (JPEG, PNG, SVG, WebP y GIF).

Ahora puedes reducir fácilmente el tamaño de tus imágenes hasta en un 60%, pero esto no es lo único que se puede hacer:

  • 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.
  • 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.
  • 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 y extraer los colores dominantes de las mismas.

Primeros Pasos

Empezar es sencillo, sólo instala el módulo de la siguiente manera:

npm install @bazzite/nuxt-optimized-images # o yarn add @bazzite/nuxt-optimized-images

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

{
  modules: [
    '@bazzite/nuxt-optimized-images',
  ],
}

Puedes importar o requerir tus imágenes directamente en tus componentes Vue:

<template>
  <picture>
    <source :srcset="require('~/assets/my-image.jpg?webp')" type="image/webp" />
    <source :srcset="require('~/assets/my-image.jpg')" type="image/jpeg" />
    <img :src="require('~/assets/my-image.jpg')" />
  </picture>
</template>

<!-- 
 Resulta en:

<picture>
  <source srcset="/_nuxt/images/d6816ecc.webp" type="image/webp" />
  <source srcset="/_nuxt/images/5216de42.jpg" type="image/jpeg" />
  <img src="/_nuxt/images/5216de42.jpg" />
</picture>
-->

There are several additional options you can specify as query params when you import the images, just follow the documentation for more information.

Contribuye a Nuxt Optimized Images

Nuxt Optimized Images es un proyecto completamente abierto, cualquier contribución es bienvenida, incluso dándonos una estrella en GitHub ★ o corriendo la voz 🤓.

Documentación y Soporte

Si deseas más detalles sobre cómo configurar y utilizar este módulo, la documentación completa está disponible en https://www.bazzite.com/es/docs/nuxt-optimized-images/.

Para Informes de fallos o Solicitudes de Características, utiliza la sección de Issues. Pero, si tienes preguntas, por favor ve al Chat de la Comunidad.

También puedes seguirnos en Twitter para futuras actualizaciones y temas valiosos.

Soporte Profesional

Si necesitas Asistencia Profesional para tu(s) proyecto(s), ponte en contacto con nosotros en https://www.bazzite.com/contact.

BazziteDesarrollamos Soluciones Inteligentes, para el éxito que su negocio merece.
Español
© Bazzite, LLC 2019. Todos los derechos reservados. Privacidad y Términos
3030 N. Rocky Point Dr. STE 150A. Tampa, Florida, 33607. USA.
Encuéntranos en