WebP produce archivos 25 a 35 por ciento más pequeño que PNG para la misma imagen y mantiene el fondo transparente por el que PNG es famoso. Ese solo hecho explica por qué Google creó WebP y por qué la mayoría de los sitios web modernos ahora lo ofrecen. El contraargumento de PNG es su alcance: se abre en todos los programas jamás escritos, incluido el software que nunca ha oído hablar de WebP. Así que la elección no se trata de qué formato es técnicamente superior, porque WebP claramente lo es. Se trata de si está optimizando para un sitio web moderno o para garantizar la compatibilidad en todas partes. Esta guía compara los dos en profundidad en cuanto a compresión, transparencia, modos de calidad, compatibilidad con el navegador, animación y velocidad de la página, y luego le brinda una regla clara para elegir.

Qué es WebP y por qué lo creó Google

WebP es un formato de imagen que Google lanzó en 2010, basado en la tecnología de compresión de su códec de video VP8. El objetivo era contundente: hacer que las imágenes web fueran más pequeñas para que las páginas se cargaran más rápido. Google tenía los datos para saber que las imágenes dominan el peso de la página y que reducir un tercio de cada imagen aceleraría considerablemente la web. WebP fue diseñado desde el principio para reemplazar tres formatos a la vez, coincidiendo Transparencia de PNG, compresión fotográfica de JPG y animación de GIF en un solo contenedor. Esa ambición es la razón por la que puede hacer cosas que PNG no puede.

Qué es PNG y por qué perdura

PNG llegó en 1996 como un reemplazo sin patente para GIF, utilizando compresión DEFLATE sin pérdidas y agregando un canal alfa completo. Se convirtió en el estándar para logotipos, íconos, capturas de pantalla y cualquier gráfico que necesite un fondo transparente. Casi tres décadas de apoyo universal son su foso. Todos los navegadores, sistemas operativos, clientes de correo electrónico, paquetes ofimáticos y editores de imágenes leen PNG sin necesidad de configuración. Cuando es absolutamente necesario abrir una imagen en algún lugar desconocido, PNG es el formato que nunca falla.

Tamaño del archivo: WebP gana claramente

WebP comprime mejor que PNG en prácticamente todos los escenarios. Para un logotipo típico o un gráfico de interfaz de usuario con transparencia, espere un Reducción del 25 al 35 por ciento pasar de PNG a WebP sin pérdidas. Si ingresa al modo con pérdidas de WebP, el ahorro aumentará dramáticamente, a menudo entre un 60 y un 70 por ciento, mientras se mantiene el canal alfa. PNG no tiene ninguna opción con pérdidas, por lo que no puede competir en el extremo inferior. En un sitio con docenas de recursos de imágenes, esa diferencia se traduce en cientos de kilobytes por carga de página.

La brecha proviene de una compresión más inteligente. El algoritmo DEFLATE de PNG es un método de propósito general tomado de ZIP, bueno para encontrar repeticiones literales. WebP utiliza codificación predictiva creada específicamente para imágenes, adivinando cada bloque de sus vecinos y almacenando solo la diferencia. Ese enfoque consciente de la imagen encuentra ahorros que DEFLATE no puede ver, razón por la cual un formato de 2010 supera a uno de 1996 de manera tan consistente.

Transparencia: ambos la tienen, WebP hace más

A diferencia de JPG, ambos formatos tienen un canal alfa completo, por lo que el logotipo permanece transparente en cualquiera de ellos. Pero WebP agrega algo que PNG no puede igualar: transparencia en modo con pérdida. La transparencia de PNG solo viene con compresión sin pérdidas, por lo que un gráfico semitransparente debe almacenarse con todo su peso sin pérdidas. WebP te permite tener un fondo transparente y una compresión agresiva al mismo tiempo, que es exactamente lo que necesita un logotipo PNG pesado. Para los activos de interfaz de usuario y recortes de productos que deben permanecer transparentes y pesar menos, esta combinación es el argumento más fuerte de WebP.

Calidad: modos sin pérdidas y con pérdidas

WebP ofrece ambos modos, lo que lo hace flexible de una manera que PNG no lo es:

WebP sin pérdidas coincide exactamente con PNG, píxel por píxel, mientras produce un archivo más pequeño. No hay compensación por la calidad, sólo una ganancia en tamaño.
WebP con pérdidas descarta detalles como lo hace JPG, reduciendo los archivos mucho más y, a diferencia de JPG, aún puede mantener la transparencia.

PNG solo ofrece archivos sin pérdidas, por lo que sigue siendo grande. Si necesita una copia perfecta, WebP sin pérdidas se la ofrece en tamaño más pequeño. Si puede aceptar pérdidas invisibles, WebP con pérdidas le dará una fracción del tamaño. De cualquier manera, existe una configuración WebP que supera al PNG.

Soporte de navegador y software

Esta es la única ventaja real de PNG y se está reduciendo. Todos los navegadores modernos son compatibles con WebP, incluidos Chrome, Firefox, Safari y Edge, por lo que en la web abierta la cuestión de la compatibilidad está esencialmente resuelta. Las brechas se encuentran en otros lugares: algunos software de escritorio más antiguos, ciertos clientes de correo electrónico, versiones anteriores de Office y plataformas heredadas aún rechazan WebP. Cargar formularios es la otra trampa, ya que muchos aceptan sólo JPG y PNG y rechazarán de plano un archivo WebP.

Entonces, el resumen honesto es que WebP es seguro para su sitio web y riesgoso para los archivos que entrega a sistemas desconocidos. PNG sigue siendo el recurso universal para cualquier cosa que escape a su control.

Animación: WebP también reemplaza al GIF

Una capacidad de la que PNG simplemente carece es la animación. El PNG estándar contiene un solo fotograma y, aunque existe la extensión APNG, la compatibilidad siempre ha sido inconsistente. Soportes WebP animación de forma nativa con alfa completo, produciendo archivos mucho más pequeños que el GIF equivalente y mostrando millones de colores en lugar de los 256 del GIF. Si elige entre formatos para un gráfico de bucle corto, WebP supera decisivamente a PNG y GIF.

Por qué WebP acelera los sitios web

El peso de la página se introduce directamente en Pintura con contenido más grande, uno de los Core Web Vitals de Google y una señal de clasificación confirmada. Las imágenes suelen ser lo más pesado de una página, por lo que recortar cada una en un tercio tiene un efecto mensurable en el tiempo de carga, en la puntuación LCP y en la tasa de rebote. Las páginas más rápidas también generan mejores conversiones, por lo que el trabajo de rendimiento se paga dos veces.

El patrón práctico que utilizan la mayoría de los sitios es progresivo: servir WebP a los navegadores que lo admiten y recurrir a PNG o JPG para el resto. El HTML moderno maneja esto automáticamente con el elemento de imagen, y la mayoría de los sistemas de administración de contenido y servicios de imágenes lo hacen por usted. Obtienes la ganancia de velocidad sin romper nada para los clientes mayores.

Cuándo utilizar cada formato

uso WebP para imágenes de sitios web, especialmente logotipos e íconos con transparencia, donde archivos más pequeños significan páginas más rápidas.
uso WebP cuando necesitas transparencia más tamaño pequeño, ya que es el único formato común que ofrece ambos.
uso PNG cuando la imagen debe abrirse en cualquier programa, incluido el software antiguo y los clientes de correo electrónico.
uso PNG para cargar formularios y sistemas que enumeran explícitamente los formatos aceptados y omiten WebP.
uso PNG como su maestro de archivos, ya que el soporte universal es más importante que el tamaño de un archivo que conservará para siempre.

Cómo convertir PNG a WebP

La conversión no requiere instalación. Abre nuestro convertidor, agregue su PNG y elija la opción que mantiene la transparencia, que exporta WebP. El procesamiento se ejecuta localmente a través de la API HTML5 Canvas, por lo que no se carga nada y puedes agrupar varios archivos a la vez. El fondo transparente permanece intacto mientras el archivo se vuelve significativamente más claro. El tutorial completo está en el Guía de PNG a WebP.

¿Qué pasa con AVIF?

Vale la pena saberlo para el contexto: AVIF es un formato más nuevo que se comprime incluso mejor que WebP, a menudo otro 20 por ciento más pequeño, y también admite transparencia y animación. La compatibilidad con el navegador ahora es buena, pero ligeramente por detrás de WebP, y la compatibilidad con el software está aún más atrás. Para la mayoría de los sitios actuales, WebP es la opción pragmática con el mejor equilibrio entre ahorro y soporte, y vale la pena observar AVIF a medida que crece la adopción. PNG sigue siendo el recurso alternativo para ambos.

el veredicto

WebP gana en términos técnicos de manera integral: archivos más pequeños, transparencia tanto en modo sin pérdida como con pérdida, animación y soporte completo para navegadores modernos. PNG gana en una cosa que todavía importa: la apertura absolutamente en todas partes sin lugar a dudas. Utilice WebP para su sitio web y PNG para cualquier cosa que envíe a lo desconocido, y sirva WebP con un PNG alternativo cuando desee ambos. Para la imagen de formato más amplio, el Guía PNG vs JPG portadas donde encajan las fotografías.

Ejemplos de tamaños del mundo real

Los porcentajes abstractos ayudan menos que los números reales, así que así es como se ve la brecha en los activos típicos:

un Logotipo de 500 por 500 píxeles con transparencia: alrededor de 45 KB como PNG-24, alrededor de 30 KB como WebP sin pérdidas y menos de 12 KB como WebP con pérdidas con el canal alfa intacto.
un gráfico de héroe de ancho completo con sombras suaves: a menudo 400 KB o más como PNG, aproximadamente 260 KB como WebP sin pérdidas y mucho menos de 100 KB como WebP con pérdidas.
un conjunto de iconos de interfaz de usuario de veinte gráficos pequeños: el conjunto completo puede reducirse de unos 200 KB a 130 KB sin pérdidas, antes de cualquier ajuste con pérdidas.

Multiplique el ejemplo del héroe en una docena de páginas y el ahorro se convertirá en segundos de tiempo de carga en una conexión lenta, que es exactamente el tipo de diferencia que mide Core Web Vitals.

Convertir una biblioteca PNG existente

La mayoría de los sitios no comienzan desde cero; ya tienen cientos de PNG implementados. Tres enfoques funcionan, dependiendo de su configuración. Si su sitio se ejecuta en un marco o CMS moderno, la canalización de imágenes probablemente convierte y sirve WebP automáticamente, por lo que cambia una configuración en lugar de archivos. Si utiliza un CDN o un servicio de imágenes, la mayoría ofrece negociación automática de formato, entregando WebP a los navegadores que lo aceptan y PNG a los que no, desde el mismo archivo fuente. Y si administra archivos a mano, convertir los activos por lotes y actualizar las referencias funciona, aunque es lo que requiere más trabajo.

Cualquiera que sea la ruta que tomes, conserva los PNG originales. Son sus maestros y es posible que los necesite para un sistema que rechace WebP más adelante.

Errores comunes de WebP que se deben evitar

Algunas trampas atrapan a las personas que se pasan a WebP:

Convirtiendo sus maestros de archivo: convierta copias para su entrega y conserve los originales PNG, ya que la compatibilidad con WebP es más limitada en el software de escritorio.
Uso de WebP con pérdida en gráficos de texto: la compresión con pérdida difumina las letras nítidas tal como lo hace JPG. Utilice WebP sin pérdidas para capturas de pantalla e imágenes con mucho texto.
Saltarse la alternativa: Servir WebP sin alternativa PNG o JPG rompe la imagen para clientes más antiguos y algunos contextos de correo electrónico.
Envío de WebP para cargar formularios: muchos aceptan sólo JPG y PNG y rechazarán el archivo de plano.

Ninguna de estas son razones para evitar WebP. Son razones para usarlo donde corresponde, que es la entrega a los navegadores modernos, manteniendo PNG para los archivos maestros y para cualquier cosa que escape a su control.

Cómo los navegadores eligen realmente el formato

Servir dos formatos suena complicado, pero el mecanismo es simple y automático. Cada navegador envía un encabezado Aceptar con cada solicitud de imagen, enumerando los formatos que comprende. Un servidor o CDN lee ese encabezado y devuelve WebP a un navegador que anuncia soporte, o el PNG a uno que no lo hace, desde la misma URL. En HTML, puede hacer lo mismo explícitamente con el elemento de imagen, enumerando primero una fuente WebP y luego una alternativa PNG; el navegador elige el primero que puede leer e ignora el resto. De cualquier manera, ningún visitante ve nunca una imagen rota, y los navegadores modernos obtienen silenciosamente el archivo más pequeño, mientras que los más antiguos obtienen el compatible.

Preguntas frecuentes

¿Es WebP mejor que PNG?

Técnicamente sí. Los archivos WebP son entre un 25 y un 35 por ciento más pequeños, mantenga la transparencia y agregue modos de animación y con pérdida de los que PNG carece. PNG gana sólo en compatibilidad universal.

¿WebP admite transparencias como PNG?

Sí, y más. WebP mantiene un canal alfa tanto en modo sin pérdidas como con pérdidas, mientras que PNG sólo ofrece transparencia con compresión sin pérdidas.

¿Cuánto más pequeño es WebP que PNG?

normalmente Entre un 25 y un 35 por ciento más pequeño sin pérdidasy entre un 60 y un 70 por ciento más pequeño en modo con pérdida sin dejar de mantener la transparencia.

¿Todos los navegadores son compatibles con WebP?

Todos los navegadores modernos son compatibles con WebP, incluidos Chrome, Firefox, Safari y Edge. Algunos software de escritorio y formularios de carga antiguos todavía lo rechazan.

¿Qué formatos admiten transparencia y animación?

WebP hace ambas cosas. PNG tiene transparencia pero no animación confiable, y GIF anima pero está limitado a 256 colores con transparencia burda.

¿WebP o PNG son mejores para un sitio web?

WebP, para velocidad. Los archivos más pequeños mejoran la pintura con contenido más grande, una señal de clasificación de Core Web Vitals. Ofrece un respaldo PNG para clientes más antiguos.

¿Debo usar WebP o AVIF?

WebP, por ahora. AVIF se comprime aproximadamente un 20 por ciento mejor pero tiene un soporte más estrecho, por lo que WebP es hoy el equilibrio pragmático entre ahorro y compatibilidad.

¿Puedo cargar un archivo WebP a un formulario?

Muchas veces no. Muchos formularios de carga solo aceptan JPG y PNG, así que convierta a uno de esos cuando un sistema enumere sus formatos aceptados y omita WebP.

¿Debo convertir mis archivos PNG existentes a WebP?

Convierta copias para su entrega, no sus masters. Mantenga los PNG originales, ya que la compatibilidad con WebP es más limitada en software de escritorio y formularios de carga.

¿WebP con pérdida es bueno para capturas de pantalla con texto?

No. La compresión con pérdida mancha las letras nítidas, exactamente como lo hace JPG. Utilice WebP sin pérdidas para capturas de pantalla y gráficos con mucho texto.

¿Aún necesito un respaldo PNG con WebP?

Para máxima seguridad, sí. Todos los navegadores modernos leen WebP, pero el software de escritorio más antiguo, algunos clientes de correo electrónico y muchos formularios de carga aún no lo hacen.

¿Cómo sabe un navegador si debe cargar WebP o PNG?

A través del Aceptar el encabezado que envía con cada solicitud., que enumera los formatos admitidos. Los servidores y CDN lo leen y devuelven WebP o el respaldo PNG automáticamente.