mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-26 02:12:15 +00:00
883 lines
22 KiB
HTML
883 lines
22 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<title>Imágenes</title>
|
|
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
|
|
<link type="text/css" href="../nvu2005.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="../multi2.css" type="text/css">
|
|
|
|
<link href="../body.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id="localizador">
|
|
<p>Multimedia>>Imagen</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="multi1b.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="../tablas/tablas3.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li class="activo"><a href="multi1.htm">Conceptos generales</a></li>
|
|
|
|
|
|
<li><a href="multi1b.htm">Formatos gráficos</a></li>
|
|
|
|
|
|
<li><a href="multi1c.htm">Escalar imágenes</a></li>
|
|
|
|
|
|
<li><a href="multi1d.htm">Recortar y rotar</a></li>
|
|
|
|
|
|
<li><a href="multi1e.htm">Insertar imágenes</a></li>
|
|
|
|
|
|
<li><a href="multi1f.htm">Líneas e imagen fantasma</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="principal">
|
|
<p>Uno de los recursos
|
|
más atractivos que ofrece el HTML es que permite incluir
|
|
elementos gráficos y sonoros que enriquecen la
|
|
información.
|
|
Ahora bien, tanto unos como otros suelen emplear bastante tiempo en
|
|
descargarse completamente, por lo que habrá que manejarlos
|
|
con prudencia y recurrir a las técnicas necesarias para
|
|
minimizar su tamaño. </p>
|
|
|
|
|
|
<p>A lo largo de las páginas precedentes han ido
|
|
apareciendo referencias a la inclusión de
|
|
imágenes en las páginas HTML. De hecho podemos
|
|
dar por sabido el procedimiento básico para insertar una
|
|
imagen. Veremos pues el tipo de imágenes que podemos
|
|
utilizar y algún truquillo para acelerar la carga de las
|
|
páginas. </p>
|
|
|
|
|
|
<p>La división en bloques se ha realizado para
|
|
facilitar la navegación y distribuir los contenidos en
|
|
segmentos relacionados:<a name="indice"></a></p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li> <a href="multi1.htm#generales">Conceptos
|
|
generales sobre la imagen</a></li>
|
|
|
|
|
|
<li> <a href="multi1b.htm">Formatos
|
|
gráficos para la WEB</a></li>
|
|
|
|
|
|
<li> <a href="multi1c.htm">Escalar
|
|
imágenes</a></li>
|
|
|
|
|
|
<li><a href="multi1d.htm">Recortar
|
|
imágenes y crear rótulos </a></li>
|
|
|
|
|
|
<li><a href="multi1e.htm"> Insertar
|
|
imágenes con Composer</a></li>
|
|
|
|
|
|
<li> <a href="multi1f.htm">Líneas. El
|
|
truco de la imagen fantasma</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<h3><b><a name="generales"></a>¿Cómo
|
|
se construye la imagen en la pantalla del ordenador?</b></h3>
|
|
|
|
|
|
<p><br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div style="margin: 0pt auto; width: 85%;">
|
|
<p><img class="pixeles" style="width: 104px; height: 187px;" alt="amplación del fragmento anterior" title="amplación del fragmento anterior" src="imagenes/g1amp.png"><img style="width: 82px; height: 73px;" class="pixeles" alt="fragmento de foto de unos guisantes" title="fragmento de foto de unos guisantes" src="imagenes/g1.png">Podríamos
|
|
considerar la
|
|
pantalla del ordenador como
|
|
un panal formado por celdas cuadradas. Cada una de esas celdas
|
|
recibirá una determinada estimulación
|
|
eléctrica de las partículas de fósforo
|
|
que la componen gracias a la cual mostrará uno u otro color
|
|
según las cantidades de rojo, verde y azul que correspondan
|
|
a cada punto. </p>
|
|
|
|
|
|
<p>Si
|
|
ampliamos una zona de la imagen podemos apreciar
|
|
claramente las celdas que la componen. A estas celdillas se
|
|
las denomina píxeles. </p>
|
|
|
|
|
|
<p>Partiendo
|
|
de esta idea básica vamos a ver los
|
|
elementos que condicionan el tipo de imágenes que aparecen
|
|
en nuestra pantalla:
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p><a name="conceptossobreimagen"></a></p>
|
|
|
|
|
|
<div class="indentado25">
|
|
<ul>
|
|
|
|
|
|
<li><a href="multi1.htm#tipos">Tipo de imagen</a>
|
|
</li>
|
|
|
|
|
|
<li><a href="multi1.htm#monitor">Resolución
|
|
del monitor</a> </li>
|
|
|
|
|
|
<li><a href="multi1.htm#resolucion">Resolución
|
|
de la imagen</a> </li>
|
|
|
|
|
|
<li><a href="multi1.htm#profundidad">Profundidad
|
|
de
|
|
color</a> </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p> <br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3><b><a name="tipos"></a>Tipos
|
|
de imagen</b></h3>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<p>A grandes rasgos podríamos dividir las
|
|
imágenes digitales en dos grandes grupos:
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Imágenes <b>vectoriales</b>, en las
|
|
que la información de cada uno de los puntos se recoge en
|
|
forma de ecuación matemática que lo relaciona con
|
|
el resto de los puntos que forman la imagen. Ofrecen la gran ventaja de
|
|
que la calidad de la imagen no varía al modificar el
|
|
tamaño, ya que la información de cada punto no es
|
|
absoluta sino relativa al resto de la imagen. Además, debido
|
|
a su definición matemática apenas ocupa espacio,
|
|
ya que una fórmula que represente su forma es suficiente
|
|
para representar todos los puntos que la componen. Es el tipo adecuado
|
|
para el diseño de línea y figura. El formato
|
|
actualmente sugerido por el <acronym title="World Wide Web Consortium">W3C</acronym> es el
|
|
denominado <acronym title="Scalable Vector Graphics">SVG</acronym>
|
|
pero su implementación en los navegadores es muy irregular y
|
|
no lo contemplaremos por el momento. </li>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<li>Imágenes de <b>mapa de bits o bitmap</b>
|
|
que, tal como nos sugiere su nombre se construyen describiendo cada uno
|
|
de los puntos que componen la imagen y llevan, por tanto,
|
|
información acerca de la posición absoluta y el
|
|
color de cada uno de ellos. Podríamos decir que cada punto
|
|
sería la tesela de un mosaico con sus propias
|
|
características. La ventaja que presenta este formato es la
|
|
posibilidad de recoger una amplísima gama tonal, por lo que
|
|
es el tipo adecuado para representar imágenes captadas de la
|
|
realidad. A cambio, la variación de tamaño
|
|
supondrá modificaciones en la calidad, ya que el
|
|
número de celdas que forman la imagen permanece invariable,
|
|
por lo que un aumento del tamaño hace que el
|
|
único recurso posible sea ampliar el tamaño de
|
|
cada una de ellas. Podemos deducir por lo dicho anteriormente que su
|
|
tamaño es muy grande, ya que aquí sí
|
|
que tenemos información de cada uno de los puntos que forman
|
|
la imagen. Dentro de este tipo se encuentran muchos formatos, algunos
|
|
de los cuales son soportados directamente por los navegadores, siendo
|
|
pues el tipo de imágenes con las que vamos a trabajar en el
|
|
curso.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div style="text-align: right;"></div>
|
|
|
|
|
|
<h3><b><a name="monitor"></a>Resolución
|
|
del monitor</b></h3>
|
|
|
|
|
|
<p>A grandes rasgos la resolución del monitor viene
|
|
determinada por dos variables: </p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>El tamaño de la "celda", al que se denomina <em>pitch
|
|
dot</em> y que, en los monitores actuales, es
|
|
habitualmente de 0,28
|
|
mm. Dado que la imagen que vemos está compuesta por puntos
|
|
adyacentes de diferentes colores, cuanto más
|
|
pequeños sean dichos puntos obtendremos una mayor
|
|
sensación de continuidad. <br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>El número de puntos que es capaz de enviar a la
|
|
pantalla la tarjeta gráfica del ordenador. Este
|
|
parámetro depende de la cantidad de memoria de la que
|
|
disponga la tarjeta para hacer los cálculos necesarios y de
|
|
la propia capacidad de la pantalla para representar la
|
|
información recibida. Cada pareja de tarjetas
|
|
gráfica y monitor es capaz de presentar un rango de
|
|
resoluciones, cuya elección queda a criterio del usuario.
|
|
Actualmente la resolución más habitual es,
|
|
aproximadamente en proporciones similares, de 800
|
|
puntos horizontales por 600 puntos verticales, o 1024x768, aunque con
|
|
tendencia hacia esta última a medida que los
|
|
tamaños de pantalla se hacen mayores y las tarjetas
|
|
gráficas más potentes. </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p>La variación del número de puntos o
|
|
píxeles influirá en el tamaño relativo
|
|
de las imágenes dentro de la pantalla. Si establecemos que
|
|
nuestra pantalla va a ser un mosaico de 800 x 600, una imagen que ocupe
|
|
un rectángulo de 640x480 píxeles que se situara a
|
|
partir del vértice superior izquierdo, dejaría
|
|
libre una franja a su derecha y otra en la parte inferior. Si
|
|
pretendemos mostrar esa misma imagen en una pantalla con una
|
|
resolución de 640x480 la llenará por completo. La
|
|
imagen no ha variado de tamaño, lo que se ha modificado es
|
|
el tamaño de cada una de las "baldosas" que componen el
|
|
mosaico. </p>
|
|
|
|
|
|
<div style="text-align: right;"></div>
|
|
|
|
|
|
|
|
|
|
<h3><a name="resolucion"></a><b>Resolución
|
|
de la imagen</b></h3>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<p>Es un concepto relacionado con el anterior y tiene una
|
|
importante repercusión a la hora de adecuar las
|
|
imágenes a la pantalla para que su transmisión
|
|
sea lo más rápida posible. Recurriremos a un
|
|
ejemplo práctico para explicarlo. </p>
|
|
|
|
|
|
<p>Supongamos que disponemos de un escáner para
|
|
capturar una imagen. Introducimos sobre la bandeja una foto cuyo
|
|
tamaño es de 10 x 15 cm (aproximadamente unas 4 x 6
|
|
pulgadas). </p>
|
|
|
|
|
|
<p>Inicio el trabajo de captura y, como mi escáner me
|
|
lo permite, capturo la imagen a 300 puntos por pulgada. Eso quiere
|
|
decir que por cada pulgada real de foto, el dispositivo
|
|
óptico del escáner se encargará de
|
|
pintar 300 puntos en la imagen electrónica. Un simple
|
|
cálculo me hace darme cuenta de que mi imagen
|
|
formará un rectángulo de 1200 x 1800
|
|
píxeles una vez escaneada, ya que la imagen original era de
|
|
4 x 6 pulgadas.
|
|
</p>
|
|
|
|
|
|
<p>¿Cabrá la imagen en la pantalla?
|
|
Está claro que no, porque lo más
|
|
lógico es que mi pantalla esté configurada para
|
|
mostrar 800 puntos de anchura y 600 de altura o 1024 x 768
|
|
que es bastante menos de
|
|
lo que necesitamos.
|
|
</p>
|
|
|
|
|
|
<p>Entonces, ¿cuál será la
|
|
resolución adecuada para mostrar una imagen en pantalla de
|
|
forma que su tamaño corresponda aproximadamente con el
|
|
original en papel? Para responder a esta pregunta vamos a recurrir a
|
|
una simple demostración aplicando el teorema de
|
|
Pitágoras. </p>
|
|
|
|
|
|
<p>Vamos a tomar como referencia un monitor de 14". Eso quiere
|
|
decir que la diagonal del mismo medirá 14". </p>
|
|
|
|
|
|
<p>La proporción que existe entre el ancho y el alto
|
|
de la pantalla es de 4 : 3, por lo que podemos decir que la anchura
|
|
física de la pantalla es de 4x" y su altura de 3x". </p>
|
|
|
|
|
|
<p>Con esos datos tenemos la información
|
|
necesaria para poder aplicar el teorema de Pitágoras ya que
|
|
conocemos la medida de la hipotenusa y hemos podido establecer la
|
|
proporción entre los catetos.</p>
|
|
|
|
|
|
<p><img class="flotizq" style="width: 312px; height: 232px; float: left;" alt="Teorema de Pitágoras para calcular la resolución adecuada" title="Teorema de Pitágoras para calcular la resolución adecuada" src="imagenes/resolucion1.png"></p>
|
|
|
|
|
|
<p>Así pues nos
|
|
bastará con despejar el valor de la x. </p>
|
|
|
|
|
|
<p><big><big><big>h<sup>2</sup> =
|
|
C<sup>2</sup> + c<sup>2 <br>
|
|
|
|
|
|
</sup>14<sup>2</sup> = (4x)<sup>2</sup>
|
|
+ (3x)<sup>2 </sup><br>
|
|
|
|
|
|
196 = 16x<sup>2</sup> + 9x<sup>2</sup> <br>
|
|
|
|
|
|
196 / 25 = x</big></big></big><sup><big><big><big>2</big></big></big><br>
|
|
|
|
|
|
</sup><img style="width: 174px; height: 39px;" alt="Resultado de la ecuación = 2,8"" title="Resultado de la ecuación = 2,8"" src="imagenes/ecuacion.png"><br clear="all">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>Una vez comprobado que x=2,8 podemos fijar las medidas de
|
|
ancho y alto de la pantalla que quedarían en 11,2 " y 8,4"
|
|
respectivamente.</p>
|
|
|
|
|
|
<p>Tomemos ahora, por ejemplo, el ancho de la pantalla. Si la
|
|
resolución está fijada a 800x600,
|
|
¿cuántos píxeles se nos
|
|
mostrarán en cada pulgada de pantalla?. Como ya sabemos que
|
|
el ancho es de 11, 2" basta con una simple división para que
|
|
nos resulte <strong>800 : 11,2 = 71,428 píxeles por
|
|
pulgada (ppp). </strong>Dado que el ancho que hemos calculado es
|
|
teórico y es algo más grande que la realidad, se
|
|
opta por redondear ese resultado a 72 ppp que será una cifra
|
|
que encontrarás en multitud de programas como
|
|
resolución estándar para la pantalla. El mismo
|
|
resultado habríamos obtenido en caso de haber hecho el
|
|
cálculo sobre la altura de la pantalla.</p>
|
|
|
|
|
|
<p>A continuación se muestra una tabla resumen sobre
|
|
las resoluciones ppp aplicables para que la imagen en pantalla coincida
|
|
con el tamaño original en papel.</p>
|
|
|
|
|
|
<div style="text-align: center;">
|
|
<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="3">
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th style="text-align: center; width: 137px;" colspan="2" rowspan="2"> <big><big><big><big>ppp</big></big></big></big>
|
|
</th>
|
|
|
|
|
|
<th style="text-align: center; background-color: rgb(51, 102, 153); color: rgb(255, 165, 69); width: 130px;" colspan="3">Resolución
|
|
de pantalla </th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th style="background-color: rgb(51, 102, 153); text-align: center; width: 80px;">
|
|
<strong><font color="#ffffff">640 x 480</font></strong>
|
|
</th>
|
|
|
|
|
|
<th style="background-color: rgb(51, 102, 153); text-align: center; width: 80px;">
|
|
<strong><font color="#ffffff">800 x 600</font></strong>
|
|
</th>
|
|
|
|
|
|
<th style="background-color: rgb(51, 102, 153); text-align: center; width: 80px;">
|
|
<strong><font color="#ffffff">1024 x 768</font></strong>
|
|
</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="width: 106px;" rowspan="3" bgcolor="#336699">
|
|
|
|
<div style="width: 126px;" align="center"><strong><font color="#ffa545">Tamaño físico</font></strong></div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center; width: 45px;" bgcolor="#336699"> <strong><font color="#ffffff">14
|
|
"</font></strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>57</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>72</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>92</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center; width: 45px;" bgcolor="#336699"> <strong><font color="#ffffff">15"</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>54</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>67</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>86</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center; width: 45px;" bgcolor="#336699"> <strong><font color="#ffffff">17"</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>47</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>60</strong> </td>
|
|
|
|
|
|
<td style="text-align: center; width: 80px;" bgcolor="#c6ecff"> <strong>75</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div style="text-align: right;"></div>
|
|
|
|
|
|
|
|
|
|
<h3><a name="profundidad" id="profundidad"></a><b>Profundidad
|
|
de color</b></h3>
|
|
|
|
|
|
<p></p>
|
|
|
|
|
|
<p><img class="flotder" style="width: 182px; height: 280px;" alt="Imagen en b/n de 1 bit" title="Imagen en b/n de 1 bit" src="imagenes/profundidad1.png" hspace="10">Un bit es
|
|
la unidad mínima de información digital. Se trata
|
|
de una magnitud binaria que puede reflejar dos valores: 0 o 1. Si
|
|
creamos una imagen con dos colores bastará con un
|
|
sólo bit por cada píxel para indicar el color que
|
|
habrá que aplicar.</p>
|
|
|
|
|
|
<p>Si dibujáramos la letra T utilizando
|
|
únicamente dos colores, blanco para el fondo y negro para el
|
|
primer plano, el mapa que se formaría sería
|
|
similar al que se muestra en la imagen de la derecha, en el que cada
|
|
uno de los puntos que forma la imagen podría representarse
|
|
con un solo bit, ya que un cero nos indicaría que el
|
|
píxel es del color del
|
|
fondo y un uno marcaría que hay que colorear el
|
|
píxel con el color del primer plano.</p>
|
|
|
|
|
|
<p>Si en lugar de un bit utilizáramos dos para indicar
|
|
el color de cada píxel pasaríamos de tener como
|
|
valores posibles el 0 y el 1 a disponer de los valores 00, 01, 10 y 11,
|
|
esto es cuatro posibles colores.</p>
|
|
|
|
|
|
<p>Si reconsideramos por un instante el hecho de que la
|
|
información digital se basa en un sistema binario nos
|
|
daremos cuenta de que podríamos calcular
|
|
fácilmente el número de colores posibles
|
|
según la cantidad de bits que utilicemos para indicar el
|
|
número de colores posibles en cada píxel. Tomando
|
|
el 2 como base y aplicándole el número de bits
|
|
como exponente obtendremos el número de colores que se logra
|
|
en cada caso. A esto es a lo que llamaremos profundidad de color y
|
|
puede sintetizarse en la siguiente tabla:<br clear="all">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div style="text-align: center;">
|
|
<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="5" width="400">
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" colspan="2"> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699" width="145"> <strong><font color="#ffa545">Valores
|
|
</font></strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699" width="138"> <strong><font color="#ffa545">Número
|
|
de colores</font></strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" rowspan="8" bgcolor="#336699" width="38"> <strong><font color="#ffa545">bits</font></strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699" width="37"> <strong><font color="#ffa545">1</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>0, 1</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>1</sup>
|
|
= 2</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">2</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>00, 01, 10, 11</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>2</sup>
|
|
= 4</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">3</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>000, <font color="#ff0000">001</font>,<font color="#00ff00">
|
|
010</font>, <font color="#ffff00">011</font>,<br>
|
|
|
|
|
|
<font color="#0000ff">100</font>, <font color="#ff00ff">101</font>, <font color="#00ffff">110</font>,
|
|
<font color="#ffffff"><span class="negrofondo">111</span></font>
|
|
</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>3</sup>
|
|
= 8</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">4</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>0000,<br>
|
|
|
|
|
|
... ,<br>
|
|
|
|
|
|
1111 </strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>4</sup>
|
|
= 16</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">5</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>00000,<br>
|
|
|
|
|
|
... , <br>
|
|
|
|
|
|
11111</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>5</sup>
|
|
= 32</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">6</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>000000,<br>
|
|
|
|
|
|
... ,<br>
|
|
|
|
|
|
111111</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>6</sup>
|
|
= 64</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">7</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>0000000,<br>
|
|
|
|
|
|
... ,<br>
|
|
|
|
|
|
1111111</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>7</sup>
|
|
= 128</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#336699">
|
|
<strong><font color="#ffa545">8</font></strong>
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>00000000,<br>
|
|
|
|
|
|
... ,<br>
|
|
|
|
|
|
11111111</strong> </td>
|
|
|
|
|
|
<td style="text-align: center;" bgcolor="#c6ecff">
|
|
<strong>2<sup>8</sup>
|
|
= 256</strong> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<p class="avisos"><img src="../imagenes/atencion.gif" hspace="5">Es probable que te preguntes por qué
|
|
no hemos completado la tabla si hemos hablado de imágenes de
|
|
16 millones de colores. De alguna forma tienes razón puesto
|
|
que se trata de imágenes de 24 bits, pero se trata realmente
|
|
de la combinación de tres imágenes de 8 bits
|
|
correspondientes a los colores básicos. Si combinamos 256
|
|
posibles tonos de rojo con otros tantos de verde y los mismos de azul
|
|
conseguiremos un total de 256<sup>3</sup> = 16777216
|
|
colores que es, lógicamente el mismo resultado que
|
|
obtendríamos si calculáramos 2<sup>24</sup>
|
|
= 16777216<br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="avisos"><img src="../imagenes/atencion.gif" hspace="5">Si lees con atención este apartado es
|
|
posible que deduzcas que un aumento de la profundidad de color
|
|
llevará aparejado un aumento del tamaño de la
|
|
imagen. Si tomamos en cuenta la cantidad de memoria requerida para
|
|
construir la imagen es correcta la deducción, pero no
|
|
podemos aplicarlo cuando se trata de considerar el tamaño de
|
|
almacenamiento del archivo. Para guardar una imagen se aplican,
|
|
según el tipo de archivo que utilicemos, algoritmos de
|
|
compresión que reducen considerablemente la cantidad de bits
|
|
almacenados.</p>
|
|
|
|
|
|
<div class="flotder"></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|