Fondo transparente: qué formatos lo admiten y cuándo usarlos (PNG, WebP, AVIF)

21 palabras1m lectura

Si quitas el fondo de una imagen, necesitas un formato con canal alfa para evitar halos y bordes serrados. Guía práctica para elegir entre PNG, WebP y…

1) La clave: canal alfa

Una imagen con fondo realmente transparente necesita canal alfa (por píxel). Sin alfa, el borde se "pre-mezcla" con un color fijo (matte) y al colocarla sobre otro fondo aparecen halos blancos/negros.

2) Formatos que sí admiten transparencia

  • PNG (lossless): transparencia perfecta y bordes nítidos. Ideal para UI, logos, iconos y capturas con texto. Pesa más en fotos.
  • WebP: soporta alfa en modos con pérdida y sin pérdida. Gran relación calidad/peso. Valida anti‑aliasing en bordes finos.
  • AVIF: compresión superior y soporte de alfa. Revisa degradados y transiciones suaves; la codificación puede ser más lenta.
  • SVG: vectorial, escalable y con transparencia por formas/atributos. Perfecto para logos y gráficos puros.

3) Formatos que no sirven

  • JPEG: sin alfa. Exportar con fondo blanco/negro causa fringing al superponerlo.
  • GIF: transparencia binaria (todo o nada). Borde dentado en diagonales. Evítalo salvo casos retro.

4) Evitar halos: matte y pre‑multiplicado

Si el recorte original tenía un fondo (p. ej., blanco) y lo exportaste como PNG con matte blanco, quedará un halo al ponerlo sobre oscuro. Asegúrate de exportar sin matte y con alfa real. Comprueba el borde sobre fondos claros y oscuros.

5) ¿PNG, WebP o AVIF?

  • UI/logos planos: PNG o WebP lossless (el que menos pese manteniendo nitidez).
  • Fotos recortadas: WebP/AVIF con alfa suelen dar el mejor equilibrio.
  • Vector: SVG siempre que sea posible.

6) Flujo recomendado con Orqui

  1. Quita el fondo (umbral + feather).
  2. Convierte a WebP/PNG según el caso.
  3. Optimiza ajustando calidad y compara.

7) Checklist de calidad

  • Sin halos sobre fondo claro y oscuro.
  • Dimensiones acordes al uso (no sobredimensionar).
  • Formato con alfa (PNG/WebP/AVIF) o SVG cuando aplique.
  • Peso razonable para la página (usa compresión).

Herramientas y artículos relacionados

Leer en otros idiomas

Preguntas frecuentes

  • ¿Por qué JPEG no vale para fondo transparente?
    JPEG no tiene canal alfa. Para simularlo se “funde” con un color de fondo (matte), lo que produce halos blancos/negros al superponer la imagen sobre otros colores.
  • ¿PNG o WebP para logos?
    PNG es seguro (lossless) y nítido. WebP lossless suele pesar menos con paletas simples. Comprueba bordes sobre fondos oscuros y claros.
  • ¿AVIF con transparencia es fiable?
    Sí, soporta alfa. Tiene compresión excelente, pero la codificación puede ser más lenta y hay casos con degradados delicados. Valida visualmente.
  • ¿SVG tiene transparencia?
    Sí, es vectorial y soporta transparencia por forma o fill/opacity. Ideal para logos e iconos escalables.

Cuenta de transformaciones que haces aquí (convertir, optimizar, redimensionar, recortar, quitar fondo). Todo ocurre de forma privada en tu navegador.