Cómo comprimir imágenes para una web y acelerar tus páginas
Las imágenes suelen ser la mayor parte del peso de una página, por lo que optimizarlas rinde más que casi cualquier otra mejora. Esta guía explica cómo influye el tamaño de las imágenes en la velocidad y en las Core Web Vitals, qué formato y calidad elegir y qué revisar antes de publicar.
Por qué importa el peso de las imágenes
Una foto recién salida del móvil puede pesar varios megabytes. Si la pones en un artículo, un visitante con conexión móvil tiene que descargarla entera aunque se muestre con unos pocos cientos de píxeles de ancho. El resultado es una página lenta, más visitantes que se marchan y datos móviles desperdiciados.
La velocidad también se relaciona con las Core Web Vitals que usa Google. Una de ellas es el LCP (Largest Contentful Paint), que mide la rapidez con la que aparece el elemento visible más grande. Muy a menudo ese elemento es la imagen principal, así que su peso afecta directamente a la puntuación. Google considera bueno un LCP de 2,5 segundos o menos.
Elegir formato: WebP o JPG
JPG es ideal para fotografías y funciona en todas partes. WebP suele producir un archivo más pequeño con una calidad visual parecida, a menudo en torno a una cuarta parte o más, y todos los navegadores principales lo admiten hoy. Para sitios nuevos, WebP suele ser una buena opción por defecto.
PNG es la elección adecuada para capturas de pantalla, logotipos y gráficos con bordes nítidos o transparencia. Las fotos guardadas como PNG acaban pesando muchísimo, así que conviértelas a JPG o WebP. Los archivos HEIC de los móviles también deben convertirse antes de subirlos a una web.
Ajustar la calidad
Para los formatos con pérdida (JPG, WebP), una calidad de aproximadamente 75 a 85 en la escala de 0 a 100 suele bastar para fotos. Por debajo de 70 empiezan a verse zonas con bloques y ruido alrededor de los bordes, mientras que por encima de 90 el archivo crece mucho por una diferencia que el ojo apenas nota.
El mejor método es probar: exporta unas cuantas versiones y compáralas en pantalla al tamaño con que se mostrarán de verdad. Las imágenes con grandes zonas planas o texto fino muestran antes los artefactos de compresión y pueden necesitar un ajuste más alto.
Redimensionar al tamaño mostrado
Comprimir sin redimensionar es solo la mitad del trabajo. Si una imagen se muestra con 800 px de ancho, no tiene sentido servir un archivo de 4000 px. Reducir una foto grande de 4000 a 1600 px de ancho recorta el peso del archivo varias veces, porque el número de píxeles disminuye con el cuadrado del ancho.
Para mantener las imágenes nítidas en pantallas de alta densidad, prepara una versión con aproximadamente el doble del ancho mostrado. Para un hueco de 800 px, suele bastar un archivo de 1600 px.
Imágenes adaptables y carga
El atributo srcset permite que el navegador elija un archivo de tamaño adecuado para la pantalla. Ejemplo:
<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Descripción" loading="lazy">
El atributo loading="lazy" indica al navegador que cargue la imagen solo cuando el visitante se desplaza cerca de ella, así que úsalo para las imágenes que quedan por debajo de la primera pantalla. No apliques carga diferida a la imagen principal visible en la parte superior, porque puede empeorar el LCP.
Los atributos width y height permiten que el navegador reserve el espacio de antemano, de modo que la página no da saltos mientras carga. Esto mejora la métrica CLS (Cumulative Layout Shift).
Una lista práctica antes de publicar
- Imagen redimensionada al ancho con el que realmente se muestra (como máximo, el doble aproximadamente).
- Formato elegido: WebP o JPG para fotos, PNG o WebP para gráficos con transparencia.
- Calidad en torno a 75 a 85, comprobada visualmente en pantalla.
- Atributos width y height definidos.
- Las imágenes por debajo de la primera pantalla usan loading="lazy".
- Nombres de archivo descriptivos (por ejemplo plaza-mayor-madrid.webp) y texto alternativo con sentido.
- Tamaño real del archivo descargado comprobado en las herramientas para desarrolladores del navegador (pestaña Red).
Cómo medir el resultado
Antes de optimizar, anota cuánto pesa la página. En las herramientas para desarrolladores del navegador (F12, pestaña Red, filtro Img) puedes ver el tamaño de cada imagen y el total. Tras optimizar, repite la medición con la caché desactivada (Disable cache) para que la comparación sea justa.
Ejemplo: un artículo tiene cinco fotos de 3 MB cada una, unos 15 MB en total. Si reduces cada una a 1600 px de ancho y la guardas como WebP con calidad 80, cada una suele pesar aproximadamente entre 100 y 250 KB, y todas juntas menos de 1,5 MB. La cifra exacta depende del contenido de la foto, así que mide siempre tú mismo.
Errores habituales
- Redimensionar solo con CSS: si subes un archivo de 4000 px y lo muestras con 400 px de ancho, el navegador sigue descargando el archivo completo.
- Recompresión repetida: cada nuevo guardado de un JPG añade pérdidas. Exporta siempre desde el original.
- Usar PNG para fotos: el archivo puede ser varias veces mayor que un JPG o un WebP.
- Carga diferida de la primera imagen: la imagen principal de la parte superior debe cargarse de inmediato.
- Falta de texto alternativo: importa para la accesibilidad y ayuda a los buscadores a entender la imagen.