Imágenes de mapa de bits. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé...

Página 1 de 5

Imágenes de mapa de bits

En esta página se tratan los siguientes temas:
• Imágenes de mapa de bits en una página web
• Formato de imágenes de mapa de bits
• Atributos de img
◦ Atributo src
◦ Atributos alt y title
◦ Atributos width y height
• Imágenes flotantes

Imágenes de mapa de bits en una página web

Las imágenes de mapa de bits se insertan en una página web mediante la etiqueta <img />. Las imágenes no forman
parte del documento (como ocurre en los procesadores de texto), sino que se mantienen como archivos aparte.
Volver al principio de la página

Formato de imágenes de mapa de bits

Los formatos de imágenes de mapa de bits (no vectoriales) más utilizados en Internet son GIF y JPEG, aunque cada vez
está más extendido el formato PNG. Como alternativa a los GIFs animados no tuvo éxito el formato MNG y está por ver
qué ocurre con el formato APNG. Por otro lado, no conviene utilizar el formato BMP de Windows porque los archivos son
muy grandes.

JPEG

El comité JPEG (Joint Photographic Experts Group = Grupo de Unión de Expertos en Fotografía) fue creado en 1982 por
las tres organizaciones de normalización ISO (International Organization for Standardization = Organización Internacional
de Normalización), CCITT (International Telegraph and Telephone Consultative Committee = Comité Consultivo
Internacional de Telegrafía y Telefonía, este comité de la UIT -Unión Internacional de las Telecomunicaciones-
desapareció en 1992) e IEC (International Electrotechnical Commission = Comisión Electrotécnica Internacional) con el
objetivo de definir un algoritmo de compresión que permitiera la transmisión de imágenes reales a través de líneas RDSI.
En 1994 se aprobó finalmente la norma ISO/IEC 10918-1, que definía una familia de algoritmos de compresión (en 1995,
1997 y 1999 se aprobaron respectivamente las partes 2, 3 y 4 de esta norma).
Por problemas entre los organismos de normalización participantes no llegó a definirse un formato de archivo, así que en
la práctica se utilizan unos formatos creados bajo la coordinación de C-Cube Microsystems.
• El formato JFIF (JPEG File Interchange Format = Formato de Intercambio de Archivos JPEG) es el más elemental y
sólo contiene la imagen. Este formato es el que suelen tener las imágenes con extensión JPG.
Este formato fue creado por el Independent JPEG Group y la última versión es la versión JPEG FIF 1.02, publicada
en septiembre de 1992.
• El formato TIFF (Tagged Image File Format) es un formato creado para el manejo de imágenes escaneadas
independientemente del escáner utilizado. Para ello, permite incluir en un único archivo varias imágenes en
diferentes formatos y, mediante etiquetas,información adicional sobre las imágenes.
Este formato fue creado por Aldus y Microsoft, aunque ahora es propiedad de Adobe. La última versión del formato
es la versión TIFF 6.0, publicada en junio de 1992, con suplementos publicados en 1995 y 2002. Adobe mantiene
una página de información sobre este formato.

La práctica totalidad de las fotografías (imágenes con muchos colores) que hay en Internet están en formato JPEG, por
la extraordinaria compresión que consigue (como se puede ajustar el nivel de compresión, al crear el archivo se puede
ajustar la relación tamaño/calidad de la imagen). Además admite también entrelazado (una imagen entrelazada se ve en
el navegador desde que empieza a descargarse, primero con poca calidad, pero cada vez con más detalle a medida que
va llegando). El único inconveniente es que se trata de un formato de compresión con pérdida, por lo que nunca se
puede recuperar la información original, y si una imagen se edita varias veces, la calidad se va degradando cada vez
más.
Para conocer más detalles sobre el formato JPEG, se pueden consultar estas dos FAQ: JPEG FAQ 1 y JPEG FAQ 2.
En el año 2000 se aprobó la norma ISO/IEC 15444-1, una versión más potente del JPG original, conocida como JPEG
2000. Esta norma se actualizó en el año 2004 y se han publicado 10 partes más entre 2003 y 2007, que cubren distintas
aplicaciones del formato. Este formato no se utiliza todavía en la web, posiblemente debido a que algunas partes del
formato JPEG 2000 están sometidas a patentes (declaradas o sin declarar, lo que empeora la situación).
En Firefox, el bug 36.351 (abierto en abril de 2000) está dedicado al soporte de JPEG 2000, pero actualmente -octubre
de 2012- el bug no ha avanzado prácticamente nada.

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_imagenes.html 03/10/2013
Imágenes de mapa de bits. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé... Página 2 de 5
GIF

La especificación del formato GIF87a (Graphics Interchange Format = Formato de Intercambio de Gráficos) fue publicada
por CompuServe en junio de 1987. Una imagen GIF sólo puede tener 256 colores distintos, lo que no la hace
recomendable para las fotografías, pero sí para dibujos. Además, el tamaño de los archivos es pequeño, ya que utiliza el
algoritmo de compresión sin pérdida LZW. El éxito del formato GIF fue inmediato y su uso se extendió por Internet.
CompuServe publicó en julio de 1990 una extensión del formato GIF87a llamada GIF89a, que añadía al formato GIF la
posibilidad de definir transparencia y de crear animaciones (los llamados GIF animados). Los primeros navegadores
(como Mosaic en 1993) soportaban GIF, lo que facilitó su uso masivo en la web.
Pero el algoritmo LZW (LZW son las iniciales de sus inventores, Abraham Lempel, Jakob Ziv y Terry Welch) estaba
patentado desde 1983 por la Sperry Corporation (que en 1986 se había unido a Burroughs para formar Unisys). Parece
ser que CompuServe no comprobó al crear GIF si el algoritmo que iba a utilizar estaba patentado y que Unisys no se
enteró hasta 1993 de que se estaba usando LZW sin su permiso. A partir de ese momento, Unisys reclamó que cualquier
programa que creara imágenes en formato GIF le pagara una licencia. Muchas empresas, entre ellas CompuServe,
llegaron a acuerdos con Unisys, pero inmediatamente se desarrolló el formato PNG, un formato libre para sustituir a GIF.
Las patentes de Unisys que cubren el formato GIF vencieron en junio de 2003 en Estados Unidos y en 2004 en otros
países (Canada, Francia, Italia, Alemania, Reino Unido y Japón) y unas patentes de IBM vencieron en julio de 2006, por
lo que GIF es ahora un formato libre de patentes. En cualquier caso, se recomienda utilizar PNG en lugar de GIF.

PNG

El formato PNG (Portable Network Graphics = Gráficos de Red Portátiles) surgió como alternativa a la reclamación de
Unisys, poseedora de una patente del algoritmo LZW, usado en el formato GIF. La primera versión preliminar fue
propuesta por Thomas Boutell en enero de 1995 y en octubre de 1996 el W3C publicó la recomendación Portable
Network Graphics, editada por Thomas Boutell. En noviembre de 2003 se publicó la recomendación Portable Network
Graphics (PNG): Functional specification (2º edición), editada por David Duce, que se publicó también en 2004 como
norma ISO 15948.
Las ventajas del formato PNG sobre el formato GIF son muchas: se trata de un formato libre, sin pérdida, que consigue
mayor compresión que GIF (alrededor de un 20%), con transparencia alfa (cada pixel puede tener su propio nivel de
transparencia), canal gamma (para ajustar el brillo) y entrelazado.
Sin embargo el formato PNG no ha conseguido desplazar al formato GIF, principalmente porque hasta finales de 2006
Internet Explorer (el navegador más utilizado) no mostraba correctamente las imágenes PNG (concretamente, las
imágenes con transparencia alfa). "Casualmente", una vez vencidas las patentes del formato GIF, Microsoft publicó en
octubre de 2006 Internet Explorer 7, que ya mostraba correctamente los archivos PNG.

MNG

El formato MNG (Multiple-image Network Graphics = Gráficos de Red con Múltiples imágenes) fue creado por algunos de
los autores de PNG a partir de 1996. La especificación MNG 1.0, escrita por Glenn Randers-Pehrson, se aprobó en
enero de 2001, aunque no ha sido apoyada por el W3C. MNG permite crear animaciones a partir de imágenes PNG.
Por motivos que desconozco, el formato MNG tuvo muy poco éxito. Aunque existen algunos programas capaces de crear
y reproducir MNG, su uso no ha dejado nunca de ser marginal. Por ejemplo, en junio de 2003, Mozilla Firefox eliminó el
soporte de MNG que tenía hasta ese momento (se intentó restaurar el soporte, sin ningún éxito).

APNG

Como alternativa a MNG, algunos desarrolladores de Mozilla crearon en 2004 el formato APNG (Animated PNG), que se
puede utilizar en Firefox (desde FF3) y Opera (desde Opera 9.5). En abril de 2007 el grupo de desarrollo del formato
PNG rechazó la propuesta de formato APNG elaborada por Mozilla y actualmente -octubre de 2012- parece que este
formato no tiene ningún futuro. Incluso la página del proyecto APNG, creada en 2008, está actualmente -octubre de
2012- abandonada y sustituida por anuncios relacionados con el tema.
Este es un ejemplo de imagen APNG. Como muestra el segundo ejemplo, entre las ventajas del formato MNG se
encuentra la posiblidad de utilizar el canal de transparencia alfa, lo que permite utilizar fondos con las imágenes.

<img alt="Ejempo de imagen en formato APNG"

src="apng_balon.png" />

<img alt="Ejempo de imagen en formato APNG"

src="apng_balon.png"
style="background-colo: lightblue" />

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_imagenes.html 03/10/2013
Imágenes de mapa de bits. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé... Página 3 de 5
Para probar: extensiones SVG2PNG y APNG Edit.

BMP

El formato BMP (BitMaP = Mapa de Bits) es el formato de imágenes de mapa de bits que utiliza internamente el
subsistema gráfico de Windows (GDI) y que también se suele utilizar para guardar imágenes en Windows. Permite varias
profundidades de color (de 1 a 24 bits por pixels) y transparencia. El formato no comprime las imágenes, por lo que las
imágenes tiene un tamaño muy grande.
Como se trata de un formato bien documentado y libre de patentes, se puede utilizar en cualquier sistema operativo y los
navegadores suelen ser capaces de mostrar imágenes en formato BMP. De todas maneras, conviene no utilizar en
páginas web porque las imágenes no están comprimidas y ocupan mucho espacio.
Volver al principio de la página

Atributos de img
Atributo src

El atributo src contiene el camino absoluto o relativo a la imagen desde la página web. Para que el navegador pueda
mostrar la imagen, el archivo referenciado debe estar disponible. Si los archivos de las páginas web o de las imágenes
se cambian de carpeta o de nombre, hay que actualizar los atributos src para que apunten a la dirección correcta.
Los ejemplos siguientes muestran una dirección absoluta y una relativa en el atributo src.

<img alt="Logotipo del W3C en el sitio web del W3C"

src="http://www.w3.org/Icons/w3c_main.png" />

<img alt="Logotipo del W3C en el sitio web de estos apuntes"

src="../img/otros/w3c_main.png" />

Atributos alt y title

El atributo alt contiene el texto que deben mostrar los navegadores si la imagen no está disponible. El atributo alt es
obligatorio (en el XHTML).
Los ejemplos siguientes muestran qué ocurre cuando la imagen se encuentra disponible y qué ocurre cuando la imagen
no se encuentra disponible.

<img alt="Tux, el pingüino" src="tux.jpg" />

<img alt="Tux, el pingüino" src="tux2.jpg" />

Tux, el pingüino

El atributo title contiene el texto que se muestra en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón
encima de la imagen). El atributo title es optativo.
Los ejemplos siguientes muestran qué ocurre cuando la imagen se encuentra disponible y qué ocurre cuando la imagen
no se encuentra disponible.

<img alt="Este es el atributo alt de una imagen que

tiene los atributos alt y title" title="Este es el

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_imagenes.html 03/10/2013
Imágenes de mapa de bits. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé... Página 4 de 5
atributo title de una imagen que tiene los atributos
alt y title" src="tux.jpg" />

<img alt="Este es el atributo alt de una imagen que

tiene los atributos alt y title" title="Este es el
atributo title de una imagen que tiene los atributos Este es el atributo alt de una imagen que tiene los atributos alt y title
alt y title" src="tux2.jpg" />

Nota: Internet Explorer 8 muestra correctamente esta etiqueta. Las versiones anteriores lo hacían incorrectamente, como
se comenta en la página de diferencias entre IE8 e IE7.

Atributos width y height

Los atributos width y height establecen la anchura y altura de la imagen. Si estos atributos no están definidos, la imagen
se muestra con su tamaño original, pero si los atributos están definidos, la imagen se adapta a esos valores. Los valores
numéricos se interpretan como píxeles.

<img alt="Tux, el pingüino" src="tux.jpg"

width="103" height="122" />

<img alt="Tux, el pingüino" src="tux.jpg"

width="51" height="122" />

<img alt="Tux, el pingüino" src="tux.jpg"

width="103" height="61" />

<img alt="Tux, el pingüino" src="tux.jpg"

width="51" height="61" />

<img alt="Tux, el pingüino" src="tux.jpg"

width="206" height="244" />

Se pueden deformar imágenes para generar líneas horizontales de varios colores a partir de una imagen de 1 píxel de
ancho, como muestra el siguiente ejemplo:

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_imagenes.html 03/10/2013
Imágenes de mapa de bits. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé... Página 5 de 5
<img alt="Arco iris" src="arco_iris.png" />

<img alt="Arco iris" src="arco_iris.png"

width="100%" height="12" />

La principal ventaja de establecer los atributos width y height es que así el navegador no necesita redibujar la página a
medida que van llegando las imágenes. Cuando se recibe una página con imágenes, el texto de la página llega antes
que las imágenes y el navegador no se espera a recibir todas las imágenes para mostrarla en la pantalla. Si no se indica
el tamaño de las imágenes mediante los atributos width y height, el navegador les asigna un tamaño arbitrario pequeño o
muestra el atributo alt. A medida que van llegando las imágenes, el navegador tiene que redibujar la página, lo que
ocasiona dificultades en la lectura porque el texto se va desplazando. Si se indica el tamaño, el navegador reserva el
espacio necesario desde el principio.
El inconveniente de establecer los atributos width y height es que si se cambia la imagen es necesario corregir los
valores en la página web si no quiere verse la imagen deformada.
Volver al principio de la página

Imágenes flotantes
Las imágenes se insertan como elementos en línea, es decir, como un carácter más en un texto. Salvo que
efectivamente se quiera que la imagen aparezca en mitad de una frase, lo normal es querer que la imagen esté a un
lado, con el texto fluyendo en un lado de la imagen. Para ello, se debe utilizar la propiedad float en la hoja de estilo,
como se comenta en el apartado dedicado al posicionamiento flotante de imágenes.
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en
http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 25 de octubre de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_imagenes.html 03/10/2013