mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
462 lines
16 KiB
HTML
462 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html>
|
|
<head>
|
|
<title>Formatos gráficos para la WEB</title>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
<!-- 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="multi1c.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="multi1.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
<li><a href="multi1.htm">Conceptos
|
|
generales</a></li>
|
|
|
|
<li class="activo"><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">
|
|
<h2>Formatos gráficos
|
|
para la WEB</h2>
|
|
|
|
<p> Ya hemos comentado que, hasta el momento, los navegadores WEB
|
|
soportan de forma directa algunos formatos de ficheros de mapa de bits.
|
|
También empiezan a ser capaces de interpretar otro tipo de
|
|
archivos, tanto de mapa de bits como vectoriales, pero para ello
|
|
necesitan que se incorporen a los navegadores algún tipo
|
|
añadido (los denominados <i>plugins</i>).</p>
|
|
|
|
<p>Si el objetivo de nuestras páginas WEB es comunicar
|
|
información y que ésta llegue a los visitantes
|
|
puede ser un riesgo incluir formatos gráficos no
|
|
estandarizados. Si lo hacemos así obligaremos al navegante a
|
|
realizar la descarga de los <i>plugins</i> necesarios para
|
|
su visualización y es posible que lo perdamos y no logremos
|
|
el objetivo principal de transmitir la información.</p>
|
|
|
|
<p> Cuando el destino de nuestras páginas es una red
|
|
del centro organizada en forma de Intranet la situación
|
|
varía ya que puede ser más sencillo configurar
|
|
los equipos de forma que tengan los <em>plugins</em>
|
|
disponibles.</p>
|
|
|
|
<p> Teniendo en cuenta estas consideraciones nos centraremos en
|
|
los formatos gráficos que comúnmente soportan los
|
|
navegadores. Estos son los archivos con extensión <acronym title="Graphics Interchange Format">GIF</acronym> y
|
|
<acronym title="Joint Photographic Experts Group">JPEG/JPG</acronym>.
|
|
Existe un tercer tipo de archivo con extensión <acronym title="Portable Network Graphics">PNG</acronym>
|
|
que no es soportado por las versiones más antiguas de los
|
|
navegadores.</p>
|
|
|
|
<p>La primera puntualización que debemos hacer
|
|
respecto a las características de ambos formatos es que,
|
|
mientras el formato <acronym title="Graphics Interchange Format">GIF</acronym>
|
|
solo
|
|
soporta 256 colores, el
|
|
<acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
puede presentar 16,7 millones. (Podemos encontrar archivos con
|
|
extensión <acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
o <acronym title="Joint Photographic Experts Group">JPG</acronym>
|
|
indistintamente: se trata del mismo
|
|
tipo). Por su parte, el formato <acronym title="Portable Network Graphics">PNG</acronym> puede
|
|
servir para guardar imágenes indexadas con paletas de 256
|
|
colores o
|
|
bien para
|
|
imágenes de color real con 16,7 millones.</p>
|
|
|
|
<p>Encontrarás archivos <acronym title="Graphics Interchange Format">GIF</acronym>
|
|
del
|
|
tipo 87 y del tipo
|
|
89a. Dichos números se refieren al año en el que
|
|
se establecieron las especificaciones del formato.</p>
|
|
|
|
<p>Tanto <acronym title="Graphics Interchange Format">GIF</acronym>
|
|
como <acronym title="Joint Photographic Experts Group">JPG</acronym>
|
|
incorporan algoritmos de
|
|
compresión que hacen que los archivos de imagen no sean tan
|
|
grandes como deberían ser si se almacenaran con toda la
|
|
información para reproducir la imagen con su calidad
|
|
máxima. Dependiendo de los algoritmos de
|
|
compresión cada uno de los formatos se adapta mejor a un
|
|
tipo de imágenes como podemos comprobar a través
|
|
de los siguientes ejemplos.</p>
|
|
|
|
<p>Una anotación a tener en cuenta es que la
|
|
especificación <acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
está compuesta por un total
|
|
de 29 filtros de compresión. Debido a ello habrá
|
|
programas que conseguirán reducir el tamaño
|
|
más que otros, puesto que aplican una mayor cantidad de
|
|
filtros o bien, aplicando una menor cantidad, utilizan una
|
|
combinación de los mismos que permiten reducir el
|
|
tamaño con mayor efectividad.</p>
|
|
|
|
<div class="centrado">
|
|
<table style="" border="0" cellspacing="10">
|
|
|
|
<tbody>
|
|
|
|
<tr bgcolor="#6699ff">
|
|
|
|
<td>
|
|
<p class="blanco">JPEG
|
|
- 7,5 KBytes</p>
|
|
|
|
</td>
|
|
|
|
<td align="center">
|
|
<p class="blanco">GIF
|
|
- 19,9 KBytes</p>
|
|
|
|
</td>
|
|
|
|
<td align="center">
|
|
<p class="blanco">PNG
|
|
- 41 KBbytes</p>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 179px; height: 134px;" alt="amapola" title="amapola" src="imagenes/amapola.jpg"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 179px; height: 134px;" alt="amapola" title="amapola" src="imagenes/amapola.gif"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 179px; height: 134px;" alt="amapola" title="amapola" src="imagenes/amapola.png"></div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<p> Para imágenes de origen fotográfico la
|
|
compresión del formato <acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
ofrece resultados superiores al tratar zonas con matices de forma que
|
|
se presente una
|
|
variación tonal continua. Además, se obtiene un
|
|
tamaño menor, mientras que el <acronym title="Graphics Interchange Format">GIF</acronym>
|
|
reduce sensiblemente la calidad, incluso utilizando procedimientos de
|
|
optimización
|
|
de la paleta de color, ya que se ve obligado a reducir la gama tonal
|
|
para ajustarla a una paleta con sólo 256 colores. Lo que
|
|
acabamos de comentar se comprueba fácilmente en el ejemplo
|
|
precedente donde, con una calidad mucho menor, el archivo guardado en
|
|
formato <acronym title="Graphics Interchange Format">GIF</acronym>
|
|
ocupa más que el guardado como JPG. La calidad
|
|
ofrecida por el archivo <acronym title="Portable Network Graphics">PNG</acronym>
|
|
parece similar a la del <acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
pero con un tamaño varias veces superior.</p>
|
|
|
|
<p>Veremos a continuación otros tres ejemplos de
|
|
fragmentos de una imagen en los que se pueden apreciar con
|
|
más detalle los efectos producidos por una u otra forma de
|
|
almacenar la imagen</p>
|
|
|
|
<div class="centrado">
|
|
<table style="" border="0" cellspacing="10">
|
|
|
|
<tbody>
|
|
|
|
<tr bgcolor="#6699ff">
|
|
|
|
<td>
|
|
<p class="blanco">JPEG
|
|
- 5,7 KB</p>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<p class="blanco">GIF
|
|
- 11,3 KB</p>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<p class="blanco">PNG
|
|
- 42,7 KB</p>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 200px; height: 200px;" alt="fragmento de imagen jpg" title="fragmento de imagen jpg" src="imagenes/fachada2.jpg"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 200px; height: 200px;" alt="fragmento de imagen gif" title="fragmento de imagen gif" src="imagenes/fachada2.gif"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"> <img style="border: 1px solid ; width: 200px; height: 200px;" alt="fragmento de imagen png" title="fragmento de imagen png" src="imagenes/fachada2.png"></div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<p><img class="flotder" style="width: 201px; height: 257px;" alt="Miniatura de la imagen original de la que se extrajeron los fragmentos" title="Miniatura de la imagen original de la que se extrajeron los fragmentos" src="imagenes/fachada.jpg" align="top" hspace="10">Parece
|
|
claro que la mejor calidad la ofrece la imagen en
|
|
formato <acronym title="Portable Network Graphics">PNG</acronym>.
|
|
Sin embargo, cuando se trata de imágenes de
|
|
color real puede ocurrir que su tamaño, el llamado "peso" de
|
|
la imagen, haga desaconsejable su utilización.</p>
|
|
|
|
<p>Para comprender el motivo de la anterior
|
|
afirmación basta comprobar que la imagen original de la que
|
|
se han obtenido las ampliaciones, almacenada en formato JPG
|
|
tenía la apariencia que se muestra a continuación
|
|
y ocupaba un total de 14 KB.</p>
|
|
|
|
<p>Cabría pues hacerse la pregunta de si la
|
|
situación es similar cuando se trata de imágenes
|
|
creadas en el ordenador con una profundidad de color máxima
|
|
de 8 bits (256 colores).</p>
|
|
|
|
<p>En este caso la situación parece ser
|
|
diferente y nos lleva a considerar la posibilidad de utilizar el
|
|
formato <acronym title="Portable Network Graphics">PNG</acronym>
|
|
en lugar del <acronym title="Graphics Interchange Format">GIF</acronym>.
|
|
Comprobemos lo que ocurre teniendo en
|
|
cuenta calidad y peso de la imagen en los siguientes ejemplos:</p>
|
|
|
|
<div class="centrado">
|
|
<table border="0" cellspacing="10">
|
|
|
|
<tbody>
|
|
|
|
<tr bgcolor="#6699ff">
|
|
|
|
<td align="center">
|
|
<p class="blanco">JPEG
|
|
- 7500 bytes</p>
|
|
|
|
</td>
|
|
|
|
<td align="center">
|
|
<p class="blanco">GIF
|
|
- 39<span class="blanco">0</span>9 bytes </p>
|
|
|
|
</td>
|
|
|
|
<td align="center">
|
|
<p class="blanco">PNG
|
|
- 3030 bytes</p>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen jpg con colores planos" title="Imagen jpg con colores planos" src="imagenes/colorplano.jpg"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen gif con colores planos" title="Imagen gif con colores planos" src="imagenes/colorplano.gif"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen png con colores planos" title="Imagen png con colores planos" src="imagenes/colorplano.png"></div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<p> Lo primero que comprobamos es que, para imágenes
|
|
de colores planos con una profundidad máxima de 8 bits, la
|
|
compresión <acronym title="Joint Photographic Experts Group">JPEG</acronym>
|
|
produce una apreciable pérdida de calidad de la imagen
|
|
mostrada en
|
|
pantalla y, además, el
|
|
tamaño del archivo es considerablemente superior. Sin
|
|
embargo no existe diferencia de calidad entre los formatos <acronym title="Graphics Interchange Format">GIF</acronym> y
|
|
<acronym title="Portable Network Graphics">PNG</acronym>,
|
|
obteniéndose con este último una
|
|
reducción del tamaño que puede oscilar en torno
|
|
al 15 o 20%. </p>
|
|
|
|
<p>Si utilizamos <acronym title="Portable Network Graphics">PNG</acronym>
|
|
o <acronym title="Graphics Interchange Format">GIF</acronym>(en
|
|
la versión 89a)
|
|
podremos obtener colores transparentes con un ligerísimo
|
|
aumento de tamaño del archivo. La imagen del ejemplo
|
|
anterior se mostraría tal como puede verse a
|
|
continuación:</p>
|
|
|
|
<div style="width: 433px;" class="flotizq">
|
|
<table border="0" cellspacing="10">
|
|
|
|
<tbody>
|
|
|
|
<tr bgcolor="#6699ff">
|
|
|
|
<td>
|
|
<p class="blanco">GIF - 3917 bytes</p>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<p class="blanco">PNG - 3043 bytes</p>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<p class="blanco">PNG - 16M colores</p>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen en color plano con fondo transparente" title="Imagen en color plano con fondo transparente" src="imagenes/colorplanofondotransparente.gif"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen en color plano con fondo transparente" title="Imagen en color plano con fondo transparente" src="imagenes/colorplanofondotransparente.png"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<div class="centrado"><img style="border: 1px solid ; width: 131px; height: 148px;" alt="Imagen png de 24 bits con fondo transparente" title="Imagen png de 24 bits con fondo transparente" src="imagenes/colorplanotransparente16m.png"></div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<p>Un detalle
|
|
importante que hay que tener en cuenta es el desigual soporte
|
|
para las imágenes <acronym title="Portable Network Graphics">PNG</acronym>
|
|
con
|
|
transparencia, puesto que Internet Explorer 6 no soporta la
|
|
transparencia cuando la imagen es de 24 bits. </p>
|
|
|
|
<p>Si estás viendo esta página con Mozilla,
|
|
Firefox u Ópera verás la imagen rotulada <em>"PNG
|
|
- 16 M colores" </em>igual que la que lleva el
|
|
rótulo <em>"PNG - 3043 bytes"</em> que es la
|
|
misma imagen pero almacenada con una paleta de 256 colores. Sin
|
|
embargo, si estas viendo la página con Internet Explorer, la
|
|
imagen de 16 millones de colores no tendrá el
|
|
fondo transparente sino de un color grisáceo.</p>
|
|
|
|
<p>El formato <acronym title="Graphics Interchange Format">GIF</acronym>,
|
|
en su versión 89a, permite la
|
|
creación de animaciones presentando de forma consecutiva
|
|
varios archivos <acronym title="Graphics Interchange Format">GIF</acronym>,
|
|
cosa que no es posible con el <acronym title="Portable Network Graphics">PNG</acronym>. De
|
|
todas maneras se está desarrollando un formato denominado <acronym title="Multiple-image Network Graphics">MNG</acronym>
|
|
que sí lo permitirá y que será,
|
|
también, de libre utilización aunque su soporte
|
|
entre los navegadores es aún mínimo.</p>
|
|
|
|
<p>Optar entre uno u otro formato puede ser difícil en
|
|
algunos momentos...y para mayor complicación hay que tener
|
|
en cuenta que, para ahorrar recursos del sistema, mucha gente utiliza
|
|
la presentación en pantalla con una profundidad de color de
|
|
8 bits (256 colores), con lo que nuestras maravillosas
|
|
imágenes de millones de colores pueden quedar bastante
|
|
desvirtuadas si no lo hemos avisado previamente. </p>
|
|
|
|
<p>Es importante que las imágenes que incluyamos en
|
|
nuestras páginas lleven el atributo de tamaño, ya
|
|
que de esta forma el navegador sabrá el espacio que debe
|
|
adjudicarle a
|
|
la
|
|
imagen y podrá ir cargando el resto del texto. Si la imagen
|
|
no llevara los atributos de ancho y alto la carga del resto del
|
|
documento se detendría hasta que la imagen se hubiera
|
|
recibido completamente.</p>
|
|
|
|
<p>Con respecto a las modificaciones del tamaño
|
|
original no tienen una especial utilidad: si agrandamos la imagen
|
|
perdemos calidad y si la empequeñecemos no disminuimos el
|
|
tamaño del fichero, que se sigue descargando
|
|
íntegro, sino que le indicamos al navegador que ajuste la
|
|
imagen al tamaño especificado. Si queremos presentar un
|
|
icono que sirva de enlace para poder ver una imagen de gran
|
|
tamaño es preferible que editemos la imagen original y
|
|
construyamos una versión reducida de la misma, ya que de esa
|
|
forma sí que modificamos el espacio que ocupa y aceleramos
|
|
la descarga.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|