JPG o PNG: co­m­pa­ra­ción de los dos formatos de imagen

JPG y PNG se en­cue­n­tran desde hace décadas entre los formatos gráficos más im­po­r­ta­n­tes, es­pe­cia­l­me­n­te en la web. Ambos tienen sus ventajas e in­co­n­ve­nie­n­tes. Aunque otros formatos más recientes como HEIF o WebP están ganando cada vez más po­pu­la­ri­dad, 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 fo­to­gra­fías. La co­m­pre­sión de imagen que usa este formato ya fue definida en 1992 mediante la norma ISO/IEC 10918-1. La de­no­mi­na­ción JPEG se remonta a la Joint Pho­to­gra­phic Experts Group, que fue quien de­sa­rro­lló este estándar. Como no­r­ma­l­me­n­te solo se usan tres ca­ra­c­te­res para las ex­te­n­sio­nes de los archivos, te­r­mi­na­ron acordando la extensión JPG (abre­via­tu­ra de JPEG) para los archivos de imagen.

¿Qué es PNG?

PNG es un formato gráfico es­pe­cia­l­me­n­te 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 de­sa­rro­lla­do por un grupo de trabajo del World Wide Web Co­n­so­r­tium (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 po­si­bi­li­dad de de­te­r­mi­nar di­fe­re­n­tes pro­fu­n­di­da­des de color y gamas de color se­le­c­cio­na­das de manera flexible. El formato PNG también se ha de­sa­rro­lla­do con la intención de crear una al­te­r­na­ti­va 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 de­te­r­mi­nar zonas tra­n­s­pa­re­n­tes en la imagen que se precisan, entre otros, para crear logotipos e iconos para páginas web y apli­ca­cio­nes. En co­n­tra­po­si­ción al formato GIF, que solo permite que uno de los 256 colores posibles sea tra­n­s­pa­re­n­te, PNG ofrece un auténtico canal alfa que también permite zonas pa­r­cia­l­me­n­te tra­n­s­pa­re­n­tes, por ejemplo, al su­pe­r­po­ner imágenes.

JPG: ¿cómo afecta la co­m­pre­sión a la imagen?

Podemos quedarnos con la siguiente norma básica: cuanto mayor sea el índice de co­m­pre­sión de una imagen JPG, peor será la calidad. En este contexto, la co­m­pre­sió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 co­m­pre­sión. Pero el nivel de co­m­pre­sión y el tamaño de archivo no guardan una relación lineal. Una co­m­pre­sión reducida que todavía mantiene una calidad elevada puede suponer una reducción notable en el tamaño del archivo.

La imagen re­pre­se­n­ta­da, por ejemplo, tiene un tamaño de 22,16 MB con una re­so­lu­ción de 4000 x 1936 píxeles. En la categoría de calidad 95, la co­m­pre­sión JPEG ya reduce el tamaño de archivo a 1,25 MB. La mayoría de las cámaras y los sma­r­t­pho­nes usan el valor 95 como ajuste por defecto para almacenar fo­to­gra­fías en formato JPG.

Una co­m­pre­sión a la categoría de calidad 60 reduce el tamaño de archivo a 194 KB, es decir, aprox. un 15 % menos en co­m­pa­ra­ción con la categoría de calidad 95. La di­fe­re­n­cia apenas se aprecia en la imagen de ejemplo:

Si se aplica una co­m­pre­sión más potente empieza a reducirse no­ta­ble­me­n­te la calidad de imagen, mientras que el tamaño de archivo ya solo se reduce de forma prá­c­ti­ca­me­n­te irre­le­va­n­te. En el cielo azul de la imagen de ejemplo, con un nivel de calidad 25 se observan cla­ra­me­n­te ar­te­fa­c­tos en forma de anillos de color, y el degradado deja de ser uniforme:

Si se amplía mucho la imagen, estos ar­te­fa­c­tos, producto de la co­m­pre­sión JPG, ya son visibles en las ca­te­go­rí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 re­so­lu­ción en papel en cualquier página web o punto de impresión físico.

La imagen ampliada muestra que los ar­te­fa­c­tos de co­m­pre­sión aparecen, sobre todo, en su­pe­r­fi­cies de un solo color y en bordes de gran contraste. Por ello, el formato JPG no es adecuado para gráficos de su­pe­r­fi­cie, capturas de pantalla e iconos.

JPEG pro­gre­si­vo para una re­pre­se­n­ta­ción más rápida

En función de la capacidad de re­n­di­mie­n­to de sistema y la velocidad de tra­n­s­mi­sión, la re­pre­se­n­ta­ción de imágenes de alta re­so­lu­ción puede tardar más de­pe­n­die­n­do del tamaño del archivo y la capacidad del sistema. Las fo­to­gra­fías JPG se componen de de­no­mi­na­dos co­efi­cie­n­tes, bloques de 8 x 8 píxeles que se almacenan unos detrás de otros por defecto. Así, la imagen se va co­m­po­nie­n­do por filas.

En el JPEG pro­gre­si­vo o JPEG pro­gre­s­si­ve se guarda primero un valor de color medio de cada co­efi­cie­n­te. Así, es posible mostrar en muy poco tiempo una imagen poco nítida con píxeles gruesos. A co­n­ti­nua­ción, se guarda in­fo­r­ma­ción de color para una cuarta y de­ci­mo­se­x­ta parte de cada co­efi­cie­n­te. Con el tiempo, la calidad de re­pre­se­n­ta­ción va mejorando. Así, quienes vi­sua­li­zan 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 co­m­pre­sió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 co­m­pre­sió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 co­n­tra­s­tes en los bordes o colores, no hay forma de re­cu­pe­rar­los. Sobre todo, al intentar conseguir una imagen más nítida a po­s­te­rio­ri, se refuerzan los ar­te­fa­c­tos de co­m­pre­sión. Cuanto más reducida sea la categoría de calidad de una fo­to­gra­fía, mayor será el efecto que las ediciones po­s­te­rio­res tengan sobre la calidad. En estos casos, de nada vale volver a aumentar la categoría de calidad po­s­te­rio­r­me­n­te.

JPG vs. PNG: capturas de pantalla

En la do­cu­me­n­ta­ción de programas de todo tipo se necesitan co­n­s­ta­n­te­me­n­te capturas de pantalla de ventanas de Windows o de apli­ca­cio­nes móviles. Lo ideal es crearlas en formato PNG, algo que viene pre­co­n­fi­gu­ra­do en la mayoría de he­rra­mie­n­tas de captura de pantalla. Además, los sma­r­t­pho­nes Android, por ejemplo, guardan au­to­má­ti­ca­me­n­te las capturas en formato PNG.

Las capturas de pantalla contienen líneas rectas y precisas con co­n­tra­s­tes claros y su­pe­r­fi­cies mo­no­cro­má­ti­cas sin evolución del color. Ambos aspectos re­pre­se­n­tan puntos débiles del formato JPG. Las si­guie­n­tes capturas de pantalla de un cuadro de diálogo de Windows 10 muestran la di­fe­re­n­cia entre el formato JPG y el formato PNG.

Al ampliar las imágenes la di­fe­re­n­cia de calidad entre JPG y PNG se hace mucho más notoria. La siguiente captura de pantalla muestra los ar­te­fa­c­tos 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 de­s­ve­n­ta­jas

Los formatos JPG y PNG son muy di­fe­re­n­tes. Hemos resumido sus ventajas y de­s­ve­n­ta­jas en la siguiente tabla:

¿JPG o PNG?: ex­te­n­sio­nes y nuevos formatos

Además de formatos más recientes como HEIF para fo­to­gra­fías o WebP para gráficos, ha habido varios intentos de ampliar las fu­n­cio­na­li­da­des 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 co­m­pa­ti­ble con JPEG, permite una mejor co­m­pre­sión con la misma calidad o incluso una co­m­pre­sión sin pérdidas. Se pueden re­pre­se­n­tar zonas de la imagen con una mayor calidad que otras menos im­po­r­ta­n­tes. Se permiten más de 8 bits por canal de color y mayores di­me­n­sio­nes de imagen. Para la re­pre­se­n­ta­ción se pueden se­le­c­cio­nar di­fe­re­n­tes modos de pro­gre­sión y los metadatos pueden contener cualquier in­fo­r­ma­ción en formato XML. Ejemplos de ex­te­n­sio­nes 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 re­gi­s­tra­do.

APNG

Animated Portable Network Graphics (APNG) añade ani­ma­cio­nes al formato PNG, tal y como lo hace el formato GIF.

PNG+

Am­plia­ción del formato PNG con capas de imagen (layers) y diseños de varias páginas. Este formato solo lo usaba el programa ya de­s­ca­ta­lo­ga­do “Microsoft Picture It!” y nunca fue capaz de asentarse en el mercado.

WebP

El formato de imagen WebP fue de­sa­rro­lla­do por Google y publicado en 2010 con el objetivo de unificar JPEG, PNG y GIF en un único formato moderno. Es co­m­pa­ti­ble tanto con co­m­pre­sión con pérdidas como sin pérdidas, e incluye soporte para tra­n­s­pa­re­n­cia (canal alfa) y ani­ma­cio­nes. WebP ofrece archivos co­n­si­de­ra­ble­me­n­te más ligeros que JPG o PNG ma­n­te­nie­n­do una calidad de imagen similar. Ac­tua­l­me­n­te, es un estándar co­m­pa­ti­ble con todos los na­ve­ga­do­res pri­n­ci­pa­les (Chrome, Firefox, Edge, Safari) y está es­pe­cia­l­me­n­te op­ti­mi­za­do 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 co­m­pre­sión de imagen muy eficiente con una calidad visual elevada. Admite co­m­pre­sión con y sin pérdidas, alta pro­fu­n­di­dad de color, HDR, tra­n­s­pa­re­n­cia y ani­ma­cio­nes. En co­m­pa­ra­ción con WebP, AVIF suele generar archivos más pequeños con la misma calidad, aunque requiere más potencia de pro­ce­sa­mie­n­to para codificar y de­co­di­fi­car. Cada vez cuenta con un mayor soporte en na­ve­ga­do­res y pla­ta­fo­r­mas 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 co­m­pre­sión con pérdidas como sin pérdidas. Es co­m­pa­ti­ble con altas pro­fu­n­di­da­des de color, grandes di­me­n­sio­nes de imagen, ani­ma­cio­nes y tra­n­s­pa­re­n­cia, y además es co­m­pa­ti­ble con versiones an­te­rio­res de JPEG; los archivos JPG exi­s­te­n­tes pueden co­n­ve­r­ti­r­se sin pérdida de calidad. Su adopción aún es limitada, ya que pla­ta­fo­r­mas im­po­r­ta­n­tes como Google Chrome han su­s­pe­n­di­do 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 de­sa­rro­lla­do para fo­to­gra­fías y para estas es el más adecuado. Sobre todo en el caso de in­s­ta­n­tá­neas de paisajes o personas apenas se pueden ver los ar­te­fa­c­tos de co­m­pre­sión. Gracias al reducido tamaño de imagen, el formato JPG es perfecto para ilustrar páginas web con imágenes. Úni­ca­me­n­te pueden aparecer algunos ar­te­fa­c­tos visibles en imágenes de productos con muchos detalles y bordes muy precisos. Además, la co­m­pre­sió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 su­pe­r­fi­cies mo­no­cro­má­ti­cas. Lo mismo se aplica a las capturas de pantalla y la co­n­ve­r­sión de gráficas de vector en formatos de retícula en sistemas que no pueden re­pre­se­n­tar gráficas de vector. El canal alfa permite zonas de imagen tra­n­s­pa­re­n­tes, una ca­ra­c­te­rí­s­ti­ca muy im­po­r­ta­n­te para iconos de apli­ca­cio­nes y páginas web.

Para decidir rá­pi­da­me­n­te qué formato de imagen se adapta mejor a tu caso, puedes consultar nuestro árbol de de­ci­sio­nes: