Cómo funciona la conversión de imágenes en el navegador
Cada conversión es un proceso de cuatro pasos que se ejecuta completamente en JavaScript. No se descarga ninguna librería de códecs — la propia Canvas API del navegador gestiona la decodificación y recodificación.
- 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, tipoMime, calidad)para recodificar los píxeles. La salida PNG es siempre sin pérdidas; JPEG y WebP respetan el deslizador de calidad. - 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?
Imágenes de origen: cualquier formato que el navegador pueda decodificar — PNG, JPEG, WebP, GIF y BMP son todos aceptados. Formatos de salida: PNG (sin pérdidas), JPEG y WebP. La salida AVIF aún no es compatible porque el codificador Canvas API solo está disponible en Chrome 105+ y está ausente en Safari y Firefox; se planea una ruta AVIF basada en WASM para una versión futura.
¿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.
¿Cuándo llegará el soporte AVIF?
La codificación AVIF mediante canvas.toBlob(…, 'image/avif') solo funciona en Chrome 105+ hoy; Safari y Firefox no lo admiten. Una versión futura añadirá una ruta AVIF opcional usando un codificador WebAssembly ligero para que la función funcione en todos los navegadores. Hasta entonces, la opción AVIF se muestra como "próximamente" y el codificador WebP (que es universalmente compatible con navegadores modernos) es la alternativa de próxima generación recomendada.
Suelta tus imágenes, elige un formato, convierte. Todo funciona en tu pestaña — sin subidas, sin cuenta, sin esperar un servidor.