El texto es barato (kilobytes). Las imágenes son caras (megabytes). Si carga un archivo JPEG de 5 MB directamente desde una cámara DSLR a su página de inicio, ha cometido un delito contra el rendimiento. En una red 3G, esa imagen tarda 20 segundos en cargarse. El usuario se ha ido. Optimización de imágenes es lo más impactante que puede hacer para Core Web Vitals.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

La guerra de formatos: JPG vs WebP vs AVIF

JPG/PNG: La vieja guardia. Pesado. PNG es bueno para la transparencia, pero enorme.
WebP: el estándar de Google. 30% más pequeño que JPG. Compatible con todos los navegadores modernos.
AVIF: El nuevo rey. Basado en el códec de vídeo AV1. 50% más pequeño que JPG. Soporte HDR. Estrategia: Sirve AVIF a los navegadores que lo admiten (Chrome, Safari). Recurrir a WebP. Regresar a JPG. Next.js <Imagen /> hace esto automáticamente.

Tamaño adaptable (srcset)

Un usuario en un iPhone (pantalla de 375 px de ancho) no necesita un banner de escritorio de 4000 px de ancho. Desperdicia ancho de banda y memoria de GPU (reducción de escala). Debe servir diferentes tamaños para diferentes dispositivos. La forma HTML:

<img 
  src="pequeño.jpg"
  srcset="mediano.jpg 1000w, grande.jpg 2000w"
  tamaños="(ancho máximo: 600px) 100vw, 50vw"
/>

El navegador observa su propio ancho, calcula la densidad de píxeles (Retina 2x) y selecciona el archivo perfecto. Si usa un marco como Next.js, simplemente defina el accesorio sizes correctamente. “Esta imagen ocupa el 100% de la pantalla en el móvil y el 50% en el escritorio”.

Carga diferida versus carga ansiosa

Carga diferida: “No cargues esta imagen hasta que el usuario se desplace cerca de ella”.

Esto ahorra ancho de banda inicial.
Resultado: Carga de página inicial más rápida.
Predeterminado: en Next.js, las imágenes son diferidas de forma predeterminada.

Carga ansiosa (prioridad): “Carga esto inmediatamente”.

Caso de uso: El elemento LCP (pintura con mayor contenido). Generalmente el estandarte del héroe.
Crítico: si carga la imagen de Hero de forma diferida, el navegador espera a que JS se hidrate antes de cargar la imagen. Esto acaba con tu puntuación LCP.
Regla: Marca la imagen superior como prioridad={true}.

Prevención de cambio de diseño

Si insertas una imagen sin dimensiones:

El navegador muestra texto.
La imagen se carga (500 px de altura).
El texto se empuja hacia abajo. Esto es CLS (cambio de diseño acumulativo). Google lo odia. Solución: Reserve siempre el espacio de relación de aspecto. El navegador dibuja inmediatamente un “cuadro de marcador de posición” del tamaño correcto. La imagen se carga en el cuadro.

La CDN (red de entrega de contenidos)

No proporcione imágenes desde su servidor web. Servirlos desde un Image CDN (Cloudinary, Imgix, Vercel Blob). ¿Por qué?

Transformación sobre la marcha: image.jpg?w=500&q=80. Generas el tamaño/calidad exacto solicitado.
Global Edge: la imagen se almacena en caché en 200 ciudades.
Recorte inteligente: la IA detecta el rostro en la foto y lo recorta para la miniatura del móvil.

6. Gráficos vectoriales (SVG): la resolución infinita

Para logotipos e iconos, nunca utilice un PNG. Utilice SVG (Gráficos vectoriales escalables). Un logotipo PNG de 5000 px pesa 1 MB. El mismo logotipo en SVG tiene 2 KB. Y se escala al tamaño de una valla publicitaria sin píxeles. Advertencia de seguridad: Los SVG son archivos XML. Pueden contener JavaScript (XSS). Siempre desinfecte los archivos SVG cargados por el usuario en el lado del servidor utilizando bibliotecas como isomorphic-dompurify.

7. La revolución del vídeo (WebM y AV1)

Las imágenes estáticas son aburridas. El comercio electrónico pasa a “Reproducción automática de vídeo” al pasar el mouse. Los GIF son terribles (tamaño enorme, 256 colores). Utilice WebM o MP4 (H.264) sin audio. <video autoPlay bucle silenciado reproducciones en línea>. Suele ser más pequeño que un GIF y a todo color de 32 bits. El nuevo códec AV1 es aún más pequeño, pero consulte la compatibilidad del navegador.

10. Optimización de LCP con esteroides

La “pintura con contenido más grande” de Core Web Vitals suele ser una imagen. Para acertar < 2,5 s:

Precargar encabezado: envíe <link rel="preload" as="image" href="hero.avif"> en la respuesta del documento HTML inicial.
Prioridad de recuperación: utilice <img fetchpriority="high"> (Chrome 101+).
Fondos CSS en línea: si es un patrón pequeño, Base64 lo codifica en CSS para evitar una solicitud de red.

11. Estrategias de imágenes de fondo

Las imágenes de “portada” son complicadas porque la relación de aspecto cambia. CSS: objeto-ajuste: portada. El problema: la “parte importante” (la cara) puede quedar recortada en el móvil. Solución: Recorte de puntos focales. Usamos puntos de acceso de Sanity CMS. Pasamos las coordenadas del punto focal (x=0.5, y=0.3) a la Image CDN. La CDN genera un recorte centrado para escritorio y un recorte alineado superior para dispositivos móviles. La dirección de arte permanece intacta en todos los dispositivos.

13. La revolución AVIF (inmersión profunda)

¿Por qué AVIF cambia las reglas del juego? Admite HDR (alto rango dinámico). Si vendes joyas, el brillo depende del rango de contraste. JPEG fija los colores al rango dinámico estándar (SDR). AVIF conserva toda la profundidad de color de 10 o 12 bits de la foto de origen. En la pantalla OLED de un iPhone, el diamante en realidad brilla. Configuramos nuestros Media Pipelines para detectar compatibilidad con HDR (a través de CSS Media Queries dynamic-range: high) y entregamos HDR AVIF solo a dispositivos compatibles. Se trata de la “Fidelidad Visual” como ventaja competitiva.

14. ¿Por qué Código Maison?

En Maison Code, somos perfeccionistas de los píxeles. No aceptamos compresión “borrosa”. Ajustamos el parámetro “calidad” por tipo de imagen.

Fotografías del paquete del producto: q=85 (líneas nítidas).
Fondos de estilo de vida: q=60 (el enfoque suave está bien). Creamos canalizaciones de imágenes adaptativas que optimizan tanto la velocidad (LCP) como la belleza (retención). Porque en el Lujo una imagen pixelada es un insulto a la artesanía.

15. Conclusión

Las imágenes son lo más pesado de la web. También son lo más importante. Debes equilibrar la tensión entre “Rápido” y “Hermoso”. Con códecs modernos (AVIF), sintaxis responsiva (srcset) y CDN de Edge, puede tener ambos. Deja de publicar archivos JPEG de 5 MB. Respeta el plan de datos de tu usuario.

¿Las imágenes se cargan lentamente?

Optimizamos Media Pipelines para un LCP instantáneo y una fidelidad visual perfecta en todos los dispositivos. Contrate a nuestros arquitectos.