Acabo de crear un conversor de formato de imágenes muy simple usando JavaScript del lado del cliente. Es un conversor muy simple que te permite convertir entre formatos de imágenes como lo son JPG, PNG, AVIF y WEBP.
https://parzibyte.me/apps/conversor-imagenes/
Con este conversor puedes convertir de webp a png, webp a avif, webp a jpg y todas las combinaciones posibles entre estos formatos. El conversor es realmente rápido, basta con seleccionar el formato de salida, la calidad y listo, una vez que selecciones la imagen se va a descargar la misma imagen pero con el nuevo formato, así de simple.
Aunque ya existen miles de aplicaciones que hacen eso, yo quería una realmente rápida que me permita convertir webp a png y sobre todo avif a png porque a veces al descargar imágenes las mismas vienen en este formato.
Probar conversor de imágenes
Este convertidor de formato de imagen con JavaScript se ejecuta totalmente del lado del cliente y no procesa nada en el lado del servidor. Puedes usarlo en móviles y dispositivos de escritorio.
Úsala aquí: Conversor de imágenes webp, png, jpg y avif al instante
Explicación del código
El código, así como la app, son realmente simples. He usado vite solamente para tener una base sólida y poder compilar fácilmente, aunque realmente no se usa ninguna librería.
Lo primero que hacemos es leer el archivo del input y convertirlo a un ImageBitmap, mismo que ya podemos pintar en
un canvas fuera de pantalla (OffscreenCanvas) así:
const imagenComoBitmap = await createImageBitmap(primerArchivo);
const canvasFueraDePantalla = new OffscreenCanvas(imagenComoBitmap.width, imagenComoBitmap.height);
const contexto = canvasFueraDePantalla.getContext("2d");
contexto.drawImage(imagenComoBitmap, 0, 0, imagenComoBitmap.width, imagenComoBitmap.height);
Hasta este punto ya tenemos la imagen dibujada en el canvas. La verdadera conversión ocurre en la siguiente línea:
const imagenConvertidaComoBlob = await canvasFueraDePantalla.convertToBlob({ quality: parseFloat($calidad.value), type: $formatoSalida.value });
Al convertirla a BLOB con convertToBlob podemos especificar la calidad en quality con un número entre 0 y 1 así como el tipo en type. Justo
aquí es en donde estamos cambiando el formato de imagen.
Por ejemplo, si quisiéramos convertir la imagen a su máxima calidad y en formato PNG usaríamos:
const imagenConvertidaComoBlob = await canvasFueraDePantalla.convertToBlob({ quality: 1, type: "image/png" });
En el código estoy usando los valores que tiene el select del formato.
Ahora que ya tenemos la imagen como blob simplemente la descargamos como descargaríamos cualquier canvas, poniendo su nombre original pero cambiando la extensión:
const url = URL.createObjectURL(imagenConvertidaComoBlob);
const extension = extensionSegunFormatoSalida($formatoSalida.value);
const a = Object.assign(document.createElement('a'), {
href: url,
download: nombreOriginalSinExtension + "." + extension,
});
a.click();
URL.revokeObjectURL(url);
Y listo, esa es la parte más importante del código fuente. Lo demás es simplemente extraer el nombre, mostrar un indicador de carga y otras cosas que puedes revisar en el repositorio de GitHub.
Modificando código
El código fuente se encuentra en: https://github.com/parzibyte/conversor-imagenes-js
He usado NPM versión 11.5.1 y Node versión 24.5.0
- Clona el repositorio
- Instala dependencias con
npm instal - Levanta el servidor con
npm run dev - Cuando estés listo, compila con
npm run build