Comprimir imágenes para tu web

Las imágenes suelen ser los archivos más pesados que carga una página, y las páginas pesadas se sienten lentas, sobre todo en el teléfono. La solución suele ser sencilla: dejar de servir una foto de 4000 px en un hueco de 800 px. Esta es una rutina rápida que lo hace en tu navegador, sin subir nada.

Abrir el compresor de imágenes

1. Ajusta el tamaño de la imagen al lugar donde aparece

Averigua el ancho máximo con el que se muestra la imagen, como una columna de artículo de 800 px o un banner a todo el ancho. Indica en «Ancho/alto máximo (px)» más o menos ese ancho, o hasta el doble si quieres un resultado nítido en pantallas de alta densidad. El lado más largo se reduce, se mantienen las proporciones y las imágenes nunca se amplían. Quitar píxeles que nunca vas a mostrar es el mayor ahorro que puedes conseguir.

Por ejemplo, una foto del teléfono de 4000 px de ancho que se muestra en una columna de 800 px puede ajustarse a 1600 px y seguir viéndose nítida en una pantalla de alta densidad, con muchos menos píxeles que el original. Revisa el diseño de tu página o el inspector de tu navegador si no estás seguro del ancho real de un hueco.

2. Ajusta la calidad

Para fotos en JPG o WebP, empieza en el 75 % y compara los tamaños de antes y después. La mayoría de las fotos se ven casi igual con un 70–80 % que con un 100 %, con una fracción del tamaño. Bájala poco a poco; cada intento parte de tu original, así que puedes volver a probar sin perder nada. El PNG ignora el control porque no tiene pérdida, así que redimensionar es su única palanca.

3. Elige el formato

• Fotos: el WebP suele pesar menos que el JPG con una calidad parecida, y todos los navegadores principales actuales lo admiten. El JPG es la alternativa segura.
• Capturas de pantalla, texto y logotipos: el PNG mantiene los bordes nítidos y admite transparencia; el WebP también admite transparencia.
• Imágenes de cabecera y banners: el plan gratuito genera hasta 2000 px en el lado más largo, que es de sobra para la mayoría de los diseños.

La conversión entre formatos y el procesamiento de lotes ilimitados forman parte de Pro (29 $ al año o 4 $ al mes). El plan gratuito trata hasta 5 imágenes a la vez con una calidad de hasta el 80 %.

4. Termina en el código de tu página

• Añade los atributos width y height a cada <img> para que el diseño no salte mientras se carga.
• Añade loading="lazy" a las imágenes que quedan fuera de la pantalla inicial, pero no a la imagen principal de la parte superior.
• Usa nombres de archivo descriptivos y texto alt.

Luego recarga la página y mírala en una ventana del tamaño de un teléfono. Si sigue pareciendo pesada, las imágenes más grandes que queden son las que conviene reducir más.

Comprimir las imágenes de tu web

¿Vas a compartir la foto? Elimina también su ubicación y los datos de la cámara: Photo Scrubber

Lee también: JPG, PNG o WebP · comprimir una imagen online · redimensionar una imagen online · comprimir un PNG online · reducir el tamaño de una foto