Cómo funciona la conversión de imágenes en el navegador
Cada conversión es un proceso de cuatro pasos que se ejecuta en tu navegador. Para JPEG y PNG, la propia Canvas API del navegador maneja la codificación directamente. Para WebP en Safari y AVIF en todos los navegadores, la página carga un códec WebAssembly ligero bajo demanda — todo sigue siendo local, tus imágenes nunca salen del dispositivo.
- Lee cada archivo subido como Blob y crea una URL de objeto para que el navegador pueda decodificarlo sin copiar bytes a un servidor.
- Dibuja la imagen decodificada en un elemento Canvas fuera de pantalla, aplicando cualquier restricción de redimensionado manteniendo la proporción original.
- Llama a
canvas.toBlob(callback, targetMimeType, quality)para recodificar los píxeles para PNG, JPEG y WebP en Chrome/Firefox. Para WebP en Safari y codificación AVIF, un worker de códec WebAssembly se carga al primer uso y maneja la codificación en un hilo en segundo plano. La salida PNG siempre es sin pérdidas; JPEG, WebP y AVIF respetan el control deslizante de calidad, que se asigna directamente a la configuración de cuantización del codificador. - Muestra una miniatura antes/después con las dimensiones de salida y el tamaño del archivo, luego ofrece un botón de descarga por imagen o un ZIP único para el lote completo.
¿Por qué convertir formatos de imagen?
- Cambiar de PNG a WebP reduce los tamaños típicos de archivo en un 25–35% sin pérdida visual perceptible a calidad 0.8, lo que reduce directamente el peso de la página y mejora los puntajes LCP de Core Web Vitals.
- PNG preserva la transparencia donde JPEG la descarta, por lo que cambiar PNG→JPEG renderiza los píxeles transparentes sobre fondo blanco — útil cuando el destino (correo electrónico, CMS antiguo) no acepta PNG.
- Las plataformas sociales y las redes de publicidad tienen requisitos de formato estrictos: Facebook y LinkedIn prefieren JPEG para fotos; el pipeline de vista previa OG de Twitter maneja WebP; algunos servidores de anuncios rechazan creatividades que no sean JPEG.
- Estandarizar un lote de imágenes en formatos mixtos (capturas PNG, fotos JPEG, exportaciones WebP) a un único formato antes de subir a un CMS o DAM elimina la complejidad del manejo de formatos en el pipeline de ingesta.
Aplicaciones comunes
La conversión de formato surge cuando el formato de origen y las expectativas del destino no coinciden.
- Preparar fotos de productos para una tienda Shopify o WooCommerce — originales JPEG convertidos a WebP a calidad 0.85 para la tienda, PNG conservado para exportaciones de impresión.
- Convertir exportaciones PNG de diseñadores a JPEG o WebP antes de incrustar en un build de React o Next.js, para que el optimizador de imágenes del framework comience con una fuente más pequeña.
- Procesamiento por lotes de una carpeta de capturas de pantalla de una ejecución de QA — PNG a JPEG a calidad 0.9 para reducir el tamaño del archivo antes de adjuntarlo a un ticket de seguimiento de errores.
Un ejemplo práctico: PNG de 2 MB → WebP de 300 KB
Una imagen PNG hero de 2 MB a 2400×1600 píxeles es una carga útil común en páginas de destino de marketing.
Suelta el PNG aquí, elige WebP como formato destino, establece la calidad a 0.8 y opcionalmente establece el ancho máximo a 1200 para reducir a la mitad las dimensiones de píxeles. El pipeline de canvas dibuja la imagen a 1200×800 (proporción preservada), recodifica a WebP, y la tarjeta de salida muestra el resultado — típicamente 280–320 KB, una reducción del 85%. Haz clic en Descargar en la tarjeta o descarga un ZIP en lote si convertiste varias imágenes.
¿Qué formatos son compatibles?
En el lado de entrada, se acepta cualquier formato que el navegador pueda decodificar: PNG, JPEG, WebP, GIF y BMP cubren prácticamente todos los archivos que produce un diseñador o una herramienta de captura de pantalla. Los formatos de salida son PNG (siempre sin pérdidas), JPEG, WebP y AVIF. La salida AVIF es compatible mediante un codificador WebAssembly que se carga bajo demanda en todos los navegadores, sin necesidad de un codificador Canvas nativo.
¿Esto ocurre en mi dispositivo?
Sí. La página usa la Canvas API nativa del navegador y la Web File API. Ningún dato de imagen se envía a un servidor; el pipeline de conversión se ejecuta completamente en tu pestaña del navegador. Puedes verificarlo abriendo DevTools y comprobando el panel Network — no hay solicitudes salientes una vez que la página está cargada.
¿Cuál es la diferencia de calidad entre PNG y JPEG?
PNG es un formato sin pérdidas — cada píxel sobrevive el ciclo de codificación exactamente. JPEG usa compresión DCT y descarta detalles finos que el ojo raramente nota; la calidad 0.8 es un punto óptimo común donde la diferencia visual del original es imperceptible para la mayoría de los espectadores pero el archivo es 4–6 veces más pequeño que PNG. WebP puede operar en modos sin pérdidas y con pérdidas; el deslizador de calidad aquí impulsa el codificador con pérdidas, y la calidad 0.85 típicamente supera a JPEG 0.85 en un 25–30% en fotos naturales.
¿Cómo funciona la salida AVIF?
La codificación AVIF utiliza un códec WebAssembly que se carga bajo demanda la primera vez que seleccionas el formato AVIF — sin plugin, sin flag del navegador, sin esperar una futura versión de Chrome. El binario WASM se sirve desde nuestro propio origen, codifica tu imagen completamente en un hilo en segundo plano y devuelve un blob image/avif estándar listo para descargar. La única solicitud de red es la obtención única del propio códec; ningún dato de imagen sale nunca de tu dispositivo. Una vez cargado, el codificador permanece en caché durante la sesión para que las conversiones posteriores sean más rápidas. Los archivos AVIF suelen ser 20–30% más pequeños que WebP y 50% más pequeños que JPEG con calidad equivalente, lo que los convierte en la mejor opción para sitios sensibles al rendimiento.
Suelta tus imágenes, elige un formato, convierte. Todo funciona en tu pestaña — sin subidas, sin cuenta, sin esperar un servidor.