Abre la pestaña de red en casi cualquier web lenta y las imágenes serán lo más pesado, a menudo más que todos los scripts y hojas de estilo juntos. La solución rara vez es complicada: la mayoría de las imágenes se suben a resolución de cámara y se muestran a una fracción de ese tamaño, sin más compresión que la que aplicó el móvil. Tratar bien las imágenes es el cambio con mejor relación esfuerzo-resultado que puede hacer casi cualquier sitio, y no necesita desarrollador. Comprimir imágenes es el cambio con mejor relación esfuerzo-resultado que puede hacer casi cualquier sitio.
Esta guía recorre las decisiones en el orden en que deberías tomarlas: primero dimensiones, luego formato, después nivel de compresión y por último la entrega.
1. Dimensiones: la mayor fuga
Una foto de móvil tiene 4.000 × 3.000 píxeles. El hueco más ancho donde se mostrará en una web tendrá quizá 1.200 píxeles. Aun así, el navegador descarga los 12 millones de píxeles y tira el 90 %. Reglas prácticas:
- Imágenes hero a ancho completo: 1.600–2.000 px.
- Imágenes dentro de artículos: 1.200 px.
- Miniaturas y tarjetas: 600–800 px.
- Para pantallas Retina, el doble del tamaño mostrado pero con más compresión: imágenes más nítidas con casi el mismo peso.
Solo este paso reduce la mayoría de las fotos un 70–85 %.
2. Formato: JPG, PNG, WebP o AVIF
| Formato | Para qué | Peso frente a JPG |
|---|---|---|
| JPG | Fotos, compatible en todas partes | Base |
| PNG | Logos, capturas, transparencia | a menudo 3–5× más en fotos |
| WebP | Estándar web, fotos y gráficos, transparencia | −25 a −35 % |
| AVIF | Archivos más pequeños, más lento de generar | −40 a −50 % |
El error más común: fotos en PNG. PNG es sin pérdidas y, para fotos, simplemente la herramienta equivocada. El segundo: capturas con texto en JPG; los bordes se emborronan. Para 2026: WebP como estándar, AVIF donde tu flujo lo permita, JPG/PNG como respaldo para clientes de correo antiguos.
3. Comprimir imágenes: la regla 75–85
La escala de calidad no es lineal. De 100 a 85 apenas pierdes detalle visible, pero sí la mitad del peso. De 85 a 60 ahorras otro tercio y los artefactos empiezan a verse en bordes y degradados. El punto óptimo para fotos está en 75–85; para fondos con texto encima bastan 60–70; para fotos de producto con zoom, 85–90.
No compruebes el resultado con lupa. Abre el original y la versión comprimida uno junto al otro a tamaño normal: si no ves la diferencia al instante, tus visitantes tampoco.
4. Entrega: carga diferida y srcset
Las imágenes por debajo de la zona visible no necesitan cargarse hasta que el usuario hace scroll: loading="lazy" en todas menos la primera. La imagen hero lleva en cambio fetchpriority="high". Con srcset sirves a los móviles la versión de 600 px y al escritorio la de 1.200 px; WordPress lo hace solo si los tamaños están configurados. Indica siempre width y height para que el diseño no salte al cargar.
El flujo en la práctica
- Redimensiona antes de subir: el redimensionador (o el redimensionador en lote para carpetas) a 1.200–2.000 px.
- Comprime y convierte en un paso: compresor de imágenes a calidad 80, salida WebP.
- Control: menos de 200 KB en imágenes de contenido, menos de 400 KB en hero.
- En la página: carga diferida, dimensiones, texto alternativo.
Resultados típicos
Una foto de móvil sin optimizar (4.000 px, 3,8 MB) → redimensionada a 1.200 px (620 KB) → WebP a calidad 80 (95 KB). Un 97 % menos de datos para una imagen idéntica en la página. En una página con diez imágenes, es la diferencia entre seis segundos de carga con datos móviles y menos de uno.
Preguntas frecuentes
¿Pierdo calidad con WebP?
A igual calidad visual, no: WebP la consigue con menos bytes.
¿Convierto los logos PNG a WebP?
Sí, con WebP sin pérdidas; la transparencia se mantiene y el archivo se reduce.
¿Y las imágenes ya subidas?
Los plugins de WordPress comprimen a posteriori, pero no reducen con sentido la resolución original. Para bibliotecas existentes merece la pena una pasada con el compresor en lote y volver a subir las páginas principales.
Gratis, funciona en tu navegador, no se sube nada, sin registro.
Sigue leyendo
Más de Herramientas de imagen y foto.
