Unidad 2. HTML básico (IV)


2.4. Imágenes

Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar información como parte del propio diseño de la página. Pueden ser fotografías o gráficos creados por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape.

Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG. Puedes ver con más detalle cada formato en este básico Básico.

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mínimo ha de tener esta etiqueta son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que debe contener el atributo src:

  • Si la imagen está en una página Web, basta con saber su ruta, por ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una dirección absoluta.
    logo aulaclic
  • Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección relativa, como imagen.gif o imagenes/imagen.gif. Si no sabes cómo indicar una dirección relativa, consulta este básico Básico.

Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la imagen. En su lugar puede mostrar una imagen de error, como en Internet Explorer que muestra . Además se mostrará el texto contenido en el atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que hacen de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no se muestran las imágenes, el usuario no podrá navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar una página, el navegador muestra primero el texto y después las imágenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo para colocar las imágenes, lo que hará incómodo leer la página hasta que no esté totalmente cargada.

Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se mostrará su valor. En IE7, cuando se omite title, se muestra el contenido de alt.

Por ejemplo, para el siguiente código se muestra la siguiente imagen:

<img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" title="El logo de aulaClic" />
aulaClic

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde un programa de gráficos. Si cambias esos valores la imagen también cambiará. Si reduces los valores, manteniendo la proporción, la imagen se verá más pequeña, si los aumentas se verá más grande, pero con peor calidad, como puedes ver en el siguiente ejemplo:

<img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56" title="El logo de aulaClic" />
aulaClic

Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya que estos programas tienen opciones para optimizar el tamaño de las imágenes. En el tema 9 veremos cómo hacerlo con el programa gráfico Gimp.

Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra en graficos/flor_ejemplo2.jpg

Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla más pequeña.

Este es el código:

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

Puedes probar cómo se ve el resultado, y cambiar el tamaño de la imagen:

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Por último, a la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el navegador debe de descargarla primero. Y es fácil que una sola imagen ocupe más tamaño que el resto de elementos de la página. Por eso hemos de intentar optimizar al máximo las imágenes, e intentar que "pesen" lo menos posible, es decir que su tamaño en Kb. sea bajo. El sentido común nos dice que cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que procurar usar imágenes lo más pequeñas posibles, siempre que lo que queramos mostrar se vea con suficiente nitidez.

Pero dos imágenes del mismo tamaño pueden tener pesos diferentes, ya que una de ellas puede tener más resolución de la que es necesaria para que se vea bien. Es decir que aparte del tamaño influye la resolución, para optimizar la resolución de las imágenes conviene utilizar un programa gráfico, ya que estos programas tienen opciones para ello. En el tema 10 veremos cómo hacerlo con el programa gráfico GIMP. Con Photoshop se hace como se muestra en este enlace del curso de aulaClic. Y con Illustrator como se muestra aquí.


Enero-2010
Pág. 2.4

Atrás  Inicio  Adelante








.