Manejo de Imágenes
El uso de
imágenes también tiene que ser realizado con cuidado porque aumentan el 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. Por ello es
recomendable siempre optimizar las imágenes para Internet, haciendo que su
tamaño en bytes sea lo mínimo posible, para facilitar la descarga, pero sin que
ello comprometa mucho su calidad.
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 gráfico mediante el atributo src (source).
La sintaxis
queda entonces de la siguiente forma:
<img src="camino_hacia_el_archivo.jpg">
Para
expresar el camino, En el código anterior estamos enlazando con un archivo con
extensión .jpg, pero podrá ser otro tipo de archivo como .gif o .png, tal como
se explica en el mencionado artículo sobre los formatos gráficos permitidos en una página web.
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,
que listamos a continuación:
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. La
sintaxis te quedaría de esta manera:
<img src="mi_archivo.png" alt="Descripción de esta maravillosa imagen">
Primeramente,
sirve para el posicionamiento de la página en buscadores. De los atributos alt
el buscador puede extraer palabras clave y le ayuda a entender qué función o
contenido tiene la imagen, y por lo tanto la página.
Atributos height y width
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 desde el explorador de archivos de tu ordenador, para luego
elegir "propiedades" o "información de la imagen" sobre el
menú que se despliega.
Un ejemplo de etiqueta IMG con sus
valores de anchura y altura declarados te quedaría así:
<img src="mi-imagen.gif"
width="200" height="300">
No hay comentarios:
Publicar un comentario