Cómo convertir WebP a PNG

Tim Koschützki

Cofundador · Berlín, Alemania · Mostrar bio

WebP es una opción sólida para entregar imágenes en la web porque puede producir archivos pequeños con buena calidad visual. PNG suele ser el mejor formato de intercambio cuando un editor, un sistema de publicación o un flujo de trabajo más antiguo no acepta WebP. Además, ofrece una salida predecible y sin pérdida, 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 a menudo 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:

Antes de convertir

Revisa estos detalles antes de elegir una herramienta:

• Transparencia: WebP y PNG admiten un canal alfa, pero tu método de conversión debe conservarlo.
• Animación: los WebP animados requieren un tratamiento especial. Una conversión básica puede generar solo un fotograma PNG. Usa APNG o una secuencia de archivos PNG si necesitas conservar todos los fotogramas.
• Metadatos: los conversores pueden eliminar de forma predeterminada los datos EXIF, los perfiles ICC u otros metadatos. Prueba los campos exactos que necesita tu flujo de trabajo.
• Tamaño de 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, número de píxeles, memoria y tiempo de procesamiento cuando los usuarios proporcionen imágenes.

Convertir WebP a PNG en un navegador

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

<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>

Esto encaja bien con conversiones ocasionales. Las imágenes grandes y los lotes pueden consumir mucha memoria del navegador, y Canvas no conserva los metadatos de la imagen original.

Convertir WebP a PNG con ImageMagick

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

magick input.webp output.png

Para convertir todos los archivos WebP del directorio actual:

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 mal formadas no puedan consumir toda la memoria o el espacio en disco disponibles.

Convertir WebP a PNG en Node.js

Sharp⁠ es una opción práctica cuando la conversión forma parte de un servicio Node.js existente:

import sharp from 'sharp'

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

En el código de una 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.

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 desde varias fuentes o cuando el resultado debe almacenarse y pasarse a pasos de procesamiento posteriores. Para unos pocos archivos locales, los enfoques con la línea de comandos y Node.js descritos arriba son más sencillos. Para un pipeline de medios en producción, una API puede eliminar el trabajo operativo relacionado con las subidas, las colas, los reintentos, los archivos temporales y el escalado.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "converted": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "background": "none",
      "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 especialmente práctica 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.

Convertir WebP a PNG en línea

¿Necesitas una conversión rápida sin configurar una herramienta local? Convierte WebP a PNG con nuestra herramienta en línea gratuita y descarga el resultado en tu navegador. Es útil para archivos puntuales, mientras que el flujo de trabajo con la API descrito arriba es más adecuado para el procesamiento repetible en producción.

¿Qué método deberías elegir?

Usa el navegador para una utilidad puntual que respete 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 un procesamiento fiable importen tanto como la propia conversión de formato.

Sea cual sea 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.

Automatiza tus conversiones de imágenes

Si la conversión de WebP a PNG forma parte de un pipeline de subida o de medios, crea una cuenta gratuita de Transloadit para obtener una clave de API, guarda este flujo de trabajo como Template y procesa archivos de forma fiable con reintentos, integraciones de almacenamiento y notificaciones por webhook.

Preguntas frecuentes

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

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

¿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.

¿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 eso, en muchos casos es de esperar que el archivo de salida sea más grande.

¿Puedo convertir archivos WebP por lotes?

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