Saltar la navegación

Imágenes en una página web

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, _source_). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del atributo href.

Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

Si la imagen estaba en el subdirectorio images, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores SEO), entonces deberías incrustar la imagen así:

y así sucesivamente.

Nota:

Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, dale a tu imagen un nombre descriptivo; dinosaur.jpg es mejor que img835.png.

Puedes incrustar la imagen usando la URL absoluta, por ejemplo:

Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.

  1. seas dueño de la imagen,
  2. tengas permiso escrito explícito del dueño de la imagen o
  3. tengas suficientes pruebas de que la imagen es de dominio público

Advertencia:

La mayoría de imágenes tienen derechos de autor. No muestres una imagen en tu página web a menos que:El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no apuntes nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama _hotlinking_. Asimismo es ilegal robar el ancho de banda de alguien. Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.

Nuestro código anterior debería darnos el resultado siguiente:

Nota:

Los elementos como <img> y <video> a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.