
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 alt
con 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 propiedadsizes
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.
- El selector de ancho, que es un número entero positivo seguido por el carácter
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.
- Descripción de las Etiquetas HTML
- El Texto en HTML
- Elemento a en HTML
- Elemento abbr en HTML
- Elemento address en HTML
- Elemento area en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento audio en HTML
- Elemento b en HTML
- Elemento base en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento blockquote en HTML
- Elemento body en HTML
- Elemento br en HTML
- Elemento button en HTML
- Elemento canvas en HTML
- Elemento caption en HTML
- Elemento cite en HTML
- Elemento code en HTML
- Elemento col en HTML
- Elemento colgroup en HTML
- Elemento data en HTML
- Elemento datalist en HTML
- Elemento dd en HTML
- Elemento del en HTML
- Elemento details en HTML
- Elemento dfn en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento em en HTML
- Elemento embed en HTML
- Elemento fieldset en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento footer en HTML
- Elemento form en HTML
- Elemento head en HTML
- Elemento header en HTML
- Elemento hr en HTML
- Elemento HTML
- Elemento i en HTML
- Elemento img en HTML
- Elemento input en HTML
- Elemento ins en HTML
- Elemento kbd en HTML
- Elemento label en HTML
- Elemento legend en HTML
- Elemento li en HTML
- Elemento link en HTML
- Elemento main en HTML
- Elemento map en HTML
- Elemento mark en HTML
- Elemento meta en HTML
- Elemento meter en HTML
- Elemento nav en HTML
- Elemento noscript en HTML
- Elemento object en HTML
- Elemento ol en HTML
- Elemento optgroup en HTML
- Elemento option en HTML
- Elemento output en HTML
- Elemento p en HTML
- Elemento param en HTML
- Elemento picture en HTML
- Elemento pre en HTML
- Elemento progress en HTML
- Elemento q en HTML
- Elemento s en HTML
- Elemento samp en HTML
- Elemento script en HTML
- Elemento section en HTML
- Elemento select en HTML
- Elemento small en HTML
- Elemento source en HTML
- Elemento span en HTML
- Elemento strong en HTML
- Elemento style en HTML
- Elemento sub en HTML
- Elemento summary en HTML
- Elemento table en HTML
- Elemento tbody en HTML
- Elemento td en HTML