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 |