Cómo Optimizar Imágenes para Tu Sitio Web: Guía Completa y Actualizada
Las imágenes representan aproximadamente el 40% del peso total de la página web promedio. Optimízalas correctamente y puedes reducir tu página a la mitad, alcanzar un LCP inferior a 2,5 segundos y posicionarte mejor en buscadores. Aquí tienes el proceso completo.
Por Qué la Optimización de Imágenes Importa Más Que Nunca
Según datos del HTTP Archive, la página web mediana pesa unos 2,5 MB en móvil, y las imágenes representan aproximadamente 1 MB. Los Core Web Vitals de Google — específicamente el Largest Contentful Paint (LCP) — miden directamente la velocidad de carga del elemento visible más grande. En la mayoría de las páginas, ese elemento es una imagen.
El punto de referencia: un LCP de 2,5 segundos o menos es "bueno". Por encima de 4 segundos es "deficiente". Las páginas con LCP basado en imagen tienen un tiempo de carga en el percentil 75 casi el doble que las páginas con LCP basado en texto.
Paso 1: Elige el Formato Correcto
| Formato | Mejor para | Tamaño vs JPEG | Soporte |
|---|---|---|---|
| JPEG | Fotos, compatibilidad total | Referencia | 100% |
| WebP | Fotos + gráficos | 25-35% menor | ~97% |
| AVIF | Sitios con enfoque en rendimiento | ~50% menor | ~95% |
| PNG | Logos, iconos, gráficos con texto | Generalmente mayor | 100% |
| SVG | Iconos, ilustraciones | Minúsculo (vector) | 100% |
Para la mayoría de sitios, WebP es el formato predeterminado más seguro. Puedes convertir JPG a WebP o convertir a AVIF con Vizua. Para una comparación detallada, consulta nuestro artículo WebP vs AVIF.
Paso 2: Redimensiona al Tamaño Real de Visualización
Una foto de 4000 × 3000 píxeles mostrada a 800 × 600 en tu sitio desperdicia el 80% de sus píxeles. La regla: sirve imágenes al tamaño de visualización o cerca de él.
- Hero a ancho completo: 1600-1920 px
- Imagen de contenido: 800-1200 px
- Miniatura: 300-400 px
- Avatar: 64-128 px
Usa el redimensionador de imágenes de Vizua para escalar antes de comprimir. Solo esto puede reducir el tamaño en 70-90%.
Paso 3: Comprime con la Calidad Adecuada
- JPEG: 75-85
- WebP: 75-80
- AVIF: 60-75
- PNG: Compresión máxima (lossless)
El compresor JPEG de Vizua lo maneja automáticamente. Para detalles por formato, consulta nuestra guía de compresión sin pérdida de calidad.
Paso 4: Entrega Imágenes de Forma Eficiente
Define dimensiones explícitas
Siempre incluye atributos width y height para prevenir cambios de diseño (CLS).
Lazy-load debajo del pliegue
Agrega loading="lazy" a imágenes no visibles en la carga inicial.
Prioriza tu imagen hero
Usa fetchpriority="high" en la imagen principal. Las imágenes LCP precargadas alcanzan un percentil 75 de 364 ms; las lazy-loaded llegan a 720 ms.
Usa imágenes responsivas
Los atributos srcset y sizes permiten que el navegador elija la mejor variante.
Paso 5: Audita y Mide
- PageSpeed Insights: Ejecuta en tus páginas clave
- DevTools: Pestaña Network, ordena por tamaño
- Automatiza: Agrega optimización de imágenes a tu pipeline de build
Checklist Rápido
- Usa WebP o AVIF como formato predeterminado
- Redimensiona al tamaño real de visualización
- Comprime: JPEG/WebP a 75-85, AVIF a 60-75
widthyheighten cada<img>fetchpriority="high"en la hero/LCPloading="lazy"debajo del pliegue- Hero bajo 200 KB, miniaturas bajo 80 KB
- Elimina metadatos innecesarios — ve nuestra guía de privacidad EXIF
Preguntas Frecuentes
¿Cuál es el mejor formato de imagen para sitios web?
WebP es la mejor opción predeterminada en 2026. Genera archivos 25-35% más pequeños que JPEG con la misma calidad, soporta transparencia y funciona en más del 97% de los navegadores. Usa AVIF para archivos aún más pequeños cuando el soporte lo permita (~95% de navegadores en 2026).
¿Cuánto ralentizan las imágenes sin optimizar un sitio web?
Las imágenes representan aproximadamente el 40% del peso total de una página web (cerca de 1 MB de los 2,5 MB medianos, según HTTP Archive). Una sola imagen hero sin optimizar puede llevar tu LCP por encima de 4 segundos, clasificado como "deficiente" por Google.
¿Debo usar lazy-load en todas las imágenes?
No. Usa lazy-load solo en imágenes debajo del pliegue. Nunca en la imagen hero ni en el elemento LCP. Para la imagen principal, usa fetchpriority="high".
¿Necesito definir width y height en cada imagen?
Sí. Los atributos width y height explícitos permiten que el navegador reserve espacio antes de la carga. Sin ellos, el contenido salta conforme aparecen las imágenes, aumentando el CLS.
Optimiza tus imágenes ahora
Gratis, privado, sin registro. Todo funciona en tu navegador.