PNG frente a JPG frente a WebP: ¿qué formato deberías usar de verdad?

Hay tres formatos de imagen que importan para casi todo lo que publicas, y elegir el equivocado es la diferencia entre una foto de 40 KB y otra de 3 MB. También es lo más fácil de arreglar en una página lenta.

Aquí va la comparación honesta, incluido el caso en el que la respuesta "correcta" no es obvia.

Los tres, en una línea cada uno

JPG - con pérdidas, sin transparencia, archivos pequeños. El formato de las fotos. PNG - sin pérdidas, con transparencia, archivos grandes. El formato de los gráficos y las capturas. WebP - con pérdidas o sin pérdidas, con transparencia, más pequeño que ambos. El formato de la web.

Ese es el argumento entero, y explica casi todas las decisiones. Lo que viene es el detalle que de verdad muerde.

JPG: para fotos, y para nada más

Un JPG (JPEG) es un formato con pérdidas. Al guardar, mira la imagen y descarta el detalle que el ojo no nota bien - textura fina, degradados sutiles, ruido de alta frecuencia - y lo sustituye por una aproximación matemática. Por eso un JPG es pequeño, y por eso se dice que tiene pérdidas: los píxeles que recuperas no son los que metiste.

Eso convierte al JPG en el formato correcto para las fotografías y en el formato incorrecto para casi todo lo demás.

Una fotografía tiene tono continuo y detalle suave, que es justo lo que el algoritmo sabe descartar. Un logotipo, un gráfico, una captura de texto tiene bordes nítidos y zonas planas, y un códec con pérdidas difumina exactamente eso. El resultado son halos alrededor de los bordes y degradados moteados donde debería haber color plano.

La regla es más antigua que estos tres formatos y sigue siendo cierta: si es una foto, usa JPG; si es cualquier otra cosa, no.

Un dato más sobre JPG que conviene saber: JPG no tiene transparencia. En cuanto necesitas que un fondo desaparezca, JPG se queda fuera. Esa única limitación es la razón por la que el PNG tomó la web y la razón por la que luego WebP sustituyó al PNG.

PNG: para gráficos, y entiende lo que cuesta

Un PNG es sin pérdidas. Guarda los píxeles exactos, comprimidos con un esquema reversible: lo descomprimes y recuperas el original bit a bit. Por eso es el formato correcto para una captura de pantalla, un icono, un diagrama, un logotipo y cualquier cosa con texto. Los bordes se quedan nítidos y las zonas planas se quedan planas.

Y esa exactitud es lo que hace que los archivos PNG sean tan grandes. Una fotografía de un atardecer guardada sin pérdidas es enorme: la compresión solo puede explotar la repetición, y una fotografía tiene muy poca. Una foto en PNG pesa de forma rutinaria entre 5 y 10 veces más que la misma foto en JPG.

Que es exactamente lo que la gente hace mal: guarda una fotografía como PNG porque "se ve mejor", y luego se pregunta por qué la página va lenta. Sí, se ve mejor: es idéntica bit a bit al original. También pesa cinco veces más por una diferencia que nadie nota en una foto.

El PNG es el formato correcto cuando la imagen tiene:

• Bordes nítidos (una captura, un diagrama, un logotipo)
• Zonas planas de color
• Texto
• Transparencia
• Necesidad de colores exactos (un color de marca, una entrega de diseño)

WebP: el que gana en la web

WebP es un formato moderno y le gana a los otros dos en los ejes que importan.

Es más pequeño. Con la misma calidad percibida, un WebP suele ser entre un 25% y un 35% más pequeño que el JPG equivalente. También es bastante más pequeño que un PNG, porque puede ser con pérdidas, y todo esto con transparencia.

Es con pérdidas o sin pérdidas. Esa es la parte que se le pasa a la gente. WebP no es solo "el que tiene pérdidas". Tiene un modo realmente sin pérdidas, así que un logotipo o un diagrama pueden ir a WebP y seguir siendo perfectos píxel a píxel. Es un único formato que cubre los dos casos de uso del PNG, y por eso el PNG hoy es sobre todo un formato heredado y de intercambio.

Todos los navegadores actuales lo muestran. Chrome, Firefox, Safari, Edge y los navegadores móviles lo manejan, y lo hacen desde hace años. Para una web en marcha desde 2020, WebP es seguro en todas partes.

Las excepciones que conviene saber:

• Correo. Mucha gente de correo todavía se niega a mostrar WebP, y la imagen llega como un icono roto. Si la imagen va en un email, manda un JPG.
• Software de diseño e imprenta. Las aplicaciones de Adobe y los flujos de impresión siguen queriendo TIFF, PSD o PNG.
• Safari muy antiguo en un dispositivo antiguo. Lo bastante lejano en el pasado como para que no importe.

Una tabla que decide de verdad

La regla sobre el formato original

Un hábito que deja fácil toda la decisión: guarda siempre el original.

Convierte un PNG a WebP para la web, pero conserva el PNG. Convierte un JPG a WebP, pero conserva el JPG. Si algún día necesitas un recorte que solo funciona a resolución completa, o una tirada de imprenta, o un formato que una aplicación exige a la fuerza, el original está ahí.

Convertir un JPG a PNG y luego volver atrás es la misma idea al revés, y no recupera nada. Un JPG ya descartó el detalle; promoverlo a PNG solo guarda la versión con pérdidas en un archivo más grande.

Lo único que hay que comprobar antes de cambiar

Mira el resultado al 100%. Una conversión no es sin pérdidas, y la diferencia entre un WebP bien elegido y uno mal elegido es invisible en una miniatura y evidente en una pantalla grande.

Si conviertes una fotografía a WebP, mantén alto el ajuste de calidad y mira el resultado a tamaño completo. El modelo perceptual de WebP es lo bastante bueno como para que normalmente no veas ninguna diferencia, y cuando la ves, el ajuste está ahí para arreglarlo.

Una lista corta

• ¿Foto para la web? WebP. Entre un 25% y un 35% más pequeño que el JPG con el mismo aspecto.
• ¿Gráficos, texto o transparencia? WebP también: tiene un modo sin pérdidas, así que el PNG ya no es la única opción.
• ¿Correo? JPG. Los clientes de correo todavía bloquean WebP.
• ¿Imprenta o entregarle un archivo a un diseñador? JPG o PNG, y guarda el original sin pérdidas.
• Nunca guardes una fotografía como PNG. Es el error de tamaño más habitual de la web.
• Guarda el original junto a cada archivo convertido.
• Mira el resultado a tamaño completo antes de publicarlo.
• Conviértelo tú mismo. El convertidor de imágenes y el convertidor de WebP lo hacen en tu navegador, así que el archivo nunca sale de tu dispositivo.