next/image es el reemplazo optimizado de Next.js para la etiqueta <img>. Aplica automáticamente un conjunto de mejores prácticas de rendimiento de imagen que de otro modo implementarías manualmente.
tsx
;
() {
(
);
}
next/image es el reemplazo optimizado de Next.js para la etiqueta <img>. Aplica automáticamente un conjunto de mejores prácticas de rendimiento de imagen que de otro modo implementarías manualmente.
;
() {
(
);
}
srcset responsivo — genera múltiples tamaños para que cada dispositivo descargue el correcto.priority).width/height requerido (o fill) reserva espacio para que la página no salte cuando se carga la imagen.placeholder="blur" muestra una pequeña vista previa desenfocada mientras se carga.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Usa fill (en lugar de width/height fijo) cuando la imagen debe llenar su padre posicionado — común para imágenes hero/portada.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Las imágenes suelen ser los activos más pesados en una página y una causa principal de Core Web Vitals pobres (LCP, CLS). next/image automatiza cambio de tamaño, formatos modernos, srcset responsivo, carga perezosa y prevención de cambio de diseño — convirtiendo una tarea de rendimiento importante en un único componente, con priority para la imagen LCP siendo el único control que debes recordar.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar