Comprimir Imágenes para Web: Guía Definitiva para Velocidad
Todo lo que necesitas saber sobre optimización de imágenes, formatos y Core Web Vitals
Por Ben Praveen J · Marzo 2026
Las imágenes son el elemento más pesado de la mayoría de páginas web. Según datos de HTTP Archive, representan entre el 50% y el 70% del peso total de una página web promedio. Esto significa que si tu sitio web carga lento, las imágenes son probablemente la causa principal. Y un sitio lento no solo frustra a los visitantes: Google lo penaliza directamente en los resultados de búsqueda.
Esta guía te enseña exactamente cómo comprimir imágenes para web de forma efectiva, qué formatos usar, qué configuraciones aplicar y cómo medir el impacto en la velocidad de tu sitio.
¿Por qué importa la compresión de imágenes?
La velocidad de carga de un sitio web afecta directamente a tres áreas críticas de tu negocio:
- Posicionamiento en Google (SEO). Desde 2021, Google utiliza los Core Web Vitals como factor de ranking. El LCP (Largest Contentful Paint) mide cuánto tarda en cargarse el elemento más grande visible de tu página, que casi siempre es una imagen. Si tu LCP supera los 2.5 segundos, Google considera que la experiencia es deficiente y puede afectar tu posición en los resultados de búsqueda.
- Tasa de conversión. Estudios de Amazon, Google y Walmart han demostrado que cada segundo adicional de tiempo de carga reduce las conversiones entre un 7% y un 20%. Para una tienda online que factura 100.000 euros al mes, un segundo de retraso puede significar entre 7.000 y 20.000 euros menos al mes en ventas.
- Experiencia de usuario en móviles. Más del 60% del tráfico web global proviene de dispositivos móviles, muchos de ellos con conexiones 3G o 4G limitadas. Una imagen de 5 MB que carga en 1 segundo con fibra óptica puede tardar 15 segundos en una conexión móvil lenta.
Formatos de imagen: cuándo usar cada uno
JPEG
El formato clásico para fotografías. JPEG usa compresión con pérdida, lo que significa que reduce el tamaño del archivo descartando información visual que el ojo humano difícilmente percibe. Es ideal para fotos de productos, imágenes de fondo, banners y cualquier imagen fotográfica.
Configuración recomendada: calidad entre 75 y 85 sobre 100. Por debajo de 70, los artefactos de compresión empiezan a ser visibles. Por encima de 85, la ganancia en calidad visual es mínima pero el tamaño del archivo aumenta significativamente.
PNG
PNG usa compresión sin pérdida, lo que significa que no descarta información visual. Es el formato adecuado para gráficos con bordes nítidos, logotipos, capturas de pantalla, iconos y cualquier imagen que necesite transparencia. No es recomendable para fotografías porque produce archivos mucho más grandes que JPEG para el mismo contenido fotográfico.
WebP
Desarrollado por Google, WebP ofrece lo mejor de ambos mundos: compresión con y sin pérdida, transparencia, y archivos un 25-35% más pequeños que JPEG para la misma calidad visual. Todos los navegadores modernos soportan WebP desde hace años. Es el formato recomendado para la mayoría de imágenes web en 2026.
AVIF
El formato más nuevo y eficiente. AVIF puede producir archivos hasta un 50% más pequeños que JPEG. Sin embargo, la compatibilidad con navegadores todavía no es universal y el tiempo de codificación es mayor. Es una buena opción si tu audiencia usa principalmente Chrome o Firefox actualizados.
Proceso de optimización paso a paso
- Redimensiona antes de comprimir. Este es el paso más importante y el que más impacto tiene. Si tu imagen se muestra a 800 píxeles de ancho en tu web, no subas una imagen de 4000 píxeles. Usa el redimensionador de imágenes para ajustar las dimensiones al tamaño real de visualización. Esto solo puede reducir el archivo un 90% o más.
- Elige el formato correcto. Foto: WebP o JPEG. Gráfico con transparencia: WebP o PNG. Logotipo simple: SVG. Usa el conversor de imágenes para cambiar entre formatos.
- Comprime la imagen. Abre el Compresor de Imágenes y sube tu archivo. La herramienta aplica compresión inteligente que mantiene la calidad visual mientras reduce el tamaño significativamente.
- Verifica el resultado. Compara la imagen original con la comprimida. Si la diferencia visual es imperceptible, el archivo está listo para subir a tu web.
Core Web Vitals y las imágenes
Los Core Web Vitals son las tres métricas que Google usa para evaluar la experiencia de usuario de tu sitio:
- LCP (Largest Contentful Paint). Mide cuánto tarda en renderizarse el elemento más grande visible. Casi siempre es la imagen principal o hero image. Objetivo: menos de 2.5 segundos. Las imágenes grandes y sin optimizar son la causa más común de un LCP deficiente.
- INP (Interaction to Next Paint). Mide la respuesta a interacciones del usuario. Las imágenes pesadas pueden bloquear el hilo principal del navegador durante la decodificación, afectando indirectamente la interactividad.
- CLS (Cumulative Layout Shift). Mide la estabilidad visual. Cuando una imagen no tiene dimensiones definidas en el HTML (atributos width y height), el navegador no puede reservar espacio y el contenido salta cuando la imagen carga. Siempre define las dimensiones de tus imágenes.
Tamaños recomendados por tipo de imagen
| Tipo de imagen | Ancho recomendado | Tamaño objetivo | Formato |
| Hero/banner | 1200-1600px | Menos de 200 KB | WebP o JPEG |
| Foto de producto | 800-1000px | Menos de 150 KB | WebP o JPEG |
| Miniatura/thumbnail | 300-400px | Menos de 30 KB | WebP o JPEG |
| Icono/logotipo | Variable | Menos de 10 KB | SVG o WebP |
| Imagen de blog | 720-1000px | Menos de 100 KB | WebP o JPEG |
Errores comunes que debes evitar
- Subir imágenes directamente de la cámara. Una foto de un smartphone moderno pesa entre 3 y 12 MB. Subir eso directamente a tu web sin comprimir es uno de los errores más frecuentes.
- Usar PNG para fotografías. Un retrato en PNG puede pesar 5 MB. El mismo retrato en JPEG a calidad 80 pesa menos de 200 KB con calidad visual idéntica.
- No definir dimensiones en el HTML. Sin atributos width y height, las imágenes causan saltos de layout que penalizan tu CLS.
- Ignorar la carga diferida (lazy loading). Las imágenes que están debajo del fold (fuera de la vista inicial) deberían cargarse cuando el usuario se desplaza hacia ellas, no al cargar la página. Añade loading="lazy" a tus etiquetas img.
Preguntas frecuentes
- ¿Cuál es el mejor formato de imagen para web en 2026?
- WebP es el formato recomendado. Ofrece compresión 25-35% mejor que JPEG y soporta transparencia. Todos los navegadores modernos lo soportan. Para máxima compatibilidad, usa JPEG como respaldo.
- ¿Comprimir imágenes afecta al SEO?
- Sí, positivamente. Google usa la velocidad de carga como factor de ranking. Las imágenes optimizadas mejoran directamente los Core Web Vitals que Google mide para posicionar tu sitio.
- ¿Cuánto se puede comprimir una imagen sin perder calidad?
- Las fotografías JPEG se pueden comprimir un 60-80% sin pérdida visible. Los gráficos PNG se reducen un 40-70%. La clave es encontrar el punto óptimo entre tamaño y calidad para cada caso.
- ¿Debo redimensionar las imágenes además de comprimirlas?
- Absolutamente. Es el factor más importante. Una imagen de 4000 píxeles mostrada a 800 desperdicia el 95% de sus píxeles. Redimensiona primero y luego comprime.
- ¿Qué son los Core Web Vitals y cómo afectan las imágenes?
- Son métricas de Google que miden la experiencia del usuario: LCP (velocidad de carga), INP (interactividad) y CLS (estabilidad visual). Las imágenes grandes afectan al LCP y pueden causar CLS si no tienen dimensiones definidas.
← Blog | Compresor de Imágenes | Convertir Imagen | Todas las herramientas