Elemento img en HTML

El elemento html img representa una imagen en el documento. Ejemplo de uso del elemento <img> para mostrar una imagen con su texto alternativo especificado a través de la propiedad alt:

< img  src = "logo-html.web"  alt = "Imagen para el HTML" >

Ejemplo de uso del elemento img html para mostrar una imagen con su texto alternativo seleccionado a través de la propiedad alt, dentro del elemento permitiendo hacer clic en la imagen para navegar:

< a href = "bigcode.es/html" > 
  < img  src = "logo-html.web"  alt = "Imagen para el Lenguaje HTML" > 
</ a >

Etiqueta html img

Clasificaciones de contenido	Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo.
Contenido permitido	Ninguno, este artículo está vacío.
Acrónimo	Dado que este elemento está vacío, se debe proporcionar la etiqueta de inicio y se debe omitir la etiqueta de finalización.
Elementos del padre	Cualquier elemento que acepte elementos incrustados.
Interfaz DOMO	`HTMLImageElement`

Características

En este elemento img html se pueden utilizar propiedades globales.

`align`

Especifique la alineación de la imagen en relación con el contenido adyacente, esta propiedad está obsoleta en HTML 4 y se omite en HTML5, la propiedad float y / o vertical-align en CSS deben usarse en su lugar, lo mencionamos para su información.

`alt`

Esta propiedad define el texto alternativo que describe la imagen, y los usuarios verán este texto si la URL de la imagen no existe, el navegador no admite el formato de imagen o la imagen aún no se ha descargado. Los navegadores no siempre muestran la imagen indicada por este elemento, esto se aplica a los navegadores no gráficos (incluidos los utilizados por personas con baja visión).

Si el usuario elige no mostrar las imágenes o el navegador no puede mostrar la imagen porque no es válida. o no es compatible con su formato, el navegador reemplazará el texto alternativo dentro de una propiedad altcon la imagen. Es por estas (y otras) razones por las que debe proporcionar un valor de propiedad útil alt siempre que pueda.

Si no establece esta propiedad en absoluto, esto indica que la imagen es una parte importante del contenido y no puede ser reemplazada por contenido de texto. Establecer esta propiedad en un valor vacío (es decir alt=""‎) indica que la imagen no es una parte importante de el contenido, y los navegadores no gráficos pueden ignorarlo.

Ejemplo de uso del elemento <img> para mostrar una imagen importante, eliminando la propiedad por alt completo:

< img  src = "logo-html.webp" >

Un ejemplo del uso del elemento <img> para mostrar una imagen sin importancia asignando una cadena vacía a la propiedad alt:

< img  src = "imagen del articulo.webp"  alt = "Significado que tiene la imagen" >

`border`

Especifica el grosor del marco de la imagen, pero esta propiedad está obsoleta en HTML 4 y se omite en HTML5, así que use la propiedad border en CSS en su lugar.

`height`

Especifique la altura neta de la imagen en píxeles. El valor de esta propiedad podría haberse especificado en píxeles o como un porcentaje en HTML 4, pero en HTML5 este valor debe establecerse sólo en píxeles. Utilice la propiedad height para ajustar la altura de la imagen:

< img  src = "logo-html.webp"  alt = "Imagen para el Lenguaje HTML"  height = "300" >

`width`

Determine el ancho neto de la imagen en píxeles. El valor de esta propiedad podría haberse especificado en píxeles o como un porcentaje en HTML 4, pero en HTML5 este valor debe establecerse sólo en píxeles. Utilice la propiedad width para ajustar el ancho de la imagen:

< img  src = "logo-html.webp"  alt = "Imagen para el Lenguaje HTML"  width = "1400" >

`hspace`

Especifica el número de píxeles de espacio en blanco que se agregarán a la izquierda y a la derecha de la imagen. Pero esta propiedad está obsoleta en HTML 4 y se ha eliminado en HTML5, así que utilice la propiedad margin en CSS en su lugar.

`vspace`

Especifica el número de píxeles del espacio en blanco que se agregarán por encima y por debajo de la imagen. Pero esta propiedad está obsoleta en HTML 4 y se ha eliminado en HTML5, así que utilice la propiedad margin en CSS en su lugar.

`ismap`

Una propiedad booleana que indica si una imagen es parte de un mapa del lado del servidor. Si lo es, las coordenadas exactas de cada clic se envían al servidor. Esta propiedad está permitida si el elemento está <img> dentro del elemento con una propiedad href válida.

`longdesc`

Enlace a una descripción detallada de la imagen. Los valores permitidos para esta propiedad son enlaces URL o id un identificador de otro elemento.

< img  src = "https://bigcode.es/wp-content/uploads/2021/09/Elemento-span-en-html.webp"  
     alt = "Elemento en html span"  
     longdesc = "https://bigcode.es/Elemento-span-en-html/" >

`name`

Especifica un nombre para el elemento, pero esta propiedad está obsoleta en HTML 4 la cual se agregó por compatibilidad con versiones anteriores y se omite en HTML5. En su lugar, debería utilizarse la propiedad id.

`sizes`

Añadida en HTML5, esta función acepta una cadena con uno o más valores (separados por comas) para diferentes fuentes de escalado de imágenes. Cada fuente debe contener:

La declaración de consulta de medios, que debe eliminarse en el último elemento de la lista.
valor de escala de la imagen

El valor de escala de la imagen determina el tamaño de la imagen que se mostrará. Los navegadores utilizan una consulta de medios para localizar un recurso de imagen definido en una propiedad srcset, cuando esos recursos están asociados con un especificador de visualización ( w).

El tamaño de la imagen seleccionada afecta el tamaño neto de la imagen (el tamaño al que se renderiza la imagen si no se le aplican reglas CSS). Si la propiedad srcset no existe o no tiene ningún valor en el especificador de visualización w, la propiedad sizes no tiene ningún efecto.

`src`

URL de la imagen, esta propiedad es obligatoria para todos <img>. Si el navegador admite la propiedad srcset, el valor de la propiedad se tratará src como un filtro de imagen con el parámetro de densidad.

A 1x menos que se defina una imagen con el mismo parámetro de densidad en una propiedad srcset o si la propiedad no contiene srcset el selector w.

`srcset`

Una lista de una o más cadenas de texto separadas por comas ,que indican un conjunto de posibles fuentes de imágenes para que una de ellas sea utilizada por el navegador. Cada cadena del contenido de esta propiedad consta de:

Enlace a la URL del archivo de imagen
Opcional un espacio seguido de uno de los siguientes delimitadores:
- El selector de ancho, que es un número entero positivo seguido por el carácter w, y el valor del modificador de ancho se dividirá por el tamaño de fuente dado en una propiedad sizes para calcular la densidad de píxeles real.
- El determinante de la densidad de píxeles, que es un número decimal positivo seguido inmediatamente por la letra x.

Si no se le da ningún valor a uno de los parámetros anteriores, el delimitador predeterminado se asignará al recurso 1x.

Es incorrecto usar el selector de ancho con el selector de densidad en la misma propiedad srcset, y es incorrecto duplicar los selectores. Es decir, dos fuentes diferentes no pueden tener el mismo srcset especificador de densidad 2x.

El navegador elegirá una de las fuentes mencionadas en esta función a su discreción, dando a los navegadores la posibilidad de elegir la mejor escala de imagen en función de las preferencias del usuario o para restringir el uso de la mensajería de red.

Un ejemplo del uso de la propiedad srcset para especificar una imagen alternativa para navegadores que se ejecutan en dispositivos de alta densidad 2x. Tenga en cuenta que el valor de la propiedad src se interpretará como la fuente de la imagen de alta densidad 1x:

< img  src = "logo-html.web"  
  alt = "Imagen para el Lenguaje HTML"  
  srcset = " logo-html-HD.webp 2x" >

Un ejemplo del uso de la propiedad srcset con la propiedad sizes, y cuando se aplica la condición de consulta de medios, cuál es el min-width: 1200px ancho de la imagen 600px; de lo contrario, será un ancho 50 vw(es decir, el 50% del ancho de la ventana gráfica):

< img  src = "cover-small.png"  
  alt = "Portada"  
  srcset = "cover-large.webp 2040w, 
      cover-small.webp 1040w" 
  tamaños = "(ancho mínimo: 1200 px) 600 px, 50 vm" >

`usemap`

Esta propiedad toma una URL parcial (comienza con un icono #) de un mapa asociado con este elemento <map>. Tenga en cuenta que no puede usar esta propiedad si el elemento <img> está contenido dentro de un elemento o <button>. Consulte la página del artículo <map> para ver un ejemplo del uso del artículo <img> con esta función.

Descripción de uso

Formatos de imagen admitidos

El estándar HTML no proporciona una lista de formatos de imagen que deberían ser compatibles, por lo que cada navegador admite una lista diferente de formatos, por ejemplo, Firefox admite:

JPEG
GIF que incluye GIF animados
PNG
APNG
SVG
BMP
BMP ICO
ICO PNG

Algunos navegadores como Chrome y Opera admiten el nuevo formato WebP .

Interactuar con CSS

El elemento <img>es un elemento que será reemplazado por un recurso externo y no tiene una línea de base, por lo que cuando use imágenes en contenido en línea con una propiedad vertical-align: baseline CSS , se colocará debajo de la imagen en la línea de base del elemento que contiene.

Una imagen puede tener dimensiones netas según su tipo, pero algunos tipos de imágenes no tienen dimensiones netas, como las imágenes SVG.

error

Cuando ocurre un error al intentar cargar o mostrar la imagen, se llamará a la función que maneja el evento error, y esto puede suceder en varios casos como:

La propiedad src no existe o su valor es nulo.
El valor de la URL de la imagen es el mismo que el valor de la URL de la página actual.
La imagen seleccionada está dañada de alguna manera que impide que se muestre.
Los metadatos de la imagen están dañados para evitar sus dimensiones, y sus dimensiones no están especificadas por las propiedades del elemento <img>.
El formato de imagen seleccionado no es compatible con el navegador.

Formato predeterminado

La mayoría de los navegadores muestran imágenes con la propiedad establecida display en inline-block:

img {
  display: inline-block;
}

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Algunas funciones HTML5 recién agregadas no funcionan en todos los navegadores. La función se agregó srcset en Chrome 35, Firefox 32, Opera 21 y Safari 7.1 y es compatible con Edge.