JPG o PNG: comparación de los dos formatos de imagen

JPG y PNG se encuentran desde hace décadas entre los formatos gráficos más importantes, especialmente en la web. Ambos tienen sus ventajas e inconvenientes. Aunque otros formatos más recientes como HEIF o WebP están ganando cada vez más popularidad, aún están lejos de alcanzar la difusión de JPG o PNG.

¿Qué es JPG o JPEG?

JPEG es el formato gráfico más común para fotografías. La compresión de imagen que usa este formato ya fue definida en 1992 mediante la norma ISO/IEC 10918-1. La denominación JPEG se remonta a la Joint Photographic Experts Group, que fue quien desarrolló este estándar. Como normalmente solo se usan tres caracteres para las extensiones de los archivos, terminaron acordando la extensión JPG (abreviatura de JPEG) para los archivos de imagen.

¿Qué es PNG?

PNG es un formato gráfico especialmente adecuado para gráficos de píxeles, capturas de pantalla y logotipos. El formato PNG proviene de las siglas de Portable Network Graphics y ha sido desarrollado por un grupo de trabajo del World Wide Web Consortium (W3C) a partir de 1994 para recogerlo más tarde en la norma ISO/IEC 15948:2003.

PNG funciona sin pérdidas y ofrece la posibilidad de determinar diferentes profundidades de color y gamas de color seleccionadas de manera flexible. El formato PNG también se ha desarrollado con la intención de crear una alternativa moderna de acceso libre al formato GIF que está sujeto a una licencia: al igual que el formato GIF, PNG cuenta con un canal alfa para determinar zonas transparentes en la imagen que se precisan, entre otros, para crear logotipos e iconos para páginas web y aplicaciones. En contraposición al formato GIF, que solo permite que uno de los 256 colores posibles sea transparente, PNG ofrece un auténtico canal alfa que también permite zonas parcialmente transparentes, por ejemplo, al superponer imágenes.

JPG: ¿cómo afecta la compresión a la imagen?

Podemos quedarnos con la siguiente norma básica: cuanto mayor sea el índice de compresión de una imagen JPG, peor será la calidad. En este contexto, la compresión se indica en los programas de edición de imagen como valor de calidad: dicho de otra forma, un valor de 100 indica una calidad del 100 % sin compresión. Pero el nivel de compresión y el tamaño de archivo no guardan una relación lineal. Una compresión reducida que todavía mantiene una calidad elevada puede suponer una reducción notable en el tamaño del archivo.

La imagen representada, por ejemplo, tiene un tamaño de 22,16 MB con una resolución de 4000 x 1936 píxeles. En la categoría de calidad 95, la compresión JPEG ya reduce el tamaño de archivo a 1,25 MB. La mayoría de las cámaras y los smartphones usan el valor 95 como ajuste por defecto para almacenar fotografías en formato JPG.

Una compresión a la categoría de calidad 60 reduce el tamaño de archivo a 194 KB, es decir, aprox. un 15 % menos en comparación con la categoría de calidad 95. La diferencia apenas se aprecia en la imagen de ejemplo:

Si se aplica una compresión más potente empieza a reducirse notablemente la calidad de imagen, mientras que el tamaño de archivo ya solo se reduce de forma prácticamente irrelevante. En el cielo azul de la imagen de ejemplo, con un nivel de calidad 25 se observan claramente artefactos en forma de anillos de color, y el degradado deja de ser uniforme:

Si se amplía mucho la imagen, estos artefactos, producto de la compresión JPG, ya son visibles en las categorías de calidad medias, tal y como muestra el siguiente ejemplo. Por ello, no debes alterar la calidad JPG de imágenes que desees imprimir con gran resolución en papel en cualquier página web o punto de impresión físico.

La imagen ampliada muestra que los artefactos de compresión aparecen, sobre todo, en superficies de un solo color y en bordes de gran contraste. Por ello, el formato JPG no es adecuado para gráficos de superficie, capturas de pantalla e iconos.

JPEG progresivo para una representación más rápida

En función de la capacidad de rendimiento de sistema y la velocidad de transmisión, la representación de imágenes de alta resolución puede tardar más dependiendo del tamaño del archivo y la capacidad del sistema. Las fotografías JPG se componen de denominados coeficientes, bloques de 8 x 8 píxeles que se almacenan unos detrás de otros por defecto. Así, la imagen se va componiendo por filas.

En el JPEG progresivo o JPEG progressive se guarda primero un valor de color medio de cada coeficiente. Así, es posible mostrar en muy poco tiempo una imagen poco nítida con píxeles gruesos. A continuación, se guarda información de color para una cuarta y decimosexta parte de cada coeficiente. Con el tiempo, la calidad de representación va mejorando. Así, quienes visualizan la imagen pueden intuir desde el principio de qué se trata, sin tener que esperar a que se cargue línea por línea.

Pérdidas de compresión por edición de imagen

Los programas de edición de imagen procesan cada píxel de una imagen tal y como se encuentra en el archivo, es decir, también procesan los píxeles cuyos colores han sido alterados por la compresión. Si se aplica un filtro de color o efectos a una imagen o si se modifica su tamaño, la imagen se vuelve a comprimir cuando se guarda y esto empeora la calidad.

Una vez que se pierden los contrastes en los bordes o colores, no hay forma de recuperarlos. Sobre todo, al intentar conseguir una imagen más nítida a posteriori, se refuerzan los artefactos de compresión. Cuanto más reducida sea la categoría de calidad de una fotografía, mayor será el efecto que las ediciones posteriores tengan sobre la calidad. En estos casos, de nada vale volver a aumentar la categoría de calidad posteriormente.

JPG vs. PNG: capturas de pantalla

En la documentación de programas de todo tipo se necesitan constantemente capturas de pantalla de ventanas de Windows o de aplicaciones móviles. Lo ideal es crearlas en formato PNG, algo que viene preconfigurado en la mayoría de herramientas de captura de pantalla. Además, los smartphones Android, por ejemplo, guardan automáticamente las capturas en formato PNG.

Las capturas de pantalla contienen líneas rectas y precisas con contrastes claros y superficies monocromáticas sin evolución del color. Ambos aspectos representan puntos débiles del formato JPG. Las siguientes capturas de pantalla de un cuadro de diálogo de Windows 10 muestran la diferencia entre el formato JPG y el formato PNG.

Al ampliar las imágenes la diferencia de calidad entre JPG y PNG se hace mucho más notoria. La siguiente captura de pantalla muestra los artefactos JPG en la zona de la paleta de colores y alrededor de las letras sobre fondo blanco.

JPG vs. PNG: vista general de ventajas y desventajas

Los formatos JPG y PNG son muy diferentes. Hemos resumido sus ventajas y desventajas en la siguiente tabla:

¿JPG o PNG?: extensiones y nuevos formatos

Además de formatos más recientes como HEIF para fotografías o WebP para gráficos, ha habido varios intentos de ampliar las funcionalidades de los conocidos formatos JPG y PNG. Sin embargo, hasta ahora, ninguno de estos nuevos formatos ha logrado acercarse al nivel de difusión de JPG o PNG.

JPEG 2000

El formato JPEG 2000, que no es compatible con JPEG, permite una mejor compresión con la misma calidad o incluso una compresión sin pérdidas. Se pueden representar zonas de la imagen con una mayor calidad que otras menos importantes. Se permiten más de 8 bits por canal de color y mayores dimensiones de imagen. Para la representación se pueden seleccionar diferentes modos de progresión y los metadatos pueden contener cualquier información en formato XML. Ejemplos de extensiones de archivo posibles: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. A pesar de sus numerosas ventajas, hasta la fecha, el JPEG 2000 no ha sido capaz de sustituir al JPG clásico.

JNG

JPEG Network Graphics (JNG) amplía el formato JPEG mediante un canal alfa adicional, que se puede integrar sin pérdidas en forma de un flujo de datos PNG. El formato no cuenta con un tipo MIME propio registrado.

APNG

Animated Portable Network Graphics (APNG) añade animaciones al formato PNG, tal y como lo hace el formato GIF.

PNG+

Ampliación del formato PNG con capas de imagen (layers) y diseños de varias páginas. Este formato solo lo usaba el programa ya descatalogado “Microsoft Picture It!” y nunca fue capaz de asentarse en el mercado.

WebP

El formato de imagen WebP fue desarrollado por Google y publicado en 2010 con el objetivo de unificar JPEG, PNG y GIF en un único formato moderno. Es compatible tanto con compresión con pérdidas como sin pérdidas, e incluye soporte para transparencia (canal alfa) y animaciones. WebP ofrece archivos considerablemente más ligeros que JPG o PNG manteniendo una calidad de imagen similar. Actualmente, es un estándar compatible con todos los navegadores principales (Chrome, Firefox, Edge, Safari) y está especialmente optimizado para su uso en la web. La extensión de archivo es .webp.

AVIF

AVIF (AV1 Image File Format) se basa en el moderno códec de vídeo AV1 y ofrece una compresión de imagen muy eficiente con una calidad visual elevada. Admite compresión con y sin pérdidas, alta profundidad de color, HDR, transparencia y animaciones. En comparación con WebP, AVIF suele generar archivos más pequeños con la misma calidad, aunque requiere más potencia de procesamiento para codificar y decodificar. Cada vez cuenta con un mayor soporte en navegadores y plataformas modernas. Su extensión de archivo es .avif.

JPEG XL

JPEG XL también fue concebido como un sucesor moderno de formatos clásicos como JPEG, PNG y GIF, y admite tanto compresión con pérdidas como sin pérdidas. Es compatible con altas profundidades de color, grandes dimensiones de imagen, animaciones y transparencia, y además es compatible con versiones anteriores de JPEG; los archivos JPG existentes pueden convertirse sin pérdida de calidad. Su adopción aún es limitada, ya que plataformas importantes como Google Chrome han suspendido su soporte por el momento. La extensión del archivo es .jxl.

JPG o PNG: ¿para qué es más adecuado cada formato?

El formato JPG ha sido desarrollado para fotografías y para estas es el más adecuado. Sobre todo en el caso de instantáneas de paisajes o personas apenas se pueden ver los artefactos de compresión. Gracias al reducido tamaño de imagen, el formato JPG es perfecto para ilustrar páginas web con imágenes. Únicamente pueden aparecer algunos artefactos visibles en imágenes de productos con muchos detalles y bordes muy precisos. Además, la compresión dificulta el recorte preciso de objetos en este tipo de imágenes.

PNG es idóneo para todos los tipos de gráficos en los que aparecen bordes precisos y superficies monocromáticas. Lo mismo se aplica a las capturas de pantalla y la conversión de gráficas de vector en formatos de retícula en sistemas que no pueden representar gráficas de vector. El canal alfa permite zonas de imagen transparentes, una característica muy importante para iconos de aplicaciones y páginas web.

Para decidir rápidamente qué formato de imagen se adapta mejor a tu caso, puedes consultar nuestro árbol de decisiones: