Etiqueta HTML <img>
La etiqueta <img> se utiliza para insertar una imagen en un documento HTML. La imagen en sí no se inserta directamente en el documento; el navegador inserta una imagen HTML desde la fuente especificada en la etiqueta <img>.
Hay dos atributos obligatorios para un elemento <img>: src, que se utiliza para mostrar la fuente de la imagen, y alt, que define un texto alternativo para la imagen.
Para hacer que las imágenes HTML sean clicables, debes colocar la etiqueta <img> dentro de la etiqueta <a>, que se utiliza para insertar un enlace de imagen HTML.
Sintaxis
La etiqueta <img> está vacía, lo que significa que no se requiere etiqueta de cierre. Contiene solo atributos. Pero en XHTML, la etiqueta <img> debe cerrarse a sí misma (<img />).
Ejemplo de la etiqueta HTML <img>:
Un ejemplo de cómo usar una etiqueta HTML <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Podemos usar CSS para cambiar la apariencia inicial de una imagen.
Ejemplo de la etiqueta <img> estilizada con CSS:
¿Cómo dar estilo a una etiqueta HTML <img> usando las propiedades CSS vertical-align y padding?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="https://es.w3docs.com/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Atributos src y alt
El atributo src (source) muestra la fuente de la imagen. Es obligatorio, ya que define la ruta hacia la imagen. El valor del atributo src puede ser el nombre del archivo o su URL.
El atributo alt define un nombre alternativo para la imagen. También es obligatorio para la etiqueta <img>. Su valor es un texto descriptivo que se muestra en el navegador antes de que se cargue la imagen, o si la imagen no se carga.
TIP
Recomendamos incluir palabras clave en el texto alternativo. Mejorará el posicionamiento del sitio web en los motores de búsqueda.
Uso de "data:image/[type];base64,[base64-string]" para el atributo src
El formato data:image/[type];base64,[base64-string] puede usarse como valor del atributo src de una etiqueta img para mostrar una imagen directamente desde el código HTML, sin necesidad de cargarla desde un archivo externo.
Aquí tienes un ejemplo de cómo usar este formato para mostrar una imagen en una etiqueta img:
Uso de "data:image/[type];base64,[base64-string]" para el atributo src
<img src="data:image/png;base64,iVBORw0KG..." alt="Base64 encoded image">En este ejemplo, image/png especifica el tipo MIME de la imagen, e iVBORw0KG... representa los datos de la imagen codificados en base64.
Ten en cuenta que usar imágenes codificadas en base64 puede aumentar el tamaño del archivo HTML y ralentizar la carga de la página. Por lo general, se recomienda usar este formato para imágenes pequeñas o iconos, y usar archivos externos para imágenes más grandes.
Ejemplo de la etiqueta HTML <img> con los atributos src y alt:
Un ejemplo de la etiqueta img con los atributos src y alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://es.w3docs.com/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>El atributo loading
El atributo loading permite posponer la carga de imágenes e iframes hasta que estén cerca de mostrarse. Ahora es una función estándar de HTML compatible con todos los navegadores modernos.
Los valores admitidos para el atributo loading incluyen:
lazy, que pospone la carga hasta que la imagen o el iframe alcanza un umbral de distancia respecto al viewport.eager, que carga el recurso inmediatamente.
Puedes usar el valor lazy para aprovechar la carga diferida nativa del navegador:
Etiqueta HTML <img>
<img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400">La carga diferida es un conjunto de técnicas en el desarrollo web y de aplicaciones que pospone la carga de recursos de una página para un momento posterior, cuando esos recursos son necesarios, en lugar de cargarlos de inmediato. Estas técnicas ayudan a mejorar el rendimiento y el uso de los recursos del dispositivo, reduciendo los costos asociados.
Formatos de imagen admitidos
Los formatos de archivo de imagen son medios estandarizados para organizar y almacenar imágenes digitales. Un formato de archivo de imagen puede almacenar datos en un formato sin comprimir, un formato comprimido (que puede ser sin pérdida o con pérdida), o un formato vectorial. (Wikipedia).
Cada agente de usuario admite distintos formatos de imagen. Aquí tienes la lista de formatos de imagen comunes:
| Abbreviation | File format | MIME type | File extension(s) | Browser compatibility |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| BMP | Bitmap file | image/bmp | .bmp | Chrome, Edge, Firefox, Opera, Safari |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| TIFF | Tagged Image File Format | image/tiff | .tif, .tiff | None built-in; add-ons required |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera |
Errores de carga de imágenes
Pueden producirse algunos errores al cargar una imagen. Si se ha establecido un controlador de eventos onerror en el evento error, ese controlador se llamará. Aquí puedes encontrar las situaciones en las que esto puede ocurrir:
- El atributo src está vacío ("") o es null.
- La URL de src y la URL de la página en la que se encuentra actualmente el usuario son las mismas.
- Alguna corrupción de la imagen impide que se cargue.
- Los metadatos de la imagen están corruptos de tal manera que hace imposible recuperar sus dimensiones, y no hay dimensiones especificadas en los atributos de la etiqueta
<img>. - El formato no es compatible con el agente de usuario.
Atributos
| Attribute | Value | Description |
|---|---|---|
| align | left right top bottom middle | Define la alineación de la imagen con respecto a los elementos circundantes. No compatible en HTML5. |
| alt | text | Define el texto alternativo para la imagen. |
| border | pixels | Define el ancho del borde alrededor de la imagen. No compatible en HTML5. |
| crossorigin | anonymous | use-credentials | Define si se usa CORS al cargar la imagen. Las imágenes cargadas mediante CORS pueden usarse en el elemento <canvas> sin limitar su funcionalidad. |
| height | pixels | Define la altura de la imagen. |
| hspace | pixels | Define espacios en los lados izquierdo y derecho de la imagen. No compatible en HTML5. |
| ismap | ismap | Especifica que el contenido de la etiqueta es un mapa de imagen del lado del servidor. |
| longdesc | URL | Especifica la dirección URL con una descripción detallada de la imagen (para una breve descripción de la imagen, usa el atributo alt). No compatible en HTML5. |
| src | URL | Define la fuente de la imagen. |
| usemap | #mapname | Especifica un enlace al elemento <map>, que contiene las coordenadas para el mapa de imagen del lado del cliente. |
| vspace | pixels | Define espacios en la parte superior e inferior de la imagen. No compatible en HTML5. |
| width | pixels | Define el ancho de la imagen. |
La etiqueta <img> admite los atributos globales y los atributos de eventos.
Atributos obsoletos
| Attribute | Values | Description | Alternate |
|---|---|---|---|
| align | left right top bottom middle | Define la alineación de la imagen con respecto a los elementos circundantes.Centra la imagen HTML de la imagen con respecto a los elementos circundantes. | Las propiedades CSS float y/o vertical-align. |
| border | pixels | Define el ancho del borde alrededor de la imagen. | La propiedad CSS border. |
| hspace | La propiedad CSS margin en su lugar. | ||
| name | Especifica un nombre para el elemento | El atributo id. | |
| vspace | pixels | Define espacios en la parte superior e inferior de la imagen. | Usa la propiedad CSS margin en su lugar. |
Practice
Which attributes can be used with the HTML <img> tag?