Imágenes HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página web.
Ejemplo
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Ejemplo
<img src="img_girl.jpg"
alt="Girl in a jacket">
Ejemplo
<img src="img_chania.jpg"
alt="Flowers in Chania">
Sintaxis de imágenes HTML
La <img>
etiqueta HTML 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 <img>
etiqueta crea un espacio de espera para la imagen de referencia.
La <img>
etiqueta está vacía, solo contiene atributos y no tiene una etiqueta de cierre.
La <img>
etiqueta tiene dos atributos obligatorios:
- src: especifica la ruta a la imagen
- alt: especifica un texto alternativo para la imagen
Sintaxis
<img src="url" alt="alternatetext">
El atributo src
El src
atributo requerido 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, sus visitantes obtendrán un ícono de enlace roto. El icono de enlace roto y el alt
texto se muestran si el navegador no puede encontrar la imagen.
Ejemplo
<img src="img_chania.jpg" alt="Flowers
in Chania">
El atributo alt
El alt
atributo requerido 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 alt
atributo debe describir la imagen:
Ejemplo
<img src="img_chania.jpg" alt="Flowers
in Chania">
Si un navegador no puede encontrar una imagen, mostrará el valor del alt
atributo:
Ejemplo
<img src="wrongname.gif" alt="Flowers
in Chania">
Sugerencia: un lector de pantalla es un programa de software que lee el código HTML y permite al usuario "escuchar" el contenido. Los lectores de pantalla son útiles para las personas con problemas de visión o de aprendizaje.
Tamaño de la imagen: ancho y alto
Puede utilizar el style
atributo para especificar el ancho y el alto de una imagen.
Ejemplo
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternativamente, puede usar los atributos width
y :height
Ejemplo
<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.
Nota: Siempre especifique el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página web puede parpadear mientras se carga la imagen.
¿Ancho y alto, o estilo?
Los atributos width
, height
y style
son todos válidos en HTML.
Sin embargo, sugerimos usar el style
atributo. Evita que las hojas de estilo cambien el tamaño de las imágenes:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Imágenes en otra carpeta
Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el src
atributo:
Ejemplo
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Imágenes en otro servidor/sitio web
Algunos sitios web apuntan a una imagen en otro servidor.
Para apuntar a una imagen en otro servidor, debe especificar una URL absoluta (completa) en el src
atributo:
Ejemplo
<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 obtiene permiso para usarlo, es posible que esté violando las leyes de derechos de autor. Además, no puede controlar imágenes externas; se puede quitar o cambiar repentinamente.
Imágenes animadas
HTML permite GIF animados:
Ejemplo
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Imagen como enlace
Para usar una imagen como enlace, coloque la <img>
etiqueta dentro de la <a>
etiqueta:
Ejemplo
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Imagen flotante
Usa la propiedad CSS float
para dejar que la imagen flote a la derecha o a la izquierda de un texto:
Ejemplo
<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>
Sugerencia: para obtener más información sobre CSS Float, lea nuestro Tutorial de CSS Float .
Formatos de imagen comunes
Estos son los tipos de archivos de imagen más comunes, compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation | File Format | File Extension |
---|---|---|
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 |
Resumen del capítulo
- Usar el elemento HTML
<img>
para definir una imagen - Use el atributo HTML
src
para definir la URL de la imagen - Use el atributo HTML
alt
para definir un texto alternativo para una imagen, si no se puede mostrar - Utilice el HTML
width
y losheight
atributos o el CSSwidth
y lasheight
propiedades para definir el tamaño de la imagen. - Use la propiedad CSS
float
para dejar que la imagen flote hacia la izquierda o hacia la derecha
Nota: La carga de imágenes grandes lleva tiempo y puede ralentizar su página web. Usa las imágenes con cuidado.
Ejercicios HTML
Etiquetas de imagen HTML
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines an image map |
<area> | Defines a clickable area inside an image map |
<picture> | Defines a container for multiple image resources |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .