Imágenes

Introducción: imágenes de mapa de bits e imágenes vectoriales

En informática se distinguen dos tipos de imágenes:

Las imágenes de mapa de bits están formadas por puntos de colores, mientras que las imágenes vectoriales están formadas por formas geométricas. Cada formato tiene sus ventajas e inconvenientes:

Formatos de imágenes

El formato de imágenes vectoriales más utilizado es SVG.

Existen numeros formatos de mapa de bits, enfocados a diferentes tipos de imagen:

En los últimos años se han desarrollado otros formatos de mapa de bits que mejoran los formatos anteriores, pero que todavía no cuentan con el consenso necesario para sustituirlos. Por ejemplo, JPEG XR de Microsoft, WebP de Google Can I use, BPG de Fabrice Bellard (artículo en lwn.net de diciembre de 2014), etc.

En su momento se desarrollaron otros formatos de mapa de bits que no han tenido ningún éxito. Por ejemplo, MNG o APNG para imágenes animadas, etc.

SVG

SVG (Scalable Vector Graphics = Gráficos Vectoriales Escalables) es un lenguaje de marcas creado por el W3C y dirigido a la representación de gráficos vectoriales (dibujos y texto).

En la lección sobre Historia de la Web) se comentan las recomendaciones de SVG publicadas o en preparación por el W3C.

En un gráfico vectorial, los elementos de la imagen están definidos como formas elementales (líneas, rectángulos, círculos, curvas, polígonos, etc.), definidas mediante etiquetas simlares a las del HTML. Por ello SVG no es un formato adecuada para fotografías, pero es idóneo para cualquier tipo de dibujo, técnico o artístico.

Un gráfico SVG puede incluirse en una página web de dos maneras, como objeto interno o como objeto externo.

Desgraciadamente, el uso de SVG no está todo lo extendido que debería, entre otros motivos porque las implementaciones de las recomendaciones todavía son incompletas, pero sobre todo porque Internet Explorer no fue capaz de mostrar gráficos SVG hasta IE 9. Pero SVG se va imponiendo poco a poco como formato estándar de gráficos vectoriales frente a otros formatos propietarios y numerosos programas de edición de gráficos son capaces de importar y exportar en formato SVG.

En las lecciones SVG, Formas básicas SVG y Formas avanzadas SVG se comenta con más detalle el uso de SVG.

JPG o JEPG

El nombre oficial de este formato es JPEG, pero se le suele llamar JPG (seguramente por que la extensión de estos archivos es .jpg).

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.

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 JPEG original, conocida como JPEG 2000. Esta norma se actualizó en el año 2004 y se publicaron 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 -noviembre de 2016- el bug no ha avanzado nada.

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 el W3C 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.

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.

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 se pudo utilizar en Opera (desde Opera 9.5, publicado en 2008, hasta Opera 14, publicado en 2013). En abril de 2007 el grupo de desarrollo del formato PNG rechazó la propuesta de formato APNG elaborada por Mozilla y desde entonces este formato no ha avanzado demasiado. El navegador Opera dejó de admitir el formato al pasar a usar Blink en 2013. El único avance significativo es que el navegador Safari admite PNG desde Safari 8, publicado en 2014. La página del proyecto APNG, creada en 2008 y que se abandonó en 2014, vuelve actualmente (noviembre de 2016) a mostrar información sobre el formato.

Este es un ejemplo de imagen APNG. Como muestra el segundo ejemplo, entre las ventajas del formato APNG se encuentra la posiblidad de utilizar el canal de transparencia alfa, lo que permite utilizar fondos con las imágenes.

Incorrecto en Chrome
Correcto en Firefox
Incorrecto en Internet Explorer
<img alt="Ejempo de imagen en formato APNG" src="apng_balon.png" />
Ejempo de imagen en formato APNG
Incorrecto en Chrome
Correcto en Firefox
Incorrecto en Internet Explorer
<img alt="Ejempo de imagen en formato APNG" src="apng_balon.png"
     style="background-color: lightblue" />
Ejempo de imagen en formato APNG

Nota: Ni Internet Explorer ni Chrome muestran las imágenes APNG en movimiento, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

Para probar: extensiones SVG2PNG y APNG Edit.

La etiqueta <img />

La etiqueta <img /> permite mostrar imágenes vectoriales o de mapa de bits en una página web. Las imágenes no forman parte del documento, sino que se mantienen como archivos aparte.

Los ejemplos siguientes muestran la imagen de una estrella, como imagen vectorial (SVG) o como imagen de mapa de bits (PNG).

<img src="../img/svg/estrella.svg" alt="estrella" >
<img src="../img/svg/estrella.png" alt="estrella" >
estrellaestrella

Atributos de <img />

El atributo src de <img />

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="https://www.w3.org/Icons/w3c_main.png" />
Logotipo del W3C en el sitio web del W3C
<img alt="Logotipo del W3C en el sitio web de mclibre"
     src="../img/otros/w3c_main.png" />
Logotipo del W3C en el sitio web de mclibre

El atributo alt de <img />

El atributo alt contiene el texto que deben mostrar los navegadores si la imagen no está disponible. El atributo alt no es obligatorio en HTML (sí lo es en XHTML), pero se recomienda incluirlo siempre, aunque sea con un valor vacío.

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" />
Este es el atributo alt de una imagen que sólo tiene atributo alt
<img alt="Tux, el pingüino" src="tux2.jpg" />
Tux, el pingüino

El atributo title de <img />

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 atributo title de una imagen que tiene los atributos alt y title" src="tux.jpg" />
Este es el atributo alt de una imagen que tiene los atributos alt y title
<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 alt y title" src="tux2.jpg" />
Este es el atributo alt de una imagen que tiene los atributos alt y title

Los atributos width y height de <img />

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.

Es conveniente establecer los atributos width y height para que el navegador sepa el tamaño de las imágenes antes de recibirlas y reserve el espacio necesario en la página. Cuando se abre una página web, el navegador recibe primero el fichero html y después pide las hojas de estilo css y las imágenes. En cuanto llegan las hojas de estilo y antes de que terminen de llegar las imágenes, los navegadores ya muestran la página. Si el navegador no sabe qué tamaño ocupan las imágenes y no ha podido reservar el espacio necesario, a medida que van llegando las imágenes el navegador debe redibujar la página, desplazando el texto, lo que resulta molesto para su lectura. pero si el navegador sabe qué tamaño ocupan las imágenes, a medida que van llegando las imágenes simplemente se van completando los huecos.

Lógicamente, si se establecen los atributos width y height y posteriormente se cambia el archivo de la imagen por otra de diferente tamaño, es necesario corregir los valores en la página web si no quiere verse la imagen deformada.

<img src="../img/svg/estrella.svg" alt="estrella" >
<img src="../img/svg/estrella.png" alt="estrella" >
estrellaestrella
<img src="../img/svg/estrella.svg" alt="estrella"
  width="170" height="165" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="170" height="165" />
estrella estrella

Si los valores no son proporcionales a la imagen original, esta se deforma.

<img src="../img/svg/estrella.svg" alt="estrella"
  width="85" height="165" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="85" height="165" />
estrella estrella
<img src="../img/svg/estrella.svg" alt="estrella"
  width="170" height="82" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="170" height="82" />
estrella estrella

Si los valores son proporcionales a la imagen original, la imagen se amplia o reduce. Al ampliar la imagen, se puede observar cómo la imagen SVG conserva la calidad, mientras que la imagen de mapa de bits pierde calidad.

<img src="../img/svg/estrella.svg" alt="estrella"
  width="85" height="82" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="85" height="82" />
estrella estrella
<img src="../img/svg/estrella.svg" alt="estrella"
  width="340" height="330" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="340" height="330" />
estrella estrella

Si sólo se establece un atributo, la imagen se amplia o reducede forma proporcional.

<img src="../img/svg/estrella.svg" alt="estrella"
  width="85" />
<img src="../img/svg/estrella.png" alt="estrella"
  width="85" />
estrella estrella
<img src="../img/svg/estrella.svg" alt="estrella"
  height="82" />
<img src="../img/svg/estrella.png" alt="estrella"
  height="82" />
estrella estrella

En HTML 4 / XHTML 1 los atributos width y height se podían expresar en porcentajes, como se comenta en la lección sobre elementos obsoletos, pero en HTML 5 no está permitido.

La etiqueta <svg>

La etiqueta <svg /> permite incluir imágenes vectoriales SVG en una página web HTML 5, formando parte del documento.

En las lecciones SVG, Formas básicas SVG y Formas avanzadas SVG se comentan las principales etiquetas de SVG.

<p>Estrella:</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="170" height="165" viewBox="0 0 170 165">
  <polygon fill="yellow" stroke="red" stroke-width="7"
           points="129,150 85,119 41,150 57,104 15,66 68,66 85,15 102,65 156,66 113,98" />
</svg>

Estrella:

El ejemplo puede verse incluido en una página aparte: Estrella

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.