Cómo convertir WebP a PNG

Tim Koschützki

Cofundador · Berlín, Alemania · Mostrar bio

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:

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.

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.

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

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

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

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.

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.

El /image/resize Robot de Transloadit convierte un archivo WebP subido configurando format en png:

{
  "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.

Puedes probar el pipeline de WebP a PNG en la demo en vivo EN (English) antes de integrarlo.

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

Preguntas frecuentes

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

¿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 lo tanto, una salida más grande es esperable en muchos casos.

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