HTML Imágenes
Las imágenes pueden mejorar el diseño y la apariencia de una página web.
HTML Sintaxis de imágenes
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 almacenamiento para la imagen a la que se hace referencia.
La etiqueta <img> está vacía, contiene solo 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
Sintaxis
<img src="url" alt="alternatetext">
The src Attribute
El atributo src 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 permanezca en el mismo lugar en relación con la página web; de lo contrario, sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el texto alt se muestran si el navegador no puede encontrar la imagen.
El atributo alt
El atributo alt 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 utiliza un lector de pantalla).
El valor del atributo alt debe describir la imagen:
Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt:
Consejo: 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 personas con discapacidad visual o de aprendizaje.
Tamaño de imagen: width (ancho) y height (alto)
Puedes utilizar el atributo style 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;">
Inténtalo tú mismo »
Alternativamente, puede utilizar los atributos width y height:
Ejemplo
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Inténtalo tú mismo »
Los atributos width y height siempre definen el ancho y el alto de la imagen en píxeles.
Nota: Especifique siempre 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.
¿Width y Height, o Style?
Los atributos width, height y style todos son válidos en HTML.
Sin embargo, sugerimos utilizar el atributo style. 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>
Inténtalo tú mismo »
Imágenes en otra carpeta
Si tienes tus imágenes en una subcarpeta, debes incluir el nombre de la carpeta en el atributo src:
Ejemplo
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Inténtalo tú mismo »
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 atributo src:
Ejemplo
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Inténtalo tú mismo »
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é infringiendo las leyes de derechos de autor. Además, no puedes controlar las imágenes externas; se puede eliminar o cambiar repentinamente.
Imágenes animadas
HTML permite GIF animados:
Ejemplo
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Inténtalo tú mismo »
Imagen como enlace
Para usar una imagen como enlace, coloque la etiqueta <img> dentro de <a> etiqueta:
Ejemplo
<a href="index.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Inténtalo tú mismo »
Imagen flotante
Utilice la propiedad CSS float para permitir que la imagen flote hacia la derecha o hacia 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>
Inténtalo tú mismo »
Consejo: 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, que son 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 |
Resumen del capítulo
- Utilice el elemento HTML
<img>para definir una imagen - Utilice el atributo HTML
srcpara definir la URL de la imagen - Utilice el atributo HTML
altpara definir un texto alternativo para una imagen, si no se puede mostrar - Utilice los atributos HTML
widthyheighto CSS propiedadeswidthyheightpara definir el tamaño de la imagen - Utilice la propiedad CSS
floatpara permitir que la imagen flote hacia la izquierda o hacia la derecha
Nota: Cargar imágenes grandes lleva tiempo y puede ralentizar su página web. Utilice las imágenes con cuidado.
HTML Ejercicios
HTML Etiquetas de imagen
| Tag | Descripción |
|---|---|
| <img> | Define una imagen |
| <map> | Define un mapa de imágenes |
| <area> | Define un área en la que se puede hacer clic dentro de un mapa de imagen |
| <picture> | Define un contenedor para múltiples recursos de imágenes |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
