{"id":217,"date":"2018-01-19T11:29:56","date_gmt":"2018-01-19T11:29:56","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=217"},"modified":"2018-01-19T13:19:30","modified_gmt":"2018-01-19T13:19:30","slug":"4-3-2-que-son-els-formats-dimatge-la-questio-de-la-compressio","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/4-3-2-que-son-els-formats-dimatge-la-questio-de-la-compressio\/","title":{"rendered":"4.3.2. Qu\u00e8 s\u00f3n els formats d’imatge? La q\u00fcesti\u00f3 de la compressi\u00f3"},"content":{"rendered":"

Hi ha dues maneres principals de comprimir: sense p\u00e8rdua<\/strong> i amb p\u00e8rdua<\/strong>.<\/p>\n

<\/p>\n

Sense p\u00e8rdua<\/strong> (lossless<\/em>) significa que la imatge \u00e9s m\u00e9s petita, en el sentit que ocupa menys bytes, per\u00f2 no perdem qualitat d\u2019imatge. Tots els p\u00edxels que formaven la imatge original estan aqu\u00ed en la nova versi\u00f3 comprimida.<\/p>\n

Amb p\u00e8rdua<\/strong> (lossy<\/em>) significa que la imatge s\u2019ha fet molt m\u00e9s petita, per\u00f2 hem perdut qualitat, s\u2019ha simplificat la imatge d\u2019alguna manera.<\/p>\n

\n<\/div>\n

Un element clau a l\u2019hora de considerar la compressi\u00f3 d\u2019una imatge \u00e9s el color. Com m\u00e9s colors tingui una imatge m\u00e9s mem\u00f2ria ocupar\u00e0. Aix\u00ed, en els processos de compressi\u00f3 tenim dues maneres de codificar els colors, anomenades paletes<\/strong> en l\u2019argot inform\u00e0tic: color indexat i color directe.<\/p>\n

Si usem una paleta de color indexat<\/strong>, aix\u00f2 vol dir que nom\u00e9s es registraran un nombre determinat de colors (normalment 256). El creador de la imatge pot decidir quins seran aquests 256 colors mitjan\u00e7ant un eina coneguda com a mapa de colors.<\/p>\n

En canvi, el color directe<\/strong> permet utilitzar milers de colors sense cap necessitat de reduir-los a una llista determinada.<\/p>\n

<\/p>\n

Per entendre\u2019ns, suposem que hem tret una fotografia d\u2019un prat verd. La nostra c\u00e0mera t\u00e9 molt bona resoluci\u00f3 i ha capturat desenes de matisos de verd. Aquesta foto t\u00e9 una paleta de color directe.<\/p>\n

Volem pujar aquesta foto al nostre blog, per\u00f2 \u00e9s massa pesant, ocupa molta mem\u00f2ria i per tant utilitzem un algorisme de compressi\u00f3 que en redueix la grand\u00e0ria en limitar el nombre de colors a 256. Aix\u00ed, el nostre prat verd deixar\u00e0 de tenir desenes de matisos de verd i passar\u00e0 a tenir, per exemple, nom\u00e9s quatre varietats de verd, que poden generar-se autom\u00e0ticament en el proc\u00e9s de compressi\u00f3 o que haurem seleccionat en editar el mapa de colors.<\/p>\n

\n<\/div>\n

\"Plat
Figura 18.<\/strong> Aquest plat de sashimi, en convertir-ho a gif continua conservant els detalls (com els reflexos de la llum en el plat de cer\u00e0mica) per\u00f2 amb menys colors dels que veur\u00edem al restaurant.
Font: David Casacuberta<\/figcaption><\/figure>\n

Limitar la paleta de colors \u00e9s una de les estrat\u00e8gies m\u00e9s senzilles i \u00fatils per a reduir la grand\u00e0ria d\u2019una imatge. Considerem una imatge de mapa de bits. Suposem que cadascun dels quatre canals RGBA t\u00e9 una profunditat de 8 bits. Aix\u00f2 ens dona 256 valors diferents per canal i per tant disposem de m\u00e9s de 16 milions de colors (exactament, 16.777.216). Si en lloc d\u2019usar color directe usem color indexat, i redu\u00efm la paleta a 256 colors, solament necessitarem 2 bytes per p\u00edxel, i aix\u00ed la grand\u00e0ria original de la imatge es reduir\u00e0 al 50% sense haver de perdre cap dels p\u00edxels originals de la imatge.<\/p>\n

Aquesta manera de comprimir la imatge \u00e9s sense p\u00e8rdua, ja que no sacrifiquem cap dels p\u00edxels originals de la imatge: ens limitem a reduir el nombre de colors. Podr\u00edem discutir si la \u00abqualitat\u00bb de la fotografia ha disminu\u00eft en reduir els colors \u2014\u00e9s clar que s\u00ed\u2014, per\u00f2 el que diem aqu\u00ed \u00e9s una q\u00fcesti\u00f3 t\u00e8cnica: un sistema de compressi\u00f3 \u00e9s sense p\u00e8rdua si no es perd cap p\u00edxel, ni m\u00e9s ni menys.<\/p>\n

Per\u00f2 potser la nostra imatge continua essent massa gran. O la velocitat de c\u00e0rrega \u00e9s crucial. O potser ha d\u2019apar\u00e8ixer en un dispositiu molt simple amb poca mem\u00f2ria i poca velocitat de processament. Per aquest motiu hi ha altres t\u00e8cniques per a reduir m\u00e9s el volum d\u2019una imatge.<\/p>\n

No \u00e9s l\u2019objectiu d\u2019aquest text explicar detalladament aquests algorismes, per\u00f2 \u00e9s convenient con\u00e8ixer-ne la idea general. Si mirem qualsevol fotografia, veurem que els p\u00edxels que s\u00f3n propers entre ells tendeixen a compartir propietats. En una foto d\u2019una sortida de sol al mar, tindrem una infinitat de p\u00edxels blaus un al costat de l\u2019altre i un centre de p\u00edxels ataronjats. Amb la t\u00e8cnica coneguda com codificaci\u00f3 delta<\/strong>, podem indicar quina difer\u00e8ncia hi ha entre dos p\u00edxels que estan l\u2019un al costat de l\u2019altre. Si els dos p\u00edxels tenen la mateixa propietat, llavors delta \u00e9s zero, amb la qual cosa podem representar un p\u00edxel amb un sol bit. Aquesta t\u00e8cnica pot optimitzar-se i no solament enfocar-se al p\u00edxel ve\u00ed sin\u00f3 ampliar el rang i codificar blocs de p\u00edxels solament amb uns quants bits.<\/p>\n

Una altra t\u00e8cnica \u2014que s\u2019usa \u00e0mpliament en \u00e0udio i v\u00eddeo, en qu\u00e8 la compressi\u00f3 \u00e9s central\u2014 \u00e9s utilitzar informaci\u00f3 de la psicologia de la percepci\u00f3 per a establir quins colors pot recon\u00e8ixer una persona com a clarament diferents i quins es reben de manera similar. Amb aquest coneixement, podem reduir la paleta de colors i eliminar els matisos que no s\u00f3n observables pels humans.<\/p>\n

Els diferents formats que descriurem a continuaci\u00f3 no s\u00f3n m\u00e9s que els resultats d\u2019aplicar diverses t\u00e8cniques i algorismes de compressi\u00f3.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hi ha dues maneres principals de comprimir: sense p\u00e8rdua i amb p\u00e8rdua. Un element clau a l\u2019hora de considerar la compressi\u00f3 d\u2019una imatge \u00e9s el color. Com m\u00e9s colors tingui una imatge m\u00e9s mem\u00f2ria ocupar\u00e0. Aix\u00ed, en els processos de compressi\u00f3 tenim dues maneres de codificar els colors, anomenades paletes en l\u2019argot inform\u00e0tic: color indexat […]<\/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\/wp-json\/wp\/v2\/pages\/217"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":3,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/217\/revisions"}],"predecessor-version":[{"id":297,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/217\/revisions\/297"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/media?parent=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}