Optimización de Imágenes con Next.js: Uso de Next.Image

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:48

Optimización de Imágenes con Next.js: Uso de Next.Image

Curso de Next.js 14

Clase 14 de 57

Clase 14 / 57

Recursos

¿Cómo optimizar imágenes en Next.js con Next Image?

El desarrollo web enfrenta múltiples desafíos y uno de los más comunes es la optimización de imágenes. Por ello, Next.js nos ofrece un recurso invaluable: el componente Next Image. ¿Por qué es crucial? Porque mejora el rendimiento de nuestra página web al controlar las Core Web Vitals, en concreto el Largest Contentful Paint (LCP). En este artículo exploramos cómo implementar Next Image y sacarle el máximo partido.

¿Qué es el componente Next Image?

Next Image es una herramienta poderosa de Next.js diseñada para optimizar imágenes automáticamente. Proporciona múltiples características, como la carga diferida (lazy loading), la compresión de calidad y el ajuste de dimensiones que ayudan a mejorar el rendimiento y la experiencia del usuario.

Implementación básica de Next Image

Para comenzar, primero debemos reemplazar nuestras etiquetas de imagen normales con el componente Next Image. Aquí tienes una guía básica para hacerlo:

import Image from 'next/image';

function MyComponent() {
  return (
    <Image 
      src="/path/to/image.jpg"
      alt="Descripción de la imagen"
      width={500}
      height={300}
    />
  );
}

¿Por qué usar width y height?

Una buena práctica al usar Next Image es especificar siempre las propiedades width y height. No solo mejora el LCP controlando las dimensiones de las imágenes, sino que también es obligatorio para evitar errores al desarrollar en Next.js. Así se asegura que las imágenes ocupen el espacio correcto desde el inicio, eliminando el "salto" visual.

¿Cómo funciona el lazy loading?

El componente Next Image aplica de manera automática la carga diferida, lo que implica que las imágenes se cargan lentamente mientras se desplaza hacia ellas. Sin embargo, si una imagen es crucial al inicio, podemos desactivar esta función estableciendo priority={true}.

Optimización de la calidad de imagen

Next.js permite ajustar la calidad de las imágenes. Por defecto, las imágenes se presentan al 75% de su calidad máxima. Si deseamos modificarla, simplemente ajustamos la propiedad quality:

<Image 
  src="/path/to/image.jpg"
  alt="Descripción de la imagen"
  width={500}
  height={300}
  quality={30}
/>

Esto puede ser útil cuando necesitamos equilibrar la calidad visual con el tiempo de carga.

¿Cuándo cambiar el comportamiento del lazy loading?

En ocasiones, desactivar el lazy loading es recomendable, como en el caso de las imágenes principales que aparecerán inmediatamente al cargar la página. Sin embargo, hay que considerar su tamaño y cargar diferentemente las imágenes grandes para evitar retrasos.

Consejos prácticos al usar Next Image

Imágenes grandes y principales: Desactiva el lazy loading manteniendo la prioridad en false si son esenciales al cargar.
Sitios con muchas imágenes: Aprovecha la carga diferida para mejorar la eficiencia del sitio.
Compresión y calidad: Experimenta con la calidad para encontrar el equilibrio perfecto entre apariencia y velocidad.

En resumen, Next Image ofrece una manera excepcional de optimizar imágenes en Next.js, proporcionando una mejora significativa en la usabilidad y rendimiento del sitio. Sigue aprendiendo y experimenta con estas configuraciones para descubrir cómo mejorar aún más la experiencia del usuario en tus proyectos web.

Juan Felipe Gutiérrez Torres

Hace 2 años

Una alternativa un poco menos dolorosa de animaciones condicionales es Framer-motion, tengan en cuenta que al ser un client-side tienen que hacer una mini modificacion al proyecto

En la carpeta home > crean una que se llame MotionDiv y dentro de la misma > MotionDiv.tsx

Alli agregan el siguiente código

"use client"

import {motion} from "framer-motion"

export const MotionDiv = motion.div;

Una vez crean este componente, no es mas que importarlo, reemplazando el div padre de la imagen y agregar una constante de variable

const imageVariants = {

hidden: {opacity: 0, scale: 0.25},

visible: {opacity: 1, scale: 1}

}

<MotionDiv

variants={imageVariants} initial="hidden"

animate="visible"

className={

styles.Description__imageContainer}

>

<Image src="/images/description.png" alt="products marketplace"

fill

priority={false}

/>

</MotionDiv>

Comentarios (11)11 comentarios

Mónica Pamela Arroyo Montiel

Hace 3 años

Renzo Mayer

Juan Pino

Carlos Mario Gomez Gelvez

Eleonora Lester

Max Andy Diaz Neyra

Willian Sanchez

Ignacio Tomas Ruiz Diaz

Bryan Navarro

Daniel Zambrano

Ariel Ezequiel Biazzo Genua

Hace 3 meses

Claudia Cruz García

Jhair Alejandro Cruz Palacios

Irene De la fuente

Mariangelica Useche

Team Platzi

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Optimización de Imágenes con Next.js: Uso de Next.Image