Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es
el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a
explicar más fácilmente nuestra información y darle un aire mucho más estético.
El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una
distracción para el navegante, quien tendrá más dificultad en encontrar la
información necesaria, y un mayor tiempo de carga de la página lo que puede ser
de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un
poco impaciente.
En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente
diremos que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o
Corel Draw. Tampoco explicaremos las particularidades de cada tipo de archivo
GIF o JPG y la forma de optimizar nuestras imágenes. Un capitulo posterior al
respecto será dedicado a este menester:
Formatos gráficos para páginas web.
Las imágenes son almacenadas en forma de archivos, principalmente GIF (para
dibujos) o JPG (para fotos). Estos archivos pueden ser creados por nosotros
mismos o pueden ser descargados gratuitamente en sitios web especializados.
Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y
alinear debidamente en nuestra página una imagen ya creada.
La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta
etiqueta no posee su cierre correspondiente y en ella hemos de especificar
obligatoriamente el paradero de nuestro archivo grafico mediante el atributo src
(source).
La sintaxis queda entonces de la siguiente forma:
<img src="camino hacia el archivo">
Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas siguen siendo las mismás, lo único que cambia es que, en lugar de una página destino, el destino es un archivo grafico.
Aparte de este atributo, indispensable obviamente para la visualización de la
imagen, la etiqueta <img> nos propone otra serie de atributos de mayor o menor
utilidad:
Atributo alt
Dentro de las comillas de este atributo colocaremos una brevísima descripción de
la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades.
Primeramente, durante el proceso de carga de la página, cuando la imagen no ha
sido todavía cargada, el navegador mostrara esta descripción, con lo que el
navegante se puede hacer una idea de lo que va en ese lugar.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la
red con una opción del navegador que desactiva el muestreo de imágenes, con lo
que tales personas podrán siempre saber de qué se trata el grafico y
eventualmente cambiar a modo con imágenes para visualizarla.
Además, determinadas aplicaciones para discapacitados o teléfonos vocales que no
muestran imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de más
pensar en estos colectivos.
En general podemos considerar como aconsejable el uso de este atributo salvo
para imágenes de poca importancia y absolutamente indispensable si la imagen en
cuestión sirve de enlace.
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pixels.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas
dimensiones pueden obtenerse a partir del propio diseñador grafico o bien
haciendo clic con el botón derecho sobre la imagen vista por el navegador para
luego elegir propiedades sobre el menú que se despliega.
El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes
ayuda al navegador a confeccionar la página de la forma que nosotros deseamos
antes incluso de que las imágenes hayan sido descargadas.
Así, si las dimensiones de las imágenes han sido proporcionadas, durante el
proceso de carga, el navegador reservara el espacio correspondiente a cada
imagen creando una maquetación correcta. El usuario podrá comenzar a leer
tranquilamente el texto sin que este se mueva de un lado a otro cada vez que una
imagen se cargue.
Además de esta utilidad, el alterar los valores de estos dos atributos, es una
forma inmediata de redimensionar nuestra imagen. Este tipo de utilidad no es
aconsejable dado que, si lo que pretendemos es aumentar el tamaño, la perdida de
calidad de la imagen será muy sensible. Inversamente, si deseamos disminuir su
tamaño, estaremos usando un archivo más grande de lo necesario para la imagen
que estamos mostrando con lo que aumentamos el tiempo de descarga de nuestro
documento innecesariamente.
Es importante hacer hincapié en este punto ya que muchos debutantes tienen esa
mala costumbre de crear gráficos pequeños redimensionando la imagen por medio de
estos atributos a partir de archivos de tamaño descomunal. Hay que pensar que el
tamaño de una imagen con unas dimensiones de la mitad no se reduce a la mitad,
sino que resulta ser aproximadamente 4 veces inferior.
Atributo border
Definen el tamaño en pixels del cuadro que rodea la imagen.
De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es
particularmente útil cuando deseamos eliminar el borde que aparece cuando la
imagen sirve de enlace. En dicho caso tendremos que especificar border="0".
Atributos vspace y hspace
Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre
la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.
Atributo lowsrc
Con este atributo podemos indicar un archivo de la imagen de baja resolución.
Cuando el navegador detecta que la imagen tiene este atributo primero descarga y
muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere muy
rápido). Posteriormente descarga y muestra la imagen de resolución adecuada (señalada
con el atributo src, que se supone que ocupará más y será más lenta de
transferir).
Este atributo está en desuso, aunque supone una ventaja considerable para que la
descarga inicial de la web se realice más rápido y que un visitante pueda ver
una muestra de la imagen mientras se descarga la imagen real.
Truco: Utilizar imagenes como enlaces
Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de
enlace. Vista la estructura de los enlaces podemos muy fácilmente adivinar
el tipo de código necesario:
<a href="archivo.html"><img src="imagen.gif"></a> |
Ejemplo práctico
Resultará obvio para los lectores hacer ahora una página que contenga una imagen
varias veces repetida pero con distintos atributos.
- Una de las veces que salga debe mostrarse con su tamaño originar y con un
borde de 3 pixeles.
- En otra ocasión la imagen aparecerá sin borde, con su misma altura y con
una anchura superior a la original
- También mostraremos la imagen sin borde, con su misma anchura y con una
altura superior a la original
- Por último, mostraremos la imagen con una altura y anchura mayores que las
originales, pero proporcionalmente igual que antes.
| Vamos a utilizar esta imagen para hacer el ejercicio: |
 |
Las dimensiones originales de la imagen son 28x21, así que este sería el código
fuente:
<img src="img1.gif" width="28" height="21" alt="Tamaño
original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">
