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úrese 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 hight 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.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.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="HTML tutorial" 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;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</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).

Abreviatura Formato de archivo Extensión de archivo
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg