7. Imágenes

Para insertar imágenes en nuestra web, los archivos tienen que estar en la carpeta raíz o en un subdirectorio, junto a los archivos HTML de nuestra página, o en su defecto tener el enlace directo al archivo en cuestión.

Las imágenes se colocan usando la etiqueta «img«, seguido obligatoriamente del atributo «src» (fuente, source en ingles) donde debemos especificar el archivo a insertar. El atributo «src» es básicamente lo mismo que el atributo «href» de los enlaces. Al igual que en los enlaces podemos usar enlaces a archivos internos o externos a nuestra página.

Otro atributo interesante aunque no obligatorio, es el de «alt«, se trata de un texto alternativo en caso de que la imagen no cargue, en este atributo debemos definir el contenido de nuestra imagen, o título alternativo.

Los formatos de imagen para la web mas utilizados son: «.gif«, «.jpg», «.png«, «.webp» este último esta pensado en aligerar la carga de los sitios web, a sí úsalo siempre que te sea posible.

<img src="globos.jpg" alt="Globo aerostáticos volando" />
Globo aerostáticos volando

Tamaño y peso de la imagen

Para encajar una imagen en el contenido de nuestra pagina web, debemos asegurar que el tamaño de en pixeles de nuestra imagen sea lo mas cercano posible al resultado que buscamos, además disponemos de los atributos «width» (ancho) y «height» (alto) para encajar la imagen, pero estos atributos no modifican el tamaño de la imagen real, sino que la escala a esas dimensiones de manera visual, pero el peso del archivo seria siendo el mismo. Basta con establecer uno de los atributos y la imagen se escalará de manera proporcional.

<img src="globos.jpg" alt="Globo aerostáticos volando" width="250" />
Globo aerostáticos volando

En el desarrollo web el peso de las imágenes es muy importante, ya que cada persona que acceda a nuestra página descargará las imágenes para que puedan ser visualizadas, por lo que para ahorrar trafico de datos del usuario y de nuestro servidor, lo ideal es que las imágenes estén comprimidas lo máximo posible sin mermar la calidad. Imágenes de apenas 100kb puede mostrar grandes tamaños y con calidad visual, más aun si utilizamos el formato WEBP o JPG. Para tu referencia, la imagen de los globos aerostáticos apenas pesa 27kb.