Cómo comprimir imágenes para una página web

Según el Web Almanac 2025 de HTTP Archive, la página de inicio mediana pesaba 2,56 MB en móvil, y 911 KB de ese peso eran imágenes. En escritorio, la página mediana incluía 1058 KB de imágenes. Las imágenes son también lo que esperan los visitantes: el elemento más grande que aparece en pantalla al cargar la página, el Largest Contentful Paint (LCP), era una imagen en el 76% de las páginas para móvil.

Las imágenes más ligeras cargan antes con conexiones lentas, gastan menos datos móviles de tus visitantes y te cuestan menos ancho de banda. El LCP es una de las Core Web Vitals (Métricas web principales), las mediciones con las que Google evalúa la experiencia en una página, así que unas imágenes pesadas pueden costarte algo más que unos segundos de paciencia.

La compresión no puede salvar una imagen mucho más grande que el espacio que ocupa. Una foto de cámara de 4000 píxeles de ancho, mostrada en una columna de 800 píxeles, tiene 25 veces más píxeles de los que la página puede aprovechar. web.dev señala que enviar imágenes de tamaño escritorio a los teléfonos puede consumir 2–4 veces más datos de los necesarios.

• Banners a todo el ancho: unos 1600–2000 píxeles de ancho bastan para la mayoría de los diseños.
• Imágenes en la columna de un artículo: aproximadamente el doble del ancho de la columna, para que se vean nítidas en pantallas de alta densidad (por ejemplo, 1400 píxeles para una columna de 700 píxeles).
• Miniaturas y avatares: el doble de su tamaño en pantalla, a menudo 200–400 píxeles.

El formato determina con qué eficiencia se puede guardar una imagen. En resumen: las fotos van bien en JPG o WebP; los logotipos, las capturas de pantalla y todo lo que tenga transparencia, en PNG o WebP. Nuestra comparativa de JPG, PNG y WebP explica cuándo conviene cada uno.

Alrededor del 97% de los navegadores en uso muestran WebP, y suele ocupar bastante menos. Para probarlo, convierte con JPG a WebP o PNG a WebP y compara el resultado con el original: un archivo convertido no siempre es más pequeño, sobre todo en gráficos sencillos.

La compresión elimina datos que el ojo difícilmente echará en falta. En el compresor de imágenes de Bitinz puedes soltar un lote de archivos JPG, PNG o WebP y elegir uno de tres niveles:

• Rápido: prioriza la velocidad, para lotes grandes.
• Equilibrado: el nivel predeterminado y una buena opción para la mayoría de las imágenes de un sitio web.
• Máximo: tarda un poco más a cambio de archivos más pequeños; merece la pena para las imágenes que aparecen en todas las páginas, como banners y fondos.

Si mantienes el formato, Bitinz nunca te devuelve un archivo más grande que el que subiste. Compara el resultado con el original a tamaño real, sobre todo en imágenes con texto fino o degradados suaves, y luego descarga las que te convenzan.

Una imagen bien comprimida puede seguir ralentizando la página si se carga en el momento equivocado o con el tamaño equivocado. Unos pocos atributos HTML hacen la mayor parte del trabajo:

• Indica width y height en cada imagen, para que el navegador reserve el espacio y el diseño no salte mientras se carga.
• Añade loading="lazy" a las imágenes que están más abajo en la página, para que solo se carguen cuando el visitante se acerque a ellas al desplazarse.
• Nunca apliques la carga diferida a la imagen principal de la parte superior de la página. En su lugar, web.dev recomienda fetchpriority="high" para esa imagen, y como mucho en una o dos imágenes.
• Usa srcset y sizes para ofrecer varios anchos de la misma imagen, de modo que los teléfonos descarguen un archivo más pequeño que las pantallas grandes.
• Sirve las imágenes con una duración de caché larga, a través de una CDN si tienes una, para que los visitantes que vuelven no tengan que descargarlas de nuevo.

Analiza la página con PageSpeed Insights o con el panel Lighthouse de Chrome. Desde Lighthouse 13, las comprobaciones de imágenes se agrupan en un único apartado, “Improve image delivery”, que enumera las imágenes que podrían comprimirse más, servirse en un formato moderno o hacerse más pequeñas. Las imágenes que ahorrarían menos de 4 KiB no aparecen, así que una lista corta es buena señal.

Después, revisa la página tú mismo en un teléfono. Los bordes nítidos, el texto dentro de las imágenes y los tonos de piel son donde antes se notan los problemas de compresión.

Si tu sitio añade imágenes cada día, por ejemplo a través de un gestor de contenidos o una tienda online, comprímelas durante la subida o la publicación en lugar de hacerlo a mano. La API para desarrolladores de Bitinz recibe una imagen por HTTP y devuelve un enlace al archivo comprimido, así que puede ejecutarse desde un script o un proceso de compilación. Todas las cuentas tienen una cuota mensual gratuita.

1. 01Ajusta cada imagen a aproximadamente el doble del tamaño con el que se muestra.
2. 02Usa JPG o WebP para fotos, y PNG o WebP para gráficos y transparencias.
3. 03Comprime en el nivel Equilibrado y prueba Máximo con las imágenes más grandes.
4. 04Compara el resultado con el original antes de sustituirlo.
5. 05Indica el ancho y el alto, aplica la carga diferida a las imágenes que quedan fuera de la primera pantalla y nunca a la imagen principal.
6. 06Vuelve a comprobar la página en PageSpeed Insights.

¿Vas a subir imágenes a otro sitio que no sea tu web? Cada plataforma tiene sus propias reglas: consulta los requisitos de tamaño de imagen para correo electrónico y tiendas online.