Última actualización: 10 de agosto

<span aria-hidden="true" id="how-to-convert-webp-to-png"></span>

# Cómo convertir WebP a PNG

![Tim Koschützki](/assets/images/teammates/avatar-tim-kos-1.jpg?dpl=dpl_57Yv8CaL8TB1QConNpNYtbZm6CfA)

**Tim Koschützki**

Cofundador · Berlín, Alemania · Mostrar bio

[](https://x.com/tim%5Fkos)[](https://github.com/tim-kos)

WebP es una excelente opción para entregar imágenes en la web porque puede generar archivos pequeños con buena calidad visual. PNG suele ser el mejor formato de intercambio cuando un editor, sistema de publicación o flujo de trabajo antiguo no acepta WebP. Además, ofrece una salida sin pérdida predecible y admite transparencia.

Convertir WebP a PNG no mejora la calidad de la imagen de origen. Solo cambia el contenedor y el formato de compresión, y el PNG resultante suele ser más grande. Si el destino acepta WebP, conservar el original suele ser la opción más eficiente.

Esta guía compara cuatro métodos prácticos de conversión:

|Método|Ideal para|Principal desventaja|
|-|-|-|
|Navegador|Conversiones puntuales sin subir un archivo|Usa memoria del cliente y resulta incómodo para lotes|
|ImageMagick|Scripts locales y lotes desde la línea de comandos|Debes mantener el entorno de ejecución y los límites de recursos|
|Sharp para Node.js|Conversión dentro de una aplicación Node.js|Tu aplicación gestiona el escalado y el manejo de trabajos|
|API gestionada|Subidas de usuarios y pipelines de producción repetibles|Añade una dependencia de un servicio externo|

<span aria-hidden="true" id="before-converting"></span> <span aria-hidden="true" id="antes-de-convertir"></span>

## Antes de convertir

Verifica estos detalles antes de elegir una herramienta:

* **Transparencia:** WebP y PNG admiten canal alfa, pero tu ruta de conversión debe conservarlo.
* **Animación:** WebP animado necesita un manejo especial. Una conversión básica puede producir solo un fotograma PNG. Usa APNG o una secuencia de archivos PNG si necesitas conservar cada fotograma.
* **Metadatos:** Los conversores pueden eliminar EXIF, perfiles ICC u otros metadatos de forma predeterminada. Prueba los campos exactos que necesita tu flujo de trabajo.
* **Tamaño del archivo:** PNG usa compresión sin pérdida, por lo que las imágenes fotográficas suelen volverse mucho más grandes.
* **Entrada no confiable:** Aplica límites de dimensiones, cantidad de píxeles, memoria y tiempo de procesamiento cuando los usuarios suministren imágenes.

<span aria-hidden="true" id="convert-webp-to-png-in-a-browser"></span> <span aria-hidden="true" id="convertir-webp-a-png-en-un-navegador"></span>

## Convertir WebP a PNG en un navegador

El decodificador de imágenes del navegador y la API Canvas son suficientes para una herramienta de conversión local y pequeña. El archivo no necesita salir del dispositivo del usuario.

```html
<input id="image" type="file" accept="image/webp" />
<button id="convert" type="button">Convert to PNG</button>

<script type="module">
  const input = document.querySelector('#image')
  const button = document.querySelector('#convert')

  button.addEventListener('click', async () => {
    const [file] = input.files
    if (!file) return

    const bitmap = await createImageBitmap(file)
    const canvas = document.createElement('canvas')
    canvas.width = bitmap.width
    canvas.height = bitmap.height

    const context = canvas.getContext('2d')
    context.drawImage(bitmap, 0, 0)
    bitmap.close()

    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'))
    if (!blob) throw new Error('The browser could not encode the image as PNG')

    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = file.name.replace(/\.webp$/i, '.png')
    link.click()
    URL.revokeObjectURL(link.href)
  })
</script>

```

Esta es una buena opción para conversiones ocasionales. Las imágenes grandes y los lotes pueden consumir bastante memoria del navegador, y Canvas no conserva los metadatos originales de la imagen.

<span aria-hidden="true" id="convert-webp-to-png-with-imagemagick"></span> <span aria-hidden="true" id="convertir-webp-a-png-con-imagemagick"></span>

## Convertir WebP a PNG con ImageMagick

Para la automatización local o un servidor que ya administras, ImageMagick ofrece un comando conciso:

```bash
magick input.webp output.png

```

Para convertir todos los archivos WebP del directorio actual:

```bash
magick mogrify -format png ./*.webp

```

`mogrify` crea archivos PNG junto a los originales en este ejemplo. En producción, configura también la política de recursos de ImageMagick para que las imágenes inesperadamente grandes o malformadas no puedan consumir toda la memoria o el espacio en disco disponible.

<span aria-hidden="true" id="convert-webp-to-png-in-nodejs"></span> <span aria-hidden="true" id="convertir-webp-a-png-en-nodejs"></span>

## Convertir WebP a PNG en Node.js

[Sharp⁠](https://sharp.pixelplumbing.com/) es una opción práctica cuando la conversión forma parte de un servicio Node.js existente:

```javascript
import sharp from 'sharp'

await sharp('input.webp').png().toFile('output.png')

```

Para código de aplicación, valida la entrada antes de procesarla y gestiona los fallos sin dejar archivos de salida parciales. También necesitarás una cola o un límite de concurrencia si muchos usuarios pueden iniciar conversiones a la vez.

<span aria-hidden="true" id="convert-webp-to-png-with-an-api"></span> <span aria-hidden="true" id="convertir-webp-a-png-con-una-api"></span>

## Convertir WebP a PNG con una API

Una API gestionada resulta útil cuando la conversión forma parte de un flujo de subida de usuarios, cuando los archivos llegan de varias fuentes, o cuando el resultado debe almacenarse y pasarse a etapas de procesamiento posteriores. Para unos pocos archivos locales, los métodos de línea de comandos y Node.js anteriores son más sencillos. Para un pipeline de medios en producción, una API puede eliminar el trabajo operativo relacionado con subidas, colas, reintentos, archivos temporales y escalado.

```jsonc
{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "converted": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "result": true
    }
  }
}

```

La misma Assembly puede importar archivos desde almacenamiento en la nube, procesar varias subidas y exportar los PNG a tu destino. Eso convierte a Transloadit en una opción particularmente conveniente cuando la conversión de WebP a PNG es una etapa dentro de un flujo de trabajo más amplio de subida o procesamiento de imágenes.

<span aria-hidden="true" id="convert-webp-to-png-online"></span> <span aria-hidden="true" id="convertir-webp-a-png-online"></span>

## Convertir WebP a PNG online

¿Necesitas una conversión rápida sin configurar una herramienta local? [Convierte WebP a PNG con nuestra herramienta online gratuita](/es/tools/webp-to-png.md) y descarga el resultado directamente en tu navegador. Es útil para archivos puntuales; para un procesamiento de producción repetible, el flujo con API anterior es más adecuado.

<span aria-hidden="true" id="which-method-should-you-choose"></span>

## ¿Qué método deberías elegir?

Usa el navegador para una utilidad puntual y respetuosa con la privacidad. Usa ImageMagick para scripts de shell y entornos de servidor controlados. Usa Sharp cuando la conversión sea una parte pequeña de una aplicación Node.js existente. Usa una API gestionada cuando las subidas, el almacenamiento, la observabilidad y el procesamiento confiable importen tanto como la propia conversión de formato.

Elijas el método que elijas, prueba archivos representativos: transparentes, fotográficos, grandes y animados. Esos casos revelan la mayoría de las diferencias entre conversores antes de que lleguen a producción.

<span aria-hidden="true" id="automate-your-image-conversions"></span>

## Automatiza tus conversiones de imágenes

Si la conversión de WebP a PNG forma parte de un flujo de subidas o procesamiento de medios, [crea una cuenta gratuita de Transloadit](/c/signup/) para obtener una clave API, guardar este flujo como Template y procesar archivos de forma fiable con reintentos, integraciones de almacenamiento y notificaciones webhook.

<span aria-hidden="true" id="frequently-asked-questions"></span> <span aria-hidden="true" id="preguntas-frecuentes"></span>

## Preguntas frecuentes

<span aria-hidden="true" id="does-converting-webp-to-png-improve-image-quality"></span> <span aria-hidden="true" id="convertir-webp-a-png-mejora-la-calidad-de-la-imagen"></span>

### ¿Convertir WebP a PNG mejora la calidad de la imagen?

No. PNG almacena los píxeles decodificados sin compresión adicional con pérdida, pero no puede restaurar el detalle que se eliminó al crear el WebP.

<span aria-hidden="true" id="will-transparency-be-preserved"></span>

### ¿Se conservará la transparencia?

Puede conservarse. Ambos formatos admiten transparencia, y los ejemplos anteriores conservan el canal alfa decodificado. Verifica el resultado si tu flujo de trabajo aplica un fondo, un aplanado u otras transformaciones.

<span aria-hidden="true" id="why-is-the-png-larger-than-the-webp"></span>

### ¿Por qué el PNG es más grande que el WebP?

PNG no tiene pérdida y es especialmente eficaz para gráficos con colores planos. WebP puede usar compresión con pérdida, que en general es más compacta para fotografías. Por lo tanto, una salida más grande es esperable en muchos casos.

<span aria-hidden="true" id="can-i-convert-webp-files-in-batches"></span> <span aria-hidden="true" id="puedo-convertir-archivos-webp-por-lotes"></span>

### ¿Puedo convertir archivos WebP por lotes?

Sí. ImageMagick puede procesar un directorio, las bibliotecas de aplicación pueden ejecutarse a través de una cola controlada, y una API puede procesar varios archivos subidos o importados en un solo pipeline.

[#webp](/es/blog/tags/webp.md)[#png](/es/blog/tags/png.md)[#image-conversion](/es/blog/tags/image-conversion.md)[#image-processing-service](/es/blog/tags/image-processing-service.md)

### 👩‍💻 Únete a más de 20k desarrolladores

Suscríbete a nuestro [boletín mensual EN (English)](/newsletters.md) para recibir enlaces directos a 3 artículos exclusivos sobre tecnología y 2 actualizaciones de producto. Ni más ni menos.

Tu email:

Obtén acceso

## Subida y encoding de archivos. Sin complicaciones.

Transloadit optimiza el manejo de archivos para desarrolladores, con la confianza de marcas como Coursera y The New York Times. Somos reconocidos por una API confiable, soporte de primer nivel y un firme compromiso con el código abierto, con proyectos como [Uppy⁠](https://uppy.io) y el protocolo [tus⁠](https://tus.io) que marcan estándares en el procesamiento de archivos.

[Regístrate](/c/)[Agenda una demo](https://survey.typeform.com/to/kRg47Xi5)

No necesitas tarjeta de crédito

Cancela en cualquier momento