Compresión de imágenes y WebP para desarrolladores

Los sitios de documentación, capturas de README y assets de blog suelen publicarse como archivos PNG o JPEG grandes. Puedes reducirlos en local antes del commit o del deploy — sin subir fuentes a un compresor de terceros.

Cuándo ayuda WebP

WebP suele superar a JPEG y PNG en fotos y capturas de UI a calidad visual similar. Es un buen valor por defecto para entrega web cuando tu CDN o host estático sirve formatos modernos.

Usa JPEG cuando necesites máxima compatibilidad en email o pipelines legacy. Mantén PNG cuando necesites bordes sin pérdida o transparencia.

Un flujo local práctico

1. Reúne las imágenes que quieres optimizar (carpeta docs, public/, export desde Figma).
2. Abre Image Compressor en el navegador.
3. Suelta varios archivos, elige WebP o JPEG y configura calidad alrededor de 0.80–0.85 como punto de partida.
4. Opcionalmente configura max width (por ejemplo 1280) si capturas a resolución completa no son necesarias.
5. Haz clic en Compress all, compara tamaños antes/después y descarga un zip.

El procesamiento permanece en tu máquina.

Lo que los desarrolladores suelen pasar por alto

Metadatos — La exportación por canvas del navegador elimina EXIF y perfiles ICC. Suele estar bien para assets web, pero no para archivos fotográficos.

PNG transparente → JPEG — La transparencia se convierte en un color de fondo sólido. Elige blanco o el fondo de tu sitio de forma deliberada.

«Compresión» PNG — La salida PNG en el navegador es efectivamente sin pérdida. No esperes grandes ahorros a menos que cambies a WebP/JPEG.

Límites por lote — Imágenes muy grandes o docenas de archivos pueden agotar la memoria del navegador móvil. Comprime en lotes más pequeños en teléfonos.

Herramientas relacionadas

¿Necesitas recortes exactos primero? Usa Image Cropper. ¿Preparas assets de App Store? Usa App Market Image Resizer en su lugar — los tamaños de tienda no son el mismo problema que la compresión de sitio.