Cómo reducir el peso de una imagen para que tu web cargue rápido (sin que se note)

PageSpeed Insights te marca en rojo “Publica imágenes con un tamaño adecuado” y “Codifica las imágenes de forma eficiente”, la página tarda cuatro segundos en mostrar la foto principal y en el móvil el usuario ya se ha ido. Casi siempre la causa es la misma: fotografías subidas directamente desde la cámara o del banco de imágenes, con 4000 o 6000 píxeles de ancho y 3-8 MB cada una, para mostrarse en un hueco de 800 píxeles. Las imágenes son, en la mayoría de sitios, más de la mitad del peso total de la página y el elemento que mide el LCP (Largest Contentful Paint), una de las métricas de Core Web Vitals que Google usa para evaluar la experiencia. La buena noticia es que optimizarlas no exige conocimientos técnicos ni software de pago: un método de dos pasos, en el orden correcto, reduce el peso de una imagen a un 5-10 % del original sin que nadie note la diferencia en pantalla.

Cómo reducir el peso de una imagen para la web paso a paso

1. Averigua a qué ancho se muestra la imagen: en el navegador, clic derecho → Inspeccionar sobre la imagen y mira las dimensiones renderizadas. Como referencia, el contenido de un blog suele ocupar 700-800 px, una cabecera a ancho completo 1400-1920 px y una miniatura de tarjeta 300-400 px.
2. Redimensiona al doble de ese ancho como máximo para pantallas de alta densidad: súbela a redimensionar imagen (hasta 5 imágenes de 25 MB), escribe el ancho (por defecto 1280 px), deja el alto vacío y activa “Mantener proporción”. Una foto de 6000 px pasa a 1600 px y pierde alrededor del 90 % de sus píxeles.
3. Comprime la imagen redimensionada con comprimir imagen (también hasta 5 archivos de 25 MB). Para fotografías, “Equilibrado” es el punto de partida; “Máxima compresión” si el peso importa más que el detalle (fondos, miniaturas); “Alta calidad” para imágenes de producto en las que el cliente hace zoom.
4. Comprueba el formato: si es un PNG fotográfico sin transparencia, conviértelo con PNG a JPG antes de comprimir; el ahorro será de un 70-90 % adicional. Si es un logo o icono con transparencia, mantén PNG.
5. Compara el peso antes y después que muestra la herramienta y abre la imagen al 100 %: si ves bloques o halos alrededor de los bordes, vuelve al original y usa un nivel de calidad superior; nunca recomprimas la ya comprimida.
6. Sube la imagen optimizada al gestor de contenidos con un nombre de archivo descriptivo (zapatilla-running-azul.jpg) y rellena el texto alternativo; ambos cuentan para el SEO de imágenes.

Por qué el orden importa: primero redimensionar, después comprimir

El peso de una imagen depende sobre todo de cuántos píxeles tiene, y solo después de cómo están comprimidos. Comprimir una foto de 6000 × 4000 px a la máxima compresión puede dejarla en 1,5 MB con artefactos visibles; redimensionarla a 1600 × 1067 px sin tocar la calidad la deja en unos 600 KB, y comprimirla después en nivel equilibrado la baja a 150-250 KB con una imagen limpia. Es decir: redimensionar quita peso “gratis”, porque esos píxeles sobrantes el navegador iba a descartarlos igualmente al encajar la imagen en su hueco, mientras que la compresión siempre negocia entre peso y detalle. Hacerlo al revés, comprimir primero y redimensionar después, obliga a recomprimir la imagen dos veces y acumula pérdidas. Por eso redimensionar imagen mantiene la calidad alta al guardar (JPG a calidad 90) y deja la compresión fuerte para la herramienta específica.

Medidas y pesos objetivo según el tipo de imagen

No todas las imágenes de una página deben pesar lo mismo. Estas referencias funcionan para la mayoría de webs, blogs y tiendas; ajusta hacia arriba solo si la imagen es el producto que vendes.

Errores que anulan el ahorro

• Redimensionar desde el editor visual del CMS: WordPress y similares muestran la imagen más pequeña, pero el navegador sigue descargando el archivo completo si el tema no genera versiones responsivas. Sube ya redimensionada.
• Usar PNG para fotografías: un PNG fotográfico pesa entre cinco y diez veces más que el mismo JPG y no aporta nada si no hay transparencia. Convierte con PNG a JPG y elige el fondo blanco para las zonas transparentes.
• Guardar capturas de pantalla o gráficos con texto en JPG: aquí ocurre lo contrario, el JPG emborrona las letras; mantén PNG y comprímelo, que reduce la paleta de colores sin tocar los bordes.
• Comprimir una imagen que ya bajaste de otra web: ya viene comprimida y una segunda pasada añade artefactos a cambio de un ahorro mínimo. Busca el original o acepta el peso.
• Ampliar imágenes pequeñas para rellenar una cabecera: redimensionar hacia arriba inventa píxeles y produce una imagen borrosa que además pesa más. Elige otra imagen con resolución suficiente.

Formatos: JPG, PNG y WebP

Para fotografías, JPG sigue siendo la opción segura: lo abre todo y con la compresión adecuada pesa poco. WebP reduce otro 25-35 % a igual calidad y lo soportan todos los navegadores actuales; muchos gestores de contenidos (WordPress desde la versión 5.8, Shopify, Squarespace) lo generan automáticamente al subir un JPG, así que lo más práctico suele ser subir un JPG bien optimizado y dejar que la plataforma sirva el WebP. Si ya tienes imágenes WebP, comprimir imagen y redimensionar imagen las aceptan y las devuelven en WebP. PNG queda reservado a logos, iconos, capturas e ilustraciones con transparencia o con texto, y si dispones de la versión vectorial de un logo, SVG pesará aún menos y se verá nítido a cualquier tamaño.

Casos prácticos

• Blog de recetas con fotos de 5 MB directamente de la cámara: redimensionar a 1600 px y comprimir en “Equilibrado” deja cada foto en 150-200 KB; una entrada con ocho fotos pasa de 40 MB a menos de 2 MB.
• Tienda online con 300 fotos de producto en PNG de 2 MB exportadas desde el editor: convertir a JPG con fondo blanco (en tandas de 5) y comprimir en “Alta calidad”; el catálogo carga cinco veces más rápido y la ficha mantiene el zoom.
• Página de servicios con una cabecera de 1920 px que pesa 900 KB y marca un LCP de 4 s: comprimir en “Máxima compresión” la deja en 200-250 KB; al ser una imagen de ambiente sin texto, la diferencia es invisible.
• Web corporativa con el logo en PNG de 2000 px mostrado a 180 px: redimensionar a 360 px y comprimir en PNG; pasa de 400 KB a menos de 15 KB y se conserva la transparencia.

Preguntas frecuentes

¿Cuánto debe pesar una imagen para la web? Como regla general, menos de 200 KB para imágenes de contenido y menos de 300 KB para cabeceras grandes; el total de imágenes de una página debería quedar por debajo de 1-1,5 MB. ¿Se nota la compresión? En “Equilibrado” no se aprecia a tamaño normal en pantalla; en “Máxima compresión” pueden verse bloques en degradados suaves y cielos, así que resérvala para fondos y miniaturas. ¿Puedo optimizar muchas imágenes a la vez? Redimensionar imagen y comprimir imagen procesan hasta 5 archivos por operación en el plan gratuito; para un catálogo entero, trabaja en tandas o configura la generación automática de tamaños en tu CMS y sube solo un original ya razonable (2000-2400 px).

Tus imágenes se procesan de forma temporal en nuestros servidores y se eliminan automáticamente después del procesamiento; puedes leer los detalles en nuestra página de seguridad.