Imágenes y fotografías · Convertidor y compresor de imágenes
Cómo canvas.toBlob convierte PNG a WebP dentro de su navegador
· Cómo funciona
formatos de imagen lienzo página web
Un convertidor de imágenes de navegador es un decodificador, un mapa de bits y un codificador encadenados, y toda la cadena está integrada en el navegador. Esta publicación sigue un PNG a través de la decodificación, el lienzo y toBlob hasta un archivo WebP, y señala lo que se pierde en el camino.
De dónde viene WebP cuando no hay ningún servidor involucrado: la pregunta concreta detrás de un conversor que funciona sin conexión
El WebP no proviene de una cola de conversión del lado del servidor. Su navegador ya tiene decodificadores de imágenes, una superficie de píxeles dibujable y codificadores; el convertidor ToolAcre los conecta. Es por eso que un PNG se puede transformar en su pestaña después de que se haya cargado el sitio. "Sin carga" se refiere a la imagen de origen y al resultado de la conversión, no a que el sitio web no tenga ninguna actividad en la red.
Paso uno: decodificación: cómo el navegador convierte bytes PNG en un mapa de bits RGBA y por qué cada formato termina en la misma cuadrícula
Primero, el PNG se decodifica en un mapa de bits de imagen. La compresión PNG, las opciones de paleta y los metadatos de color determinan cómo sus bytes se convierten en píxeles, pero el lienzo funciona en la trama decodificada, no en fragmentos del archivo PNG. Una captura de pantalla de 1600×900 produce 1.44 millones de posiciones de píxeles incluso si el archivo en sí es mucho más pequeño. ToolAcre utiliza createImageBitmap y aplica un presupuesto de píxeles; una imagen decodificada de gran tamaño es un problema de memoria antes que un problema de carga.
Paso dos: el lienzo como área de preparación: dibujar el mapa de bits en un lienzo o OffscreenCanvas de dimensiones coincidentes
El mapa de bits se dibuja en un lienzo o OffscreenCanvas con las dimensiones de salida solicitadas. Si esas dimensiones coinciden con la fuente y no se elige ningún recorte, drawImage prepara los píxeles para la codificación; si las dimensiones cambian, el lienzo las vuelve a muestrear y los valores de píxeles pueden cambiar antes de que comience la codificación WebP. La misma rutina de renderizado sirve para la vista previa interactiva y la ruta del trabajador, evitando que esas dos salidas sigan algoritmos no relacionados.
Paso tres: toBlob con un tipo y calidad MIME: cómo se selecciona el codificador, qué controla el número de calidad y por qué se ignora para PNG
En un lienzo normal, toBlob(callback, "image/webp", calidad) le pide al navegador que codifique WebP y vuelve a llamar con un Blob. Cuando OffscreenCanvas está disponible, ToolAcre usa convertToBlob({type,quality}) para el mismo trabajo. Controles de calidad de un codificador con pérdidas; no es una promesa de un recuento de bytes específico. La exportación PNG no tiene pérdidas y su parámetro de calidad no establece un nivel de compresión similar al de JPEG. Inspeccione siempre el formato real devuelto, porque la disponibilidad del codificador depende del navegador.
Lo que descarta el proceso: metadatos, perfiles de color y precisión de 16 bits, y por qué eso es una propiedad de la técnica y no un error.
Volver a codificar un ráster decodificado no puede conservar todos los datos en el contenedor PNG original. Es posible que los fragmentos de texto, los metadatos de la cámara o del editor, algunos detalles del perfil de color y la profundidad de bits de origen no sobrevivan al viaje de ida y vuelta del lienzo; Los canales de 16 bits no se convierten en un WebP de 16 bits simplemente porque la entrada los lleva. WebP puede mantener la transparencia cuando el codificador la admite, mientras que una exportación JPEG requiere rellenar áreas transparentes. El tamaño del archivo por sí solo no puede mostrar si una conversión conservó las líneas finas o los colores.
Ejemplo resuelto: una captura de pantalla PNG 1.8 MB para WebP: seguir el archivo a través de los tres pasos y leer el resultado
Considere una captura de pantalla PNG 1.8 MB con texto, degradados y una esquina transparente. Decodificalo, deja las dimensiones sin cambios, selecciona WebP, exporta y compara el tamaño del Blob y el tipo MIME con el original. El tamaño resultante es medido, no predecible: las capturas de pantalla limpias pueden comprimirse bien, mientras que el contenido ruidoso no. Amplíe los glifos pequeños y la esquina transparente antes de aceptar el archivo más pequeño. Si el texto nítido de la interfaz de usuario se vuelve borroso, mantenga PNG o ajuste la calidad del codificador en lugar de afirmar que WebP siempre es mejor.
Lo que esto no cubre: imágenes animadas, formatos que el navegador no puede decodificar y configuraciones del codificador que la API no expone.
Este canal no promete retención de animación, decodificación HEIC en cada dispositivo ni control total de los parámetros de esfuerzo y submuestreo del codificador WebP. Tampoco puede recuperar detalles ya perdidos en una fuente JPEG guardándola como PNG o WebP. Los ciclos repetidos de decodificación/recodificación pueden acumular pérdidas. Conserve un original y utilice los formatos de entrada/salida admitidos que figuran en la página de herramientas real en lugar de asumir que todos los formatos que su sistema operativo conoce se aceptan aquí.
Conclusión: tres pasos, cero cargas: cómo Image Converter & Compressor ejecuta este proceso en su dispositivo
El mecanismo es decodificar → dibujar → codificar, se lleva a cabo con las API del navegador y sin carga de imágenes. ToolAcre expone el formato y las dimensiones de destino para que pueda saber si simplemente está cambiando el contenedor o también cambiando el tamaño de los píxeles. Pruebe una captura de pantalla representativa en Image Converter & Compressor antes de procesar un lote completo, luego inspeccione el resultado descargado en el tamaño que la gente verá.