Etiqueta <img> de HTML

Definition and Usage

<img> The tag is used to embed images in HTML pages.

Technically, the image is not actually inserted into the web page, but linked to the web page.<img> The tag creates a container for referencing the image.

<img> The tag has two required attributes:

  • src - Define the path of the image
  • alt - If for some reason the image cannot be displayed, specify the alternative text for the image

Note:In addition, always specify the width and height of the image. If the width and height are not specified, the page may flicker when loading the image.

Tip:To link an image to another document, simply put <img> Nested in the tag <a> Inside the tag (see the example below).

See also:

HTML Tutorial:Imágenes de HTML

HTML DOM Reference Manual:Image Object

CSS Tutorial:Set the style of the image

Read more:How to use images correctly

Instance

Example 1

In the following example, we insert a tulip photo taken by a CodeW3C.com engineer at the Shanghai Flower Port into the page:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Pruebe usted mismo

Puerto de flores de Shanghai - Tulipán

Example 2

Another example of how to insert an image:

<img src="dancer.png" alt="Dancer" width="500" height="749">

Pruebe usted mismo

Tip:More examples are provided at the bottom of the page.

Attribute

Attribute Value Description
alt Text Define the alternative text for the image.
crossorigin
  • anonymous
  • use-credentials
 Allow the use of images from third-party websites that allow cross-domain access with the canvas (canvas).
height Píxeles Define the height of the image.
ismap ismap Define the image as a server-side image mapping.
loading
  • eager
  • lazy
 Specify whether the browser should load the image immediately or defer loading until certain conditions are met.
longdesc URL Define the URL pointing to the detailed description of the image.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Define the reference information to be used when obtaining the image.
sizes Size Define the image size for different page layouts.
src URL Define the path of the image.
srcset URL-list Define la lista de archivos de imágenes que se utilizan en diferentes situaciones.
usemap #mapname Define la imagen como un mapa de imágenes del cliente.
width Píxeles Define el ancho de la imagen.

Atributos globales

<img> Las etiquetas también admiten Atributos globales en HTML.

Atributos de eventos

<img> Las etiquetas también admiten Atributos de eventos en HTML.

Más ejemplos

Ejemplo 3

Alinear la imagen (usando CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Pruebe usted mismo

Ejemplo 4

Añadir un borde a la imagen (usando CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Pruebe usted mismo

Ejemplo 5

Añadir márgenes izquierdo y derecho a la imagen (usando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Pruebe usted mismo

Ejemplo 6

Añadir márgenes superior e inferior a la imagen (usando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Pruebe usted mismo

Ejemplo 7

¿Cómo insertar una imagen desde otra carpeta o sitio web?:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Pruebe usted mismo

Ejemplo 8

Cómo agregar un hipervínculo a una imagen:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Pruebe usted mismo

Ejemplo 9

Cómo crear un mapa de imágenes con áreas clicables. Cada área es un hipervínculo:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Pruebe usted mismo

Leer más - Cómo usar correctamente las imágenes

Una de las características más destacadas de HTML y XHTML es la capacidad de incluir imágenes en el texto del documento, ya sea como objeto interno del documento (imagen en línea) o como un documento separado que se puede descargar a través de un hipervínculo, o como fondo del documento.

Incluir imágenes de manera razonable en el contenido del documento (iconos, fotos, explicaciones, pinturas, etc., con efectos de animación estáticos o dinámicos) hace que el documento sea más vívido y atractivo, y parece más profesional, más informativo y fácil de navegar. También se puede hacer que una imagen sea un mapa de guía visual para un hipervínculo.

Sin embargo, si se utilizan imágenes en exceso, el documento se vuelve fragmentado, confuso y difícil de leer, lo que aumenta considerablemente el tiempo de espera para los usuarios al descargar y ver la página.

Lea el siguiente artículo para aprender sobre los dos formatos de imágenes principales en la Web: GIF y JPEG, y cómo usarlas correctamente:

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <img> Elemento:

img {
  display: inline-block;
}

Pruebe usted mismo

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte