Las imágenes en el HTML PARTE I

No hay dudas de que uno de los aspectos más sugestivos y seductores de las páginas web es el grafismo. El prólogo en vuestro texto de imágenes puede ayudaros a exponer más sencillamente vuestra información y darle un aire mucho más artístico. El abuso sin embargo puede conduciros a una sobrecarga que se traduce en un entretenimiento o distracción para el usuario, quien poseerá más dificultad en hallar la información requerida.

El manejo de imágenes asimismo debe ser hecho con cautela ya que se incrementan el tiempo de carga de la página, lo que puede ser de un efecto nefasto si vuestro cliente no posee una buena conexión o si es un poco impaciente. Por eso es recomendable todo el tiempo mejorar las imágenes para Internet, haciendo que su tamaño en bytes sea más minúsculo posible, para proporcionar la descarga, pero sin que eso enrede mucho su aptitud.

En este artículo no se explica cómo elaborar ni tratar las imágenes, sólo se dirá que para eso se manejan aplicaciones como Paint Shop ProPhotoshop Gimp. A su vez se explicarán las particularidades de cada tipo de archivo: GIF, JPG o PNG y la manera de mejorar vuestras imágenes.

Las imágenes son guardadas en forma de archivos, primariamente GIF (para dibujos) o JPG (para fotos). Esos archivos los pueden conseguir desde diferentes medios, como por ejemplo vuestra cámara digital, sin embargo, asimismo pueden ser elaborados por vosotros mismos con algún editor gráfico o pueden ser descargados gratuitamente en sitios web especializados.

Es por ello que, en estos primeras partes se limitará a enseñar como incrustar y alinear de forma correcta en vuestra página una imagen ya hecha.

La etiqueta que se utiliza para implantar una imagen es <img> (image). Esta etiqueta no tiene su cierre conveniente y en ella se ha de detallar de forma obligatoria el paradero de vuestro archivo gráfico a través el atributo src (source).

La sintaxis quedaría pues de la siguiente forma:

<img src=”camino hacia el archivo”>

Para decir el camino, se hará de la misma manera que se vio para los enlaces. Las normas continúan siendo las mismas, la única diferencia es que, en vez de una página destino, el destino es un archivo gráfico.

Separadamente de este atributo, indefectible comprensiblemente para la visualización de la imagen, la etiqueta <img> os brinda otra serie de atributos de mayor o menor provecho, que listamos a continuación:

Atributo alt

Dentro de las comillas de este atributo se pondrá una fragilísima descripción de la imagen. Esta etiqueta no es precisa pero presenta distintas utilidades.

Lo primero y durante el proceso de carga de la página, cuando la imagen no ha sido aún cargada, el navegador enseñará esta descripción, con lo que el usuario se puede elaborar una idea de lo que va en ese sitio.

Eso no es algo tan trivial si se tiene en cuenta que distintos usuarios navegan por la red con una opción del navegador que desactiva el muestreo de imágenes, con lo que tales personas lograrán siempre saber de qué se trata el gráfico y casualmente modificar y cambiar a modo con imágenes para visualizarla.

Asimismo, especificas aplicaciones para incapacitados o teléfonos vocales que no enseñan imágenes, sino que brindan la posibilidad de leerlas por lo que nunca está de más pensar en estos compuestos.

En ordinario se puede reflexionar como aconsejable el manejo de este atributo salvo para imágenes de poca categoría y definitivamente indefectible si la imagen en cuestión funciona de enlace.