Convertir entre PNG y JPG sin perder lo que importa

Este no es un artículo sobre elección de formato

Qué formato debe tener una imagen es otra pregunta, que resuelven su carácter fotográfico o de tintas planas y su necesidad de transparencia; la tratamos en otro sitio. Este artículo trata de lo que cuesta la conversión en sí una vez tomada la decisión — y los dos sentidos entre PNG y JPG tienen cada uno un fallo concreto que nada tiene que ver con cuál era el formato correcto.

Los dos fallos son opuestos, y por eso conviene aprenderlos juntos. PNG a JPG pierde algo que el archivo tenía y no te lo dice. JPG a PNG no pierde nada, y precisamente por eso es tan a menudo lo que no hay que hacer.

PNG a JPG: el conversor elige tu color de fondo

El JPEG almacena tres canales y ningún cuarto. El formato no tiene dónde registrar que un píxel es transparente, así que el conversor tiene que decidir en qué color se convierte ese píxel — y cada conversor decide distinto, sin preguntar. Lo probamos con un logotipo de 600 × 400 renderizado sobre transparencia: 203 445 de sus 240 000 píxeles son totalmente transparentes, 34 333 totalmente opacos y 2 222 están entre medias, en los bordes suavizados de las formas.

Dos conversores, mismo archivo, mismo formato de destino, respuestas opuestas. La cadena de imagen del sistema de Apple produjo blanco: el 95,31 % de los píxeles originalmente transparentes salieron exactamente en 255,255,255, siendo el resto halo JPEG cerca de los bordes. Un lienzo de navegador — el mecanismo tras muchísimos conversores en línea — produjo negro: el 94,82 % salió exactamente en 0,0,0. Ninguno ofreció elección, y la diferencia es invisible en la vista previa de un explorador de archivos, porque esa vista suele estar sobre un fondo claro donde la versión blanca parece perfecta y la negra parece una decisión de diseño.

El tamaño del error se cifra fácil. Compusimos el original correctamente sobre blanco — lo que un diseñador habría querido — y comparamos. El JPEG aplanado sobre negro difiere de ese resultado correcto en 217,60 niveles de media en todo el encuadre, porque el 84,77 % del encuadre es ahora un rectángulo negro en vez de nada. La versión aplanada sobre blanco difiere en 0,32 niveles: en lo esencial, correcta sobre una página blanca. En una página oscura las dos intercambian papeles. La cuestión no es que el blanco sea lo correcto; es que el conversor tomó una decisión sobre tu diseño y no lo mencionó.

El ribete es peor que el rectángulo

Una caja negra o blanca alrededor de un logotipo es al menos evidente. El daño que llega a producción está en los bordes. Esos 2 222 píxeles parcialmente transparentes son el suavizado que hace que curvas y tipografía se vean lisas, y cada uno de ellos es una mezcla aún sin resolver. Cuando el conversor aplana sobre el color equivocado, se mezclan hacia ese color en vez de hacia el de tu página.

Un píxel de nuestra prueba lo muestra exactamente. En las coordenadas 244,59 el origen guarda el color 28,76,217 — un azul intenso — con un alfa de 120, es decir un 47 % de cobertura del píxel. Compuesto sobre blanco, como estaba previsto, debería valer 148,171,237: un azul pálido y suave que alisa la curva. En el JPEG aplanado sobre negro vale 16,39,89: casi negro. En el conjunto de los 2 222 píxeles de ribete, el error medio frente a la composición correcta es de 141,04 niveles, frente a 6,54 de la versión aplanada sobre blanco. Pon ese logotipo en una página blanca: no solo queda encajonado, queda perfilado por un halo oscuro que ningún redimensionado ni reexportación quitará, porque ya es el propio dato de píxel.

JPG a PNG: sin pérdida, y por tanto inútil

Es probablemente la conversión inútil más frecuente de la web, y viene de una intuición de apariencia razonable: el PNG es el formato sin pérdida, así que poner la imagen en PNG debería protegerla. Y lo hace — de toda pérdida futura. No hace nada con la pérdida ya ocurrida, porque esa pérdida no está guardada aparte. Los píxeles cuantizados, en bloques y con halo del JPEG son ahora la imagen, y el trabajo del PNG es reproducir exactamente lo que se le da.

Lo medimos sobre un archivo real. La foto de 1600 × 900 en calidad 75 pesa 314 890 bytes. Convertida a PNG pesa 1 501 885 bytes — 4,76 veces más. Confirmamos que ambas son idénticas decodificándolas a mapas de bits en bruto: 4 320 054 bytes cada una, y el mismo hash SHA-256. Ni un píxel mejoró; el archivo simplemente pesa cinco veces más al servirlo.

La razón empeora a medida que empeora el JPEG, y esa es la parte contraintuitiva. En calidad 90 la misma foto pesa 426 601 bytes y su PNG 1 587 574 — una penalización de 3,72 ×. En calidad 30 el JPEG son solo 92 816 bytes, pero el PNG sigue siendo 1 061 895 — una penalización de 11,44 ×. El motivo: el PNG comprime prediciendo cada píxel a partir de sus vecinos, y un JPEG muy comprimido está lleno de bordes de bloques de 8 × 8 y de halos que ningún predictor anticipa. Estás pagando un millón de bytes por guardar artefactos con precisión. Si una plataforma exige PNG, dale PNG; si no, esta conversión es una factura sin nada al otro lado.

El detalle que hace al JPEG inadecuado para el texto de color

El JPEG no codifica rojo, verde y azul. Convierte a un canal de brillo y dos canales de diferencia de color, y luego — por defecto — guarda los canales de color a media resolución horizontal y vertical. Eso es el submuestreo de croma, un buen canje en una foto, donde el color cambia despacio. Es un mal canje allí donde el color cambia en un borde duro, que es exactamente lo que es el texto de color.

Renderizamos una plancha de prueba de 1000 × 360 con tres bandas de la misma frase sobre blanco: negro neutro, rojo saturado, azul saturado. En calidad 75 el error medio de la banda negra es de 0,365 niveles por píxel con un error de croma exactamente nulo, porque el texto gris no tiene color que perder. El error de la banda roja es 1,265 con una componente de croma de 0,862. El de la banda azul es 2,362 con una componente de croma de 1,783 — seis veces y media el error total de la banda negra, en el mismo archivo, con el mismo ajuste y la misma tipografía. Contando solo los píxeles que eran blanco puro en el origen, el 6,8 % quedó contaminado en la banda negra, el 19,1 % en la roja y el 36,1 % en la azul.

Lo que sorprende es que subir la calidad apenas ayuda. Leímos los factores de muestreo directamente de los archivos: en calidad 75 y en calidad 90 nuestro codificador escribe la misma disposición submuestreada, y solo en calidad 100 pasa a color a plena resolución. Así que ir de 75 a 90 hizo crecer el archivo de 80 122 a 98 578 bytes y mejoró la banda azul de 2,362 a 2,116 — un 23 % más de bytes para un 10 % mejor. La calidad 100 por fin lo arregla, llevando la banda azul a 0,143, con 213 085 bytes. El PNG de la misma página pesa 57 854 bytes y es exacto. Cuando la imagen es texto de color, el deslizador de calidad no es el control que buscas; lo es el formato.

Preguntas frecuentes

¿Por qué mi logotipo salió con un recuadro blanco?

Porque convertiste un PNG con transparencia a JPG, y el JPEG no tiene canal alfa, así que el conversor compuso la zona transparente sobre un color de fondo elegido por él. El nuestro eligió blanco con una herramienta y negro con otra, sobre el archivo idéntico. La solución es aplanar tú el dibujo sobre el color de la página en la que irá antes de convertir — o conservar el PNG, si la transparencia es lo esencial.

¿Convertir un JPG a PNG mejora la calidad?

No puede. Convertimos un JPEG de calidad 75 a PNG y decodificamos ambos a mapas de bits en bruto: idénticos byte a byte, mismo hash SHA-256. Lo único que cambió fue el tamaño, de 314 890 a 1 501 885 bytes. La conversión es realmente sin pérdida, y ese es el punto — sin pérdida significa que copia lo que se le dio, incluidos todos los bordes de bloque y todos los halos que el JPEG ya contenía.

¿Cuándo es realmente acertado convertir JPG a PNG?

Cuando la razón tiene que ver con el paso siguiente y no con la imagen. Un intermedio sin pérdida mientras editas, para que guardar repetidamente no recuantice la imagen cada vez. Una herramienta, imprenta o plataforma que no acepta otra cosa. Un archivo que vas a recortar y al que añadirás transparencia real, algo que el JPEG no puede guardar. En cada uno de esos casos el PNG es un archivo de trabajo, no un entregable — publica el JPEG, o mejor un WebP, al terminar.

¿Puedo subir la calidad del JPEG para arreglar el texto de color borroso?

Apenas, y no por el motivo que esperarías. El desenfoque del texto de color viene del submuestreo de croma, que la mayoría de los codificadores mantiene activo hasta lo más alto de la escala de calidad. Leímos los factores de muestreo de nuestros propios archivos: las calidades 75 y 90 usan el mismo color submuestreado, así que subir el ajuste hizo crecer el archivo un 23 % y mejoró la banda de texto azul solo un 10 %. La calidad 100 por fin codifica el color a plena resolución y sí lo arregla — con 213 085 bytes frente a 57 854 de la misma página en PNG. Usa PNG.

¿La transparencia se ha perdido de verdad o solo está oculta?

Perdida de verdad. El JPEG tiene tres canales y ningún cuarto donde esconder nada. Una vez escrito el archivo, un píxel antes transparente es un píxel opaco corriente del color que eligió el conversor, e indistinguible de un píxel que el diseñador pintara de ese color a propósito. Reconvertir el JPEG a PNG te devuelve un canal alfa, pero totalmente opaco en todas partes. Conserva el PNG original.