{"id":694,"date":"2018-01-30T08:34:19","date_gmt":"2018-01-30T08:34:19","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=694"},"modified":"2018-01-30T08:34:19","modified_gmt":"2018-01-30T08:34:19","slug":"4-3-2-que-son-los-formatos-de-imagen-la-cuestion-de-la-compresion","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/4-3-2-que-son-los-formatos-de-imagen-la-cuestion-de-la-compresion\/","title":{"rendered":"4.3.2. \u00bfQu\u00e9 son los formatos de imagen? La cuesti\u00f3n de la compresi\u00f3n"},"content":{"rendered":"

Hay dos maneras principales de comprimir: sin p\u00e9rdida <\/strong>y con p\u00e9rdida<\/strong>.<\/p>\n

<\/p>\n

Sin p\u00e9rdida<\/strong> (lossless<\/em>) significa que la imagen es m\u00e1s peque\u00f1a, en el sentido de que ocupa menos bytes, pero no perdemos calidad de imagen. Todos los p\u00edxeles que formaban la imagen original est\u00e1n aqu\u00ed en la nueva versi\u00f3n comprimida.<\/p>\n

Con p\u00e9rdida<\/strong> (lossy<\/em>) significa que la imagen se ha hecho mucho m\u00e1s peque\u00f1a, pero hemos perdido calidad, se ha simplificado la imagen de alguna manera.<\/p>\n

\n<\/div>\n

Un elemento clave a la hora de considerar la compresi\u00f3n de una imagen es el color. Cuantos m\u00e1s colores tenga una imagen, m\u00e1s memoria ocupar\u00e1. As\u00ed, en los procesos de compresi\u00f3n tenemos dos maneras de codificar los colores, denominadas paletas<\/strong> en el argot inform\u00e1tico: color indexado y color directo.<\/p>\n

Si usamos una paleta de color indexado<\/strong>, esto quiere decir que solo se registrar\u00e1n un n\u00famero determinado de colores (normalmente, 256). El creador de la imagen puede decidir cu\u00e1les ser\u00e1n estos 256 colores mediante una herramienta conocida como mapa de colores.<\/p>\n

En cambio, el color directo<\/strong> permite utilizar miles de colores sin ninguna necesidad de reducirlos a una lista determinada.<\/p>\n

<\/p>\n

Para entendernos, supongamos que hemos sacado una fotograf\u00eda de un prado verde. Nuestra c\u00e1mara tiene muy buena resoluci\u00f3n y ha capturado decenas de matices de verde. Esta foto tiene una paleta de color directo.<\/p>\n

Queremos subir esta foto a nuestro blog, pero pesa demasiado, ocupa mucha memoria y, por lo tanto, utilizamos un algoritmo de compresi\u00f3n que reduce el tama\u00f1o al limitar el n\u00famero de colores a 256. As\u00ed, nuestro prado verde dejar\u00e1 de tener decenas de matices de verde y pasar\u00e1 a tener, por ejemplo, solo cuatro variedades de verde, que pueden generarse autom\u00e1ticamente en el proceso de compresi\u00f3n o que habremos seleccionado al editar el mapa de colores.<\/p>\n

\n<\/div>\n

\"Plat
Figura 18.<\/strong> Este plato de sashimi, al convertirlo a GIF, contin\u00faa conservando los detalles (como los reflejos de la luz en el plato de cer\u00e1mica), pero con menos colores de los que ver\u00edamos en el restaurante.
Fuente: David Casacuberta<\/figcaption><\/figure>\n

Limitar la paleta de colores es una de las estrategias m\u00e1s sencillas y \u00fatiles para reducir el tama\u00f1o de una imagen. Consideremos una imagen de mapa de bits. Supongamos que cada uno de los cuatro canales RGBA tiene una profundidad de 8 bits. Esto nos da 256 valores diferentes por canal y, por lo tanto, disponemos de m\u00e1s de 16 millones de colores (exactamente, 16.777.216). Si en lugar de usar color directo utilizamos color indexado, y reducimos la paleta a 256 colores, solo necesitaremos 2 bytes por p\u00edxel, y as\u00ed el tama\u00f1o original de la imagen se reducir\u00e1 al 50 % sin tener que perder ninguno de los p\u00edxeles originales de la misma.<\/p>\n

Esta manera de comprimir la imagen es sin p\u00e9rdida, puesto que no sacrificamos ninguno de los p\u00edxeles originales de la imagen: nos limitamos a reducir el n\u00famero de colores. Podr\u00edamos discutir si la \u00abcalidad\u00bb de la fotograf\u00eda ha disminuido al reducir los colores
\n\u2013est\u00e1 claro que s\u00ed\u2013, pero lo que decimos aqu\u00ed es una cuesti\u00f3n t\u00e9cnica: un sistema de compresi\u00f3n es sin p\u00e9rdida si no se pierde ning\u00fan p\u00edxel, ni m\u00e1s ni menos.<\/p>\n

Pero quiz\u00e1 nuestra imagen contin\u00faa siendo demasiado grande. O la velocidad de carga es crucial. O quiz\u00e1 tiene que aparecer en un dispositivo muy simple con poca memoria y poca velocidad de procesamiento. Por este motivo, hay otras t\u00e9cnicas para reducir m\u00e1s el volumen de una imagen.<\/p>\n

No es el objetivo de este texto explicar en detalle estos algoritmos, pero conviene conocer la idea general. Si observamos cualquier fotograf\u00eda, veremos que los p\u00edxeles que son cercanos entre ellos tienden a compartir propiedades. En una foto de una salida de sol en el mar, tendremos una infinidad de p\u00edxeles azules uno junto al otro, y un centro de p\u00edxeles anaranjados. Con la t\u00e9cnica conocida como codificaci\u00f3n delta<\/strong>, podemos indicar qu\u00e9 diferencia hay entre dos p\u00edxeles que est\u00e1n uno junto a otro. Si los dos p\u00edxeles tienen la misma propiedad, entonces delta es cero, con lo cual podemos representar un p\u00edxel con un solo bit. Esta t\u00e9cnica puede optimizarse y no solo enfocarse al p\u00edxel vecino, sino ampliar el rango y codificar bloques de p\u00edxeles solo con unos cuantos bits.<\/p>\n

Otra t\u00e9cnica \u2013que se utiliza ampliamente en audio y v\u00eddeo, en los que la compresi\u00f3n es central\u2013 es utilizar informaci\u00f3n de la psicolog\u00eda de la percepci\u00f3n para establecer qu\u00e9 colores puede reconocer una persona como claramente distintos, y cu\u00e1les se reciben de manera similar. Con este conocimiento, podemos reducir la paleta de colores y eliminar los matices que no son observables por los humanos.<\/p>\n

Los diferentes formatos que describiremos a continuaci\u00f3n no son m\u00e1s que el resultado de aplicar distintas t\u00e9cnicas y algoritmos de compresi\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hay dos maneras principales de comprimir: sin p\u00e9rdida y con p\u00e9rdida. Un elemento clave a la hora de considerar la compresi\u00f3n de una imagen es el color. Cuantos m\u00e1s colores tenga una imagen, m\u00e1s memoria ocupar\u00e1. As\u00ed, en los procesos de compresi\u00f3n tenemos dos maneras de codificar los colores, denominadas paletas en el argot inform\u00e1tico: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/694"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/comments?post=694"}],"version-history":[{"count":1,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/694\/revisions"}],"predecessor-version":[{"id":696,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/694\/revisions\/696"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/media?parent=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}