Respuesta corta: Comprimir imágenes hace sus archivos más pequeños para que las páginas carguen antes. Ajusta cada imagen al tamaño al que se muestra, usa compresión con pérdida en fotos y sin pérdida en dibujos o texto, y revisa el resultado antes de publicar.
Compresión con pérdida y sin pérdida
| Compresión | Qué hace | Ideal para | Formatos |
|---|---|---|---|
| Con pérdida | Quita detalle y parte de la información de color para reducir el archivo | Fotos e imágenes con mucho detalle | JPEG, WebP, AVIF |
| Sin pérdida | Conserva cada píxel y guarda cada uno por su diferencia con los vecinos | Ilustraciones de trazo, bordes nítidos y texto | GIF, PNG, WebP, AVIF |
Según la guía «Rendimiento de las imágenes» de web.dev, consultada el 4 de noviembre de 2026.
Los defectos de la compresión con pérdida apenas se ven en fotos con detalle, pero aparecen en bordes nítidos y en el texto. web.dev pide confirmar siempre que la imagen comprimida sigue cumpliendo tu nivel de calidad.
Redimensiona antes de comprimir
El primer ahorro está en las dimensiones de la imagen. Una imagen que se muestra en un espacio de 500 píxeles solo necesita 500 píxeles; un archivo de 1,000 es el doble de lo necesario.
Las pantallas con más densidad de píxeles necesitan más: el doble en una pantalla 2x. En pantallas 3x, web.dev señala que la mayoría no aprecia la diferencia, así que un archivo más pequeño suele verse igual.
Con el atributo srcset indicas varias versiones de la misma imagen, y el navegador elige la que encaja con la pantalla.
Cómo comprimir las imágenes de tu web
- Elige el formato: una foto en WebP o AVIF, un logo o un icono en SVG o PNG.
- Redimensiona la imagen al mayor tamaño al que se muestra, multiplicado por la mayor densidad de píxeles que quieras atender.
- Comprímela con una herramienta como Squoosh o ImageOptim.
- Prueba varios niveles de calidad y quédate con el archivo más pequeño que todavía se vea bien.
- Mira el resultado a tamaño completo, en bordes, textos y tonos de piel.
- Añade srcset para que los teléfonos reciban una versión más pequeña que las pantallas grandes.
- Pasa PageSpeed Insights y revisa lo que Lighthouse todavía marca.
Nuestra guía de WebP explica el formato que usamos para nuestras propias fotos, y nuestra guía de PNG, JPG o SVG cubre el resto.
Cómo revisa Lighthouse tus imágenes
Lighthouse comprime cada imagen JPEG o BMP de la página con un nivel de 85 y la compara con la original. Si el ahorro es de 4 KiB o más, marca la imagen.
También compara cada imagen con el tamaño al que se muestra, contando la densidad de píxeles. Si la diferencia es de 4 KiB o más, la marca. Desde Lighthouse 13, las dos comprobaciones forman parte de su análisis «Improve image delivery».
Lo que encontró Lighthouse en nuestras páginas
El 4 de noviembre de 2026 pasamos cuatro de nuestras páginas por PageSpeed Insights, en móvil y en escritorio. Lighthouse estimó que entregar mejor las imágenes ahorraría 191 KiB en móvil y 154 KiB en escritorio entre las cuatro.
Casi todo era tamaño. En la página de inicio en móvil, siete imágenes de nuestro muro de fotos miden 480 píxeles de ancho para un espacio de 189. Nuestro logo, un PNG, salió marcado en todas las páginas por ser más grande de lo que se muestra.
La compresión solo apareció en tres imágenes distintas, entre ellas el logo. En cinco de nuestras páginas, 31 de los 32 archivos de imagen ya eran WebP; el otro era el logo.
Antes de subir una imagen
- El formato encaja con el contenido: foto o dibujo.
- El archivo no es más grande que el mayor tamaño al que se muestra.
- La calidad se eligió a ojo, no se dejó la de serie.
- Bordes, textos y caras se ven limpios a tamaño completo.
- Los teléfonos reciben una versión más pequeña con srcset.
- PageSpeed Insights no muestra ninguna imagen por arreglar.
RecuerdaEn nuestras páginas, redimensionar ahorraría más que cualquier ajuste de calidad. Ajusta el tamaño antes de tocar la calidad.
El peso de las imágenes es una de las cosas que nuestro equipo de diseño web revisa antes de publicar una página.
Respuestas rápidas sobre la compresión de imágenes
¿Qué es comprimir una imagen?
Hacer más pequeño su archivo. La compresión con pérdida quita detalle que difícilmente notarás y funciona mejor en fotos. La compresión sin pérdida conserva cada píxel, algo que importa en ilustraciones de trazo, bordes nítidos y texto.
¿Qué calidad debo usar?
No hay un ajuste que sirva para todas las imágenes. Prueba varios niveles y quédate con el archivo más pequeño que todavía se vea bien. Como referencia, Lighthouse prueba las imágenes JPEG con un nivel de compresión de 85.
¿De qué tamaño debe ser una imagen para la web?
El tamaño al que se muestra por la densidad de píxeles de la pantalla: una imagen de 500 píxeles de ancho necesita 1,000 en una pantalla 2x. En pantallas 3x, la mayoría no distingue un archivo más pequeño.
¿Con qué herramientas comprimo imágenes?
Squoosh, del equipo web de Google, e ImageOptim sirven para una web pequeña. Los servicios de optimización de imágenes y los plugins de sistemas como WordPress pueden comprimirlas al subirlas.
¿Cómo sé si mis imágenes pesan demasiado?
Pasa la página por PageSpeed Insights. Lighthouse enumera las imágenes que conviene arreglar con su ahorro estimado, y marca una imagen cuando redimensionarla o comprimirla ahorraría al menos 4 KiB.
Fuentes
Consultadas el 4 de noviembre de 2026. web.dev: Rendimiento de las imágenes. Lighthouse: Codifica las imágenes de forma eficaz y Usa el tamaño adecuado para las imágenes. MDN, en inglés: Image file type and format guide. Nuestro caso: cuatro de nuestras páginas en PageSpeed Insights y cinco leídas en un navegador el 4 de noviembre de 2026.