¿PNG o JPG? La regla de diez años que uso para decidir
Dov Azencot
@DovAzencotPNG y JPG llevan más de veinte años siendo las dos respuestas por defecto a «guarda esta imagen», y casi todo el mundo elige entre ellos por accidente: lo que viniera marcado en el cuadro de exportación. Eso funciona hasta el día en que le mandas a alguien una captura de 9 MB por correo, o publicas un logo con un feo halo gris alrededor, y de repente la elección importa.
La cosa es esta: la decisión es de verdad sencilla. Se reduce a una pregunta que llevo haciendo cosa de diez años, y ni una sola vez me ha fallado.
La única pregunta
¿Esta imagen está hecha de bordes, o hecha de luz?
Eso es todo. Texto, logos, iconos, capturas, diagramas, line art, cualquier cosa con límites duros y regiones planas de color: eso son bordes. Fotografías, degradados, cualquier cosa con tono continuo y suave y miles de cambios sutiles de color: eso es luz.
Los bordes quieren PNG. La luz quiere JPG. Casi todo se deduce de ahí.
Por qué los bordes quieren PNG
PNG es sin pérdida. Cada píxel que guardas vuelve exacto, para siempre, por muchas veces que lo reabras. Comprime encontrando tiradas de color idéntico, que es justo de lo que van llenas las imágenes basadas en bordes: un botón macizo, un fondo blanco, una línea negra. PNG se lo come sin despeinarse y se queda afiladísimo.
También tiene canal alfa, así que puede ser genuinamente transparente. Por eso todo logo que quieras dejar caer sobre un fondo de color debería ser PNG. JPG no tiene transparencia ninguna: rellena esas zonas de blanco, que es de donde sale el feo halo.
El modo en que falla son las fotografías. Guarda una foto como PNG y registra obedientemente cada mota de ruido del sensor y cada microdegradado a toda fidelidad, y el archivo se hincha. PNG no es un derroche por malo. Es un derroche porque es honesto con un detalle que tu ojo perdonaría de buena gana.
Por qué la luz quiere JPG
JPG es con pérdida. Tira información que a tu ojo le cuesta notar —variación fina de color, detalle de alta frecuencia— y lo hace notablemente bien con las fotografías. Que es justo lo que a una foto le sobra. El resultado es un archivo de una fracción del tamaño, y no ves lo que falta.
Ahora bien, apunta JPG a los bordes y se desmorona. Embadurna artefactos borrosos alrededor de los límites duros —alrededor del texto sobre todo— porque los bordes nítidos son precisamente el detalle de alta frecuencia que está diseñado para descartar. Una captura de código en JPG se ve algo sucia alrededor de cada letra. No es tu monitor. Es el formato funcionando como se diseñó sobre la entrada equivocada.
La tabla de tamaños que lo zanja
Las mismas dos imágenes de origen, guardadas de las dos maneras con ajustes sensatos:
| Imagen | Como PNG | Como JPG |
|---|---|---|
| Una fotografía — 12 MP | ~14 MB | ~3 MB |
| Una captura de interfaz con texto | ~600 KB | ~900 KB |
| Un logo plano a dos colores | ~20 KB | ~85 KB |
Léela en las dos direcciones. La foto es casi 5 veces más pequeña como JPG, sin pérdida visible. Pero la captura y el logo son más grandes como JPG, y encima se verían peor, con halos y borrones. El formato más pequeño cambia por completo según lo que haya en la imagen. Esa es toda la lección en tres filas.
Los casos límite (solo hay dos que merezca la pena conocer)
La transparencia obliga a PNG. Si alguna parte de la imagen tiene que ser transparente, JPG queda descartado sin importar el contenido, porque físicamente no puede guardar un canal alfa. Hasta una foto recortada sobre fondo transparente tiene que ser PNG (o WebP).
Texto sobre foto es cuestión de criterio. Una foto con un texto incrustado es parte luz, parte borde. Voy a JPG si es sobre todo foto y acepto un texto un poco blando, o a PNG si el texto tiene que quedar nítido y puedo permitirme el tamaño. No hay un ganador limpio; eliges qué defecto prefieres tener.
Cuando ya tienes el equivocado
La mayoría de las veces no eliges al exportar: te quedas con un archivo que alguien ya guardó mal. Un fotógrafo te pasó PNG de 14 MB. Un diseñador te mandó un logo como JPG con halo. Eso es una conversión sin más.
Ir en la dirección lista —PNG a JPG para una foto guardada demasiado pesada— es una victoria clara, y se ejecuta aquí mismo en tu navegador, así que el archivo nunca sale de tu dispositivo. Ir en la otra dirección —JPG a PNG— es honesto pero limitado: hace el archivo sin pérdida de aquí en adelante, que es lo que quieres antes de editar, pero no puede des-embadurnar los artefactos que el JPG ya cocinó. Con pérdida es una puerta de un solo sentido. Convertir a PNG no te hace volver a cruzarla; solo te frena para no perder nada más.
Hazte la única pregunta —bordes o luz— y acertarás básicamente siempre. Yo aún me la hago en cada exportación. Cuesta medio segundo y me ha librado de un montón de halos grises.
Artículos relacionados
Por qué paso de PNG a WebP (y la única vez que no)
PNG es un formato genial para editar y un derroche para publicar. Esto es lo que WebP te ahorra de verdad, dónde no te ahorra nada y la regla que nunca me salto.
Por qué tus fotos del iPhone son HEIC (y cuándo pasarlas a JPG)
HEIC es un formato de verdad mejor que media web todavía no sabe abrir. Esto es por qué Apple lo eligió, qué pierdes de verdad al pasar a JPG y cuándo no me molesto.
Cómo funciona de verdad la conversión de imágenes en el navegador (y por qué la construí así)
Que tus archivos nunca salgan de tu dispositivo es una arquitectura, no una frase de marketing. Esto es cómo WASM hace la conversión en tu propio navegador, y el único límite real que tiene.
Todos los artículos