PNG vs JPG: cuándo usar cada formato

Resumen. Usa PNG para capturas de pantalla, logotipos y cualquier cosa con bordes nítidos o transparencia porque es sin pérdida y admite un canal alfa. Usa JPG para fotografías porque su compresión DCT con pérdida produce archivos 5-10× más pequeños sin pérdida de calidad perceptible.

Dos formatos de imagen, ambos con más de 30 años de antigüedad, ambos todavía ubicuos, ambos correctos en situaciones diferentes. La regla general es simple: PNG para capturas de pantalla, logotipos, cualquier cosa con bordes nítidos o transparencia; JPG para fotografías. El razonamiento detrás de esa regla es más interesante que la regla en sí.

Las diferencias principales

Por qué la compresión con pérdida gana para fotografías

El algoritmo de compresión de JPG — la transformada del coseno discreto (DCT), seguida de submuestreo de crominancia y codificación Huffman — está diseñado en torno al sistema visual humano. El algoritmo descarta información que el ojo no puede ver fácilmente:

• Submuestreo de crominancia. La visión humana es mucho más sensible al brillo (luma) que al color (crominancia). JPG almacena el color a la mitad de la resolución del brillo, lo cual es invisible en una visualización normal.
• Cuantización en el dominio de frecuencias. Las fotografías contienen mucho ruido de alta frecuencia (gradientes sutiles, textura, grano del sensor). El DCT separa la imagen en bandas de frecuencia; JPG cuantiza agresivamente las bandas de alta frecuencia. Pierdes detalles que de todas formas no estabas percibiendo conscientemente.

Para una fotografía 4K, JPG a calidad 85 parece indistinguible del original sin pérdida para la mayoría de los espectadores, con una décima parte del tamaño de archivo. Esa proporción es imbatible.

Por qué la compresión con pérdida falla para capturas de pantalla y logotipos

Las regiones planas y los bordes nítidos son exactamente el tipo de contenido incorrecto para las matemáticas de dominio de frecuencias de JPG. El algoritmo introduce artefactos de ringing alrededor de los bordes duros (visibles como halos tenues cerca del texto), y el submuestreo de crominancia que se oculta bien en una fotografía se convierte en manchas obvias de cambio de color junto a un color de marca saturado.

La compresión DEFLATE de PNG, por el contrario, es exacta. Un color de 24 bits se almacena como un color de 24 bits. Las regiones planas se comprimen muy bien porque la codificación por longitud de ejecución detecta la repetición; los bordes nítidos permanecen nítidos. Una captura de pantalla de interfaz típica en PNG es más pequeña que la misma captura guardada como JPG, porque los bytes que una fotografía consumiría están dominados por las secuencias que PNG consume fácilmente.

La cuestión de la transparencia

JPG no tiene canal alfa. Un “JPG transparente” no existe; el formato físicamente no puede almacenar uno. Si necesitas que algo se superponga sobre un fondo no rectangular — logotipos, iconos, recortes estilo pegatina, cualquier cosa en capas — PNG es el único de los dos que funciona.

La solución alternativa que la gente intenta a veces es hacer coincidir el fondo del JPG con el color de fondo de destino. Esto funciona para un destino específico y se rompe en cuanto el recurso se reutiliza. No lo hagas. Usa PNG o, mejor aún, un formato vectorial como SVG.

Cuándo ninguno de los dos es la respuesta correcta

Tres casos:

1. Gráficos vectoriales. Logotipos, iconos e ilustraciones deben entregarse como SVG cuando sea posible. Los vectores escalan a cualquier resolución, permanecen nítidos en cualquier pantalla y generalmente se comprimen a unos pocos cientos de bytes. PNG te ata a una resolución fija.
2. Fotografías modernas para la web. Usa WebP (o AVIF donde esté disponible). Ambos formatos producen archivos un 25-50% más pequeños que JPG a igual calidad visual, y ambos admiten alfa. Nuestro convertidor JPG a WebP y convertidor PNG a WebP gestionan el cambio en el navegador. Usa JPG como alternativa con <picture> para la pequeña parte de clientes que no admiten WebP.
3. Imágenes de interfaz en línea. A veces la respuesta correcta es omitir un archivo separado completamente. Nuestra herramienta imagen a Base64 codifica cualquier imagen como una URI de datos que puedes pegar directamente en HTML, CSS o JSON. Útil cuando la imagen es pequeña (menos de ~10 KB) y una solicitud HTTP separada ralentizaría la ruta de renderizado crítica.

El árbol de decisión

1. ¿Necesita transparencia? → PNG (o SVG si es vectorial).
2. ¿Es una fotografía o similar? → JPG, o WebP para la web.
3. ¿Es una captura de pantalla, captura de interfaz o gráfico de color plano? → PNG.
4. ¿Tiene menos de 10 KB y se usa una sola vez? → Base64 en línea.
5. ¿Es un logotipo o icono? → SVG. PNG como alternativa.

Eso cubre aproximadamente el 95% de los casos. El 5% restante generalmente se resuelve probando ambos formatos y comparando los tamaños de archivo — ningún algoritmo es mágico, y la respuesta correcta depende del contenido específico.

Datos numéricos

• Dimensiones máximas: PNG hasta 2³¹−1 × 2³¹−1 px (teórico); JPG limitado a 65.535 × 65.535 px (campo de 16 bits).
• Profundidad de bits: PNG admite 1/2/4/8/16 bits por canal + alfa; JPG está fijo en 8 bits por canal, 3 canales (sin alfa). El JPG de 12 bits existe pero rara vez es compatible con navegadores.
• Ventaja de profundidad de color: PNG de 16 bits = 281 billones de colores frente a los 16,7 millones de JPG — significativo solo para fuentes HDR y trabajo de degradado.
• Proporción típica de tamaño de archivo (foto 4K a calidad 85): PNG ~12 MB frente a JPG ~1,5 MB — aproximadamente 8×.
• Proporción típica de tamaño de archivo (captura de pantalla de interfaz, color plano): PNG ~80 KB frente a JPG ~180 KB — PNG aproximadamente 2× más pequeño.
• Calidad JPG vs perceptual: q=95 es visualmente sin pérdida en la mayoría del contenido; q=80 es el punto óptimo para la web; q=60 empieza a mostrar artefactos en rostros y degradados.
• Submuestreo de crominancia 4:2:0: almacena crominancia a cuarta parte de la resolución, ahorrando ~50% de tamaño de archivo con un impacto perceptual mínimo en fotos pero con ringing visible en texto.
• Niveles de compresión PNG: 0-9 en libpng; el nivel 9 produce archivos ~5-15% más pequeños que el nivel 6 pero tarda ~3-5× más. oxipng y zopflipng pueden recortar otro 10-20%.
• Pérdida generacional: JPG guardado 10 veces a q=85 pierde ~3 dB PSNR frente al original; PNG no tiene pérdida = 0.
• Tamaño de archivo APNG vs GIF: típicamente 50-70% más pequeño que el GIF equivalente con mayor profundidad de color.

Matriz de decisión

Fuentes

• W3C / ISO 15948 — Portable Network Graphics (PNG) Specification, Third Edition — w3.org/TR/png.
• ITU-T T.81 (ISO/IEC 10918-1) — Information technology – Digital compression and coding of continuous-tone still images (especificación principal JPEG) — itu.int.
• Wallace, G.K. — The JPEG Still Picture Compression Standard, Communications of the ACM, abril de 1991 — artículo JPEG original revisado por pares.