Optimización y Responsividad con NextImage en Next.js

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:009:33

Optimización y Responsividad con NextImage en Next.js

Curso de Next.js 14

Clase 15 de 57

Clase 15 / 57

Recursos

Optimizar imágenes en aplicaciones web no solo mejora el rendimiento, sino que transforma por completo la experiencia de usuario. El componente Next Image ofrece herramientas poderosas para lograr esto, pero requiere conocer ciertos detalles para aprovechar todo su potencial, especialmente cuando se busca un diseño responsive y efectos visuales como el blur placeholder.

¿Cómo hacer una imagen responsive con la propiedad fill?

Cuando se define un width y un height fijos en el componente Image, la imagen puede romperse en pantallas más pequeñas como celulares o tablets [01:00]. La solución es reemplazar esas dimensiones fijas por la propiedad fill. Esta propiedad hace que la imagen ocupe el cien por ciento del ancho y alto de su contenedor padre.

El truco fundamental está en envolver la imagen dentro de un div contenedor y asignarle estilos específicos [01:34]. Por ejemplo:

Crear un div con un className como imageContainer.
Definir en los estilos SASS o CSS el width y height deseados.
Agregar position: relative al contenedor, ya que la imagen con fill recibe automáticamente position: absolute [02:22].

Gracias a este patrón, se pueden escribir media queries dentro del contenedor para modificar las dimensiones según el tamaño de pantalla [03:28]. Next.js genera automáticamente diferentes sizes optimizados para cada resolución, ya sea 1080 o 1440 píxeles, seleccionando la versión más adecuada.

¿Qué hace la propiedad object fit en el componente image?

Cuando se usa fill, la propiedad object-fit controla cómo se comporta la imagen dentro del canvas disponible [03:58]:

contain: la imagen se expande lo máximo posible sin perder sus proporciones originales.
cover: la imagen se amplía para cubrir todo el espacio del padre, recortando si es necesario.

Esto resulta muy útil para crear layouts atractivos que respeten la proporción original de cada imagen [04:40].

¿Cómo agregar un placeholder blur a las imágenes?

El placeholder blur es un efecto que muestra una versión borrosa y ligera de la imagen mientras esta termina de cargar [05:08]. Para implementarlo se necesitan dos propiedades en el componente Image:

placeholder="blur".
blurDataURL con un string en formato base 64 que representa una versión preoptimizada de la imagen.

¿Cómo generar el blur data URL?

Existen herramientas en línea como Blur Deep que permiten subir la imagen y obtener el data URL correspondiente [05:34]. Se puede ajustar la calidad del placeholder: un valor alrededor del 80 % ofrece un buen balance entre nitidez del efecto y peso del archivo [06:00].

Una buena práctica es almacenar este valor como una constante fuera del componente para mejorar el rendimiento en React y mantener el código limpio [06:18]. Si se prefiere, puede guardarse en un archivo separado.

Para verificar el efecto, se pueden usar las herramientas de desarrollador del navegador configurando la red en slow 3G y recargando sin caché [06:42]. La imagen aparece primero con el blur y progresivamente se carga la versión completa.

¿Qué ventajas y trade offs tiene esta optimización?

Este efecto de blur mantiene los estándares de las Core Web Vitals porque no altera el tamaño del layout ni de la imagen, solo cambia el contenido visual durante la carga [07:22]. El LCP (Largest Contentful Paint) se beneficia directamente de esta estrategia.

Sin embargo, existen consideraciones importantes:

El desarrollo se vuelve más complejo al manejar de forma estática cada imagen y su blur data URL [07:42].
Las imágenes dinámicas, como las que provienen de una API o una URL que cambia constantemente, no pueden generar este efecto fácilmente [07:56].
Para imágenes dinámicas, aún se puede aprovechar el componente Image con dimensiones fijas de width y height.

La recomendación final es diseñar layouts lo más flexibles posible, sin cambios bruscos de proporciones, y aprovechar al máximo el componente Image especialmente cuando las imágenes son estáticas. ¿Ya implementaste estas optimizaciones en tu proyecto? Comparte tu experiencia y qué estrategia te funcionó mejor.

Sebastian Pedroza

Hace 3 años

Hola chic@s tengo una duda

¿Las optimizaciones del componente Image se hacen solo cuando el proyecto se despliega en vercel o también lo hacen en mi servidor, es decir, las optimizaciones y los cargos de facturación por dichas optimizaciones de imágenes solo se hacen en vercel o en mi server también?

Gracias por la ayuda 👍

GEMILLE ADASSI VAZQUEZ ESTRADA

Hace 2 años

Las optimizaciones del componente Image en Next.js están disponibles tanto en los despliegues en Vercel como en cualquier otro servidor en el que alojes tu proyecto Next.js. Sin embargo, hay algunas diferencias importantes en cómo se manejan y se facturan estas optimizaciones dependiendo del entorno en el que despliegues tu aplicación.

Despliegue en Vercel

Cuando despliegas tu proyecto Next.js en Vercel:

Optimización Automática: Las imágenes se optimizan automáticamente utilizando la infraestructura de Vercel.
Facturación: La optimización de imágenes es un servicio incluido en los planes de Vercel. Dependiendo de tu plan, podrías estar sujeto a cargos adicionales si excedes ciertos límites (como la cantidad de imágenes optimizadas o el ancho de banda utilizado).
CDN: Vercel utiliza una CDN (Content Delivery Network) para servir las imágenes optimizadas, lo que mejora significativamente la velocidad de carga y la experiencia del usuario.

Despliegue en tu Propio Servidor

Cuando despliegas tu proyecto Next.js en tu propio servidor (o en cualquier otro proveedor de hosting):

Optimización Automática: Las optimizaciones de imágenes también están disponibles y se realizan utilizando la configuración de Next.js. Next.js incluye un servidor de imágenes que puede optimizar y servir las imágenes.
Facturación: No hay cargos adicionales específicos para la optimización de imágenes por parte de Next.js. Sin embargo, deberás considerar el costo del ancho de banda y el almacenamiento en tu propio servidor o en el proveedor de hosting que utilices.
Configuración Adicional: Podrías necesitar configurar algunas opciones adicionales en tu next.config.js para manejar las optimizaciones de imágenes correctamente en tu entorno de producción.

Configuración Adicional para Servidor Propio

Aquí hay un ejemplo de cómo podrías configurar Next.js para optimizar imágenes en tu propio servidor:

Archivo: next.config.js

javascriptCopiar códigoconst nextConfig = { images: { domains: ['example.com'], // Agrega los dominios de los que deseas permitir la carga de imágenes deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], }, };

export default nextConfig;

Ejemplo de Uso del Componente Image

Archivo: pages/index.js

jsxCopiar códigoimport Image from 'next/image';

const HomePage = () => { return ( <div> <h2>Welcome to Our Website</h2> <Image src="/images/your-image.jpg" // Ruta relativa a la carpeta public alt="An example image" width={500} height={300} /> </div> ); };

export default HomePage;

Conclusión

En Vercel: Las optimizaciones de imágenes se manejan automáticamente y se facturan según el plan que tengas en Vercel.
En tu Propio Servidor: Las optimizaciones de imágenes también están disponibles, pero debes considerar el costo del ancho de banda y almacenamiento en tu servidor o proveedor de hosting.

En ambos casos, Next.js facilita la optimización de imágenes, mejorando la experiencia del usuario y el rendimiento de la aplicación. Sin embargo, es importante comprender las implicaciones de costos y configuraciones adicionales dependiendo del entorno de despliegue.

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 y Responsividad con NextImage en Next.js