18. Imágenes HTML

Las imágenes pueden mejorar el diseño y la apariencia de una página web.

Ejm

<img src="pic_trulli.jpg" alt="Italian Trulli">

Sintaxis

La etiqueta HTML <img> se utiliza para incrustar una imagen en una página web. Técnicamente, las imágenes no se insertan en una página web, las imágenes están vinculadas a páginas web. La etiqueta <img> crea un espacio de espera para la imagen a la que se hace referencia.

La etiqueta <img> está vacía, solo contiene atributos y no tiene una etiqueta de cierre.

La etiqueta <img> tiene dos atributos obligatorios:

  • src: especifica la ruta a la imagen
  • alt: especifica un texto alternativo para la imagen

Ejm

<img src="url" alt="alternatetext">

El atributo src

El atributo src especifica la ruta (URL) a la imagen.

Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrate de que la imagen realmente permanezca en el mismo lugar en relación con la página web, de lo contrario, tus visitantes obtendrán un ícono de enlace roto. El icono de enlace roto y el texto alternativo se muestran si el navegador no puede encontrar la imagen.

Ejm

<img src="img_chania.jpg" alt="Flowers in Chania">

El atributo alt

El atributo alt proporciona un texto alternativo para una imagen, si el usuario por algún motivo no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).

El valor del atributo alt debe describir la imagen.

Ejm

<img src="img_chania.jpg" alt="Flowers in Chania">

Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt.

Tamaño de imagen, width y height

Puedes usar el atributo style para especificar el ancho y el largo de una imagen.

Ejm

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternativamente puedes usar los atributos width y height.

Ejm

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Los atributos width y height siempre definen el ancho y el alto de la imagen en píxeles.

Width y height o style?

Los atributos width, height y style son todos válidos en HTML.

Sin embargo, sugerimos usar el atributo style. Evita que las hojas de estilo cambien el tamaño de las imágenes.

Imágenes en otra carpeta

Si tienes tus imágenes en una subcarpeta, debes incluir el nombre de la carpeta en el atributo src.

Ejm

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Imágenes en otro servidor web

Algunos sitios web apuntan a una imagen en otro servidor. Para apuntar a una imagen en otro servidor, debes especificar una URL absoluta (completa) en el atributo src.

Ejm

<img src="https://www.sutilweb.eu/images/green.jpg" alt="Sutil Web.com">

Notas sobre imágenes externas: las imágenes externas pueden estar protegidas por derechos de autor. Si no obtienes permiso para usarlo, es posible que estés violando las leyes de derechos de autor. Además, no puedes controlar imágenes externas.

Imagen como enlace

Para usar una imagen como enlace, coloca la etiqueta <img> dentro de la etiqueta <a>.

Ejm

<a href="default.asp">
  <img src="smiley.gif" alt="Curso HTML" style="width:42px;height:42px;">
</a>

Imagen flotante

Usa la propiedad float de CSS para dejar que la imagen flote a la derecha o a la izquierda de un texto.

Ejm

<p><img src="smiley.gif" alt="Smiley face" style="float:right; width:42px; height:42px;">
La imagen flotará a la derecha del texto.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
La imagen flotará a la izquierda del texto.</p>

Formatos comunes de imagen

Estos son los tipos de archivos de imagen más comunes, compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera).

AbreviaturaFormato de archivoExtensión de archivo
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
Scroll al inicio