← Todos los artículos

Cómo optimizar las imágenes de tu web sin perder calidad

Por Gilberto Arenas · 22 de octubre de 2026 · 5 min de lectura

Si tu sitio carga lento, lo más probable es que el culpable no sea el código, ni el hosting, ni los plugins: son las imágenes. Una sola foto subida tal cual sale del celular puede pesar más que todo el resto de la página junto. La buena noticia es que este es el problema de velocidad más fácil de arreglar, y no necesitas ser diseñador ni pagar herramientas.

Por qué las imágenes pesan tanto

Una foto tomada con un celular actual tiene alrededor de 4000 píxeles de ancho y pesa entre 3 y 6 MB. Pero en la pantalla de un computador, esa imagen se muestra como mucho a 1200 o 1600 píxeles, y en un celular a menos de 500. El navegador descarga todos esos píxeles de más y luego los descarta. Para alguien que entra con datos móviles, eso son varios segundos esperando una imagen que se habría visto igual con una décima parte del peso.

Y la imagen más grande de tu página suele ser justo la que mide la métrica LCP de Google, una de las tres que explicamos en qué son los Core Web Vitals.

Paso 1: elige el tamaño correcto

Antes de comprimir, redimensiona. Como guía general:

• Imagen de portada a todo el ancho: entre 1600 y 1920 píxeles de ancho.
• Imagen dentro de un artículo o una sección: entre 800 y 1200 píxeles.
• Miniaturas, logos de clientes, íconos: lo que realmente ocupan en pantalla, multiplicado por dos para que se vean nítidos en pantallas de alta densidad.

Una forma rápida de saber cuánto ocupa una imagen: en Chrome, clic derecho sobre ella, Inspeccionar, y pasa el cursor sobre la etiqueta <img>. Verás el tamaño en pantalla y el tamaño real del archivo.

Paso 2: usa un formato moderno

• JPG: el clásico para fotos. Funciona en todas partes.
• PNG: para imágenes con transparencias o capturas de pantalla con texto. Para fotos es pesadísimo; no lo uses ahí.
• WebP: el formato que conviene usar hoy para casi todo. A igual calidad visual, suele pesar entre 25 % y 35 % menos que un JPG, y todos los navegadores modernos lo soportan.
• AVIF: aún más liviano que WebP, aunque algunas herramientas y plataformas todavía no lo manejan bien.
• SVG: para logos e íconos dibujados. Pesa muy poco y se ve nítido a cualquier tamaño.

Si tienes que elegir una sola regla: fotos en WebP, logos en SVG.

Paso 3: comprime

Comprimir significa quitar información que el ojo no nota. Con una calidad de entre 75 % y 85 %, la diferencia es invisible para casi cualquier persona, y el archivo pesa una fracción del original.

Herramientas gratuitas que funcionan bien:

• Squoosh (squoosh.app): de Google, en el navegador, sin instalar nada. Te deja comparar el antes y el después lado a lado, redimensionar y convertir a WebP o AVIF en un solo paso. Las imágenes no salen de tu computador.
• TinyPNG / TinyJPG: arrastras hasta varias imágenes a la vez y te las devuelve comprimidas.
• El exportador de tu editor: Photoshop, Affinity, GIMP o Canva permiten elegir la calidad al exportar. No uses "calidad máxima" para la web.

Como referencia: una foto de portada bien optimizada debería pesar menos de 200 KB, y una imagen dentro de un artículo, menos de 100 KB.

Paso 4: carga diferida (lazy loading)

La carga diferida hace que las imágenes que están más abajo en la página solo se descarguen cuando el visitante se acerca a ellas haciendo scroll. Así, la primera pantalla aparece mucho más rápido.

En HTML basta con agregar un atributo:

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

Dos detalles importantes:

• No uses carga diferida en la imagen principal de la primera pantalla. Esa debe cargar cuanto antes; si la difieres, empeoras justo la métrica que quieres mejorar.
• Indica siempre el ancho y el alto (width y height). Así el navegador reserva el espacio antes de que la imagen llegue y el contenido no salta mientras carga, que es lo que mide el CLS.

Paso 5: no olvides el texto alternativo

El atributo alt describe la imagen para quienes usan lectores de pantalla y para Google, que no "ve" las fotos. Escríbelo como se lo describirías a alguien por teléfono: "Fachada de la panadería con la vitrina de pan dulce", no "IMG_2034" ni una lista de palabras clave. En nuestro estudio de 390 sitios, el 15 % de los que tenían imágenes dejaba al menos una sin este texto.

Cómo hacerlo en WordPress

WordPress ya ayuda bastante: genera versiones de distintos tamaños de cada imagen que subes y usa carga diferida por defecto en las imágenes que no están al principio. Aun así:

1. Redimensiona antes de subir. WordPress guarda también el original, y algunos temas lo usan.
2. Usa un plugin de optimización que comprima automáticamente lo que subes y, si quieres, convierta a WebP. Hay varias opciones gratuitas con límites generosos.
3. Revisa las imágenes que ya tienes. Muchos de estos plugins pueden optimizar en lote toda la biblioteca existente. Haz una copia de seguridad antes.
4. Desconfía de los sliders en la portada: cargan varias imágenes grandes cuando el visitante solo ve una.

Cómo saber si funcionó

Pasa tu página por PageSpeed Insights antes y después. Busca en el diagnóstico avisos como "Mejora la codificación de imágenes", "Usa formatos de imagen modernos" o "Dimensiona las imágenes correctamente": si desaparecen, lo hiciste bien. También puedes correr nuestra auditoría gratis, que mide la velocidad en móvil y en computador por separado.

Resumen rápido

1. Redimensiona al tamaño en que se va a mostrar.
2. Convierte las fotos a WebP y los logos a SVG.
3. Comprime con calidad entre 75 % y 85 %.
4. Usa carga diferida, salvo en la imagen principal.
5. Indica ancho, alto y texto alternativo.

Con solo estos cinco pasos, es común que una página de inicio pase de pesar 8 MB a menos de 1 MB.