← Volver al conversor

¿WebP, PNG o JPG?

WebP vs PNG vs JPG: Diferencias, Peso y Transparencia
Tarjetas WebP, PNG y JPG comparan fondos transparentes y opacos.Ilustración conceptual original. Explica el proceso; no es un resultado medido de conversión.

El formato adecuado depende del uso de la imagen. Empieza por la transparencia, el detalle y la aplicación que la abrirá.

FormatoTransparenciaCompresiónÚtil para
WebPSíCon o sin pérdidas; esta herramienta exporta color con pérdidasImágenes web en aplicaciones compatibles
PNGSíSin pérdidasLogotipos, capturas, gráficos transparentes
JPG / JPEGNoCon pérdidasFotografías, amplia compatibilidad

Un ejemplo real con canal alfa

Compara WebP, PNG y JPG: transparencia, compresión, calidad y compatibilidad. Revisa ejemplos reales de tamaño y elige el formato adecuado para tus imágenes.
Ilustración original creada para este proyecto. Copia WebP sin pérdidas para mostrar; los ejemplos descargables conservan sus formatos reales. 480 × 320 px.

El PNG pesa 8996 B; WebP (calidad 82) 4222 B; JPG (calidad 82, fondo blanco) 6886 B. Son archivos reales creados con Sharp/libvips para esta ilustración, no una predicción para tus archivos. Los codificadores del navegador generan bytes diferentes.

PNG · WebP · JPG

Un formato nuevo no crea detalles nuevos

Guardar un JPEG como PNG conserva los píxeles decodificados, incluidos los defectos del JPEG. No recupera los datos originales de la cámara ni hace transparente el fondo. Usa PNG cuando necesites un contenedor compatible sin pérdidas.

Convertir JPG a PNG · Convertir PNG a JPG · Convertir PNG a WebP

Color, animación y compatibilidad

Estas herramientas solo aceptan imágenes fijas. Se rechazan WebP animados y APNG. Se utiliza sRGB cuando es compatible; no se conservan perfiles ICC originales, HDR ni precisión de 16 bits. Comprueba la aplicación de destino antes de elegir WebP.

Referencia: formatos de imagen en MDN

Una guía para la práctica

Una guía de decisión para usos reales

Los formatos describen capacidades; el original, los ajustes y el destino determinan el resultado útil. Usa este proceso para elegir con un criterio comprobable.

7 secciones4 min de lecturaActualizado

Capas de helecho sobre fondos cuadriculado, claro y oscuro ilustran alfa y opacidad.
Capas de helecho sobre fondos cuadriculado, claro y oscuro ilustran alfa y opacidad.Ilustración conceptual original. Explica el proceso; no es un resultado medido de conversión.
En esta guía +

Elige en este orden: destino, transparencia, detalle y bytes

Primero comprueba qué formatos acepta la aplicación. Después decide si necesitas píxeles transparentes. Luego valora cuánto cambio visible tolera el contenido. Compara pesos solo entre opciones que cumplan esas condiciones. El archivo más pequeño no ayuda si no se puede utilizar.

Un producto recortado puede necesitar alfa; una captura, texto nítido; una fotografía opaca, una entrega compacta. Son decisiones distintas aunque tengan las mismas dimensiones. Conserva el original y crea exportaciones según el uso, en lugar de declarar un formato mejor para todo.

  1. El destino acepta el formato → el archivo puede entrar en el proceso.
  2. Se necesita alfa → conserva un formato y una exportación que mantengan transparencia.
  3. Importa el detalle fino → compara las salidas reales al tamaño de uso.
  4. El límite de bytes es estricto → verifica el archivo, no un porcentaje previsto.

Transparencia: qué significa el fondo cuadriculado

La transparencia es información asociada a los píxeles, no un fondo blanco que el conversor pueda reconocer y borrar. Un logotipo transparente puede colocarse sobre una presentación, una tarjeta de producto o una web oscura sin llevar un rectángulo de fondo. Un píxel blanco opaco sigue siendo blanco después de convertir.

La vista previa usa un patrón cuadriculado para mostrar las zonas vacías y semitransparentes. El patrón pertenece a la interfaz y no se añade al archivo descargado. Después de descargar, coloca el resultado sobre un fondo claro y otro oscuro. Así verás halos, fondos incorporados y bordes que una vista blanca puede ocultar.

Canal alfa → controla la opacidad del píxel → deja ver el fondo que hay debajo.

Referencia: W3C: PNG specification

Cómo comparar formatos sin mezclar variables

Usa el mismo original y las mismas dimensiones visibles. Comparar una miniatura de 600 px con una imagen de 2400 px no aísla el formato. Anota codificador y calidad; compara aspecto y bytes. El mismo número de calidad en dos codificadores no demuestra una calidad visual equivalente.

Incluye contenido exigente: texto pequeño en diagramas, degradados en ilustraciones y pelo o textura en fotos. Si importa la transparencia, usa el mismo fondo al revisar. Anota qué ejemplo cumple tus requisitos; no conviertas un resultado de una imagen sencilla en una promesa universal de ahorro.

Referencia: MDN: Canvas toBlob()

Conserva un maestro y crea una copia de entrega

El maestro es la fuente que conservas para editar y exportar. La copia de entrega se adapta a un destino. Un maestro PNG puede generar WebP para una web y JPG opaco para un formulario. No necesitas sustituir el original. Organiza por uso para empezar futuros cambios desde la mejor fuente disponible.

Evita cadenas como JPG → WebP → JPG para revisiones si tienes el original. Ambas entregas pueden tener pérdidas. Un PNG final evita más pérdidas en los píxeles de trabajo, pero no revierte daños previos. Si importan perfiles exactos o metadatos de archivo, el lienzo del navegador no sustituye un flujo especializado.

Dimensiones, orientación y tamaño de la vista previa

Cambiar el formato no redimensiona ni recorta la imagen. Una foto horizontal de 2400 × 1600 mantiene ese tamaño en píxeles. Una etiqueta de orientación puede exigir una rotación o un reflejo; al orientar una foto vertical, la anchura y la altura pueden intercambiarse. Es una corrección de orientación, no una reducción de resolución.

La vista previa se adapta al espacio disponible y puede usar una copia de visualización más pequeña. Comprueba las dimensiones en el archivo descargado, no por su tamaño en pantalla. Para imprimir, revisa también el tamaño físico y la resolución en tu aplicación de diseño; convertir el formato no prepara por sí solo una especificación de impresión.

EXIF, GPS, perfiles de color y lo que no se conserva

El resultado es una imagen codificada de nuevo. No se copian los registros EXIF, GPS ni XMP originales; el codificador puede añadir sus propios campos técnicos. La orientación se aplica a la imagen, sin depender de la etiqueta original en la descarga. Conserva el original si necesitas ajustes de cámara, fechas o un registro de archivo.

Los píxeles de trabajo usan un lienzo sRGB cuando hay soporte. No se conservan perfiles ICC exactos, HDR ni precisión de 16 bits. Una apariencia similar en pantalla no demuestra que los datos de color sean idénticos. Para impresión calibrada, mediciones científicas o conservación de originales de alta profundidad, utiliza un flujo preparado para ello.

Una revisión práctica antes de usar el resultado

Una descarga correcta es el inicio de la revisión final. Abre el resultado en la aplicación que lo utilizará. Un editor de presentaciones, un formulario y un visor pueden tratar de forma distinta el mismo archivo. Revisar el destino previsto detecta problemas que la vista previa no puede mostrar.

  1. Confirma la extensión y que la aplicación abre la imagen sin errores.
  2. Revisa anchura, altura y orientación visible; compáralas con el original.
  3. Revisa texto pequeño, diagonales, pelo, sombras y degradados al 100 %.
  4. Coloca los gráficos transparentes sobre un fondo claro y otro oscuro.
  5. Compara el peso real con el límite de la aplicación antes de enviarlo.
  6. Conserva los originales hasta revisar todos los archivos descargados.