Cómo optimizar imágenes para la web en 2026

Las imágenes representan entre el 50 y el 70 % del peso medio de una página web. Las imágenes mal optimizadas son la principal causa de sitios web lentos, altas tasas de rebote y malas puntuaciones en Core Web Vitals. Esta guía cubre todas las técnicas que necesitas para entregar imágenes rápidas, ligeras y SEO-friendly.

Paso 1: Elige el formato correcto

La selección del formato tiene el mayor impacto en el tamaño del archivo, incluso antes de aplicar cualquier compresión:

• AVIF: mejor compresión para fotos (estándar 2026 para navegadores modernos)
• WebP: excelente compresión, 97% de compatibilidad con navegadores, úsalo como fallback de AVIF
• JPEG: fallback universal para fotografías
• PNG: cuando se requiere transparencia y WebP no es una opción
• SVG: logotipos, iconos, cualquier contenido vectorial, infinitamente escalable

Paso 2: Redimensiona a las dimensiones de visualización

Nunca subas una foto de 4000×3000 píxeles para mostrarla a 800×600. El navegador descarga la resolución completa y luego la escala, desperdiciando ancho de banda sin ningún beneficio visible. Redimensiona siempre las imágenes a sus dimensiones máximas de visualización antes de subirlas.

Para imágenes responsive que se muestran a diferentes tamaños en móvil y escritorio, usa los atributos srcset y sizes para proporcionar múltiples resoluciones y dejar que el navegador elija la adecuada.

Paso 3: Comprime de forma agresiva

La mayoría de las imágenes pueden tolerar mucha más compresión de lo que la gente suele asumir. Objetivos prácticos:

Paso 4: Implementa lazy loading

Las imágenes por debajo del pliegue no deberían descargarse hasta que el usuario se desplace cerca de ellas. El atributo HTML nativo hace esto trivial:

<img src="photo.jpg" alt="Descripción" loading="lazy">

Añade siempre loading="eager" (u omite el atributo) para las imágenes por encima del pliegue, especialmente tu imagen LCP (Largest Contentful Paint). Aplicar lazy loading a tu imagen hero perjudicará tu puntuación LCP.

Paso 5: Añade atributos width y height

Especifica siempre width y height en cada etiqueta <img>. Esto permite al navegador reservar el espacio correcto antes de que la imagen se cargue, eliminando el Cumulative Layout Shift (CLS), una métrica de Core Web Vitals:

<img src="photo.jpg" alt="Descripción" width="800" height="600" loading="lazy">

Paso 6: Usa un CDN

Una red de distribución de contenidos sirve imágenes desde servidores geográficamente cercanos a tus usuarios, reduciendo la latencia. Los CDN de imágenes modernos (Cloudflare Images, Fastly, Imgix, Cloudinary) también automatizan:

• Conversión de formato (sirve AVIF a navegadores compatibles, WebP en caso contrario, JPEG como último recurso)
• Redimensionado responsive bajo demanda
• Caché agresivo con cabeceras adecuadas

Paso 7: Precarga tu imagen LCP

La imagen del Largest Contentful Paint (normalmente tu imagen hero) tiene el mayor impacto en la experiencia del usuario. Indica al navegador que la descargue lo antes posible:

<link rel="preload" as="image" href="hero.avif" type="image/avif"
      imagesrcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
      imagesizes="100vw">

Lista de verificación de optimización de imágenes

• ✅ Formato correcto para cada tipo de imagen
• ✅ Redimensionada a las dimensiones máximas de visualización
• ✅ Comprimida a la calidad objetivo (no al 100 %)
• ✅ loading="lazy" en todas las imágenes por debajo del pliegue
• ✅ Atributos width y height en cada <img>
• ✅ Texto alt descriptivo para cada imagen
• ✅ Servida por HTTPS desde un CDN
• ✅ Imagen LCP precargada
• ✅ Elemento <picture> con fuentes AVIF + WebP + JPEG