{"id":692,"date":"2018-01-30T08:32:18","date_gmt":"2018-01-30T08:32:18","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=692"},"modified":"2018-01-30T08:32:18","modified_gmt":"2018-01-30T08:32:18","slug":"4-3-1-tipos-de-imagen-en-un-entorno-digital","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/4-3-1-tipos-de-imagen-en-un-entorno-digital\/","title":{"rendered":"4.3.1. Tipos de imagen en un entorno digital"},"content":{"rendered":"<p>En un entorno digital, nos encontraremos b\u00e1sicamente con dos tipos de im\u00e1genes: <strong>vectoriales<\/strong> y de <strong>mapa de bits<\/strong>.<\/p>\n<div class=\"featured featured-blue\"><p>Una imagen de mapa de bits (tambi\u00e9n conocida como imagen <em>raster<\/em> o imagen de p\u00edxeles) es una parilla bidimensional de cuadr\u00edculas o celdas denominadas <strong>p\u00edxeles<\/strong>.<\/p>\n<\/div>\n<p>Como si de un papel milimetrado se tratara, cada cuadr\u00edcula intenta representar la informaci\u00f3n de una fotograf\u00eda, dibujo, etc. y recibe el nombre de p\u00edxel. Cada p\u00edxel, a su vez, almacena informaci\u00f3n sobre cuatro canales de color, conocidos normalmente como RGBA (<em>red<\/em>, <em>green<\/em>, <em>blue<\/em> y <em>alpha<\/em>), el \u00faltimo de los cuales se refiere al grado de transparencia.<\/p>\n<div class=\"featured featured-blue\"><p>Una imagen vectorial se almacena de manera diferente describiendo varias figuras geom\u00e9tricas (l\u00edneas, curvas, pol\u00edgonos) que, conjuntamente, crean una imagen.<\/p>\n<\/div>\n<div class=\"featured featured-grey\"><\/p>\n<p>Supongamos que tomamos la foto de un c\u00edrculo azul sobre un fondo blanco. Si la almacenamos como mapa de bits, lo que tendremos ser\u00e1 una cuadr\u00edcula que codificar\u00e1 la escena p\u00edxel a p\u00edxel, con una mayor\u00eda de p\u00edxeles blancos y algunos azules que definen un c\u00edrculo.<\/p>\n<p>En cambio, en cuanto a la imagen vectorial equivalente de este mismo c\u00edrculo azul, el fichero contendr\u00e1 informaci\u00f3n de d\u00f3nde est\u00e1 el centro del c\u00edrculo en la imagen, cu\u00e1nto mide el radio, cu\u00e1l es el grueso de la l\u00ednea y el matiz de azul del c\u00edrculo.<\/p>\n<p>Supongamos que nuestra fotograf\u00eda del c\u00edrculo azul est\u00e1 codificada en una parrilla<br \/>\nde 100 \u00d7 100 p\u00edxeles. Esto quiere decir que ocupa un total de 10.000 p\u00edxeles. Cada p\u00edxel tiene que contener informaci\u00f3n sobre rojo, azul, verde y transparencia y, por lo tanto, necesitamos 4 bytes. Esto nos da 40.000 bytes, que divididos por 1.024 nos dan un total de 39 kB.<\/p>\n<p>Este mismo c\u00edrculo, convertido en imagen vectorial, ocupar\u00e1 unos cuantos bytes: las coordenadas del centro del c\u00edrculo, la longitud del radio, el grosor de la l\u00ednea y el color del c\u00edrculo.<\/p>\n<p>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En un entorno digital, nos encontraremos b\u00e1sicamente con dos tipos de im\u00e1genes: vectoriales y de mapa de bits. Como si de un papel milimetrado se tratara, cada cuadr\u00edcula intenta representar la informaci\u00f3n de una fotograf\u00eda, dibujo, etc. y recibe el nombre de p\u00edxel. Cada p\u00edxel, a su vez, almacena informaci\u00f3n sobre cuatro canales de color, [&hellip;]<\/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\/692"}],"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=692"}],"version-history":[{"count":2,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/692\/revisions"}],"predecessor-version":[{"id":695,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/692\/revisions\/695"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/media?parent=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}