Saltar al contenido

Etiqueta img HTML

septiembre 21, 2021

Ejemplo

Cómo insertar una imagen:

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.


Definición y uso

los <img> La etiqueta se utiliza para incrustar una imagen en una página HTML.

Las imágenes no se insertan técnicamente en una página web; las imágenes están vinculadas a páginas web. los <img> La etiqueta crea un espacio de espera para la imagen a la que se hace referencia.

los <img> La etiqueta tiene dos atributos obligatorios:

  • src: especifica la ruta a la imagen
  • alt: especifica un texto alternativo para la imagen, si la imagen por algún motivo no se puede mostrar

Nota: Además, siempre especifique el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página puede parpadear mientras se carga la imagen.

Propina: Para vincular una imagen a otro documento, simplemente anide el <img> etiqueta dentro de una etiqueta (ver ejemplo a continuación).


Soporte del navegador

Elemento

Atributos

Atributo Valor Descripción
alt texto Especifica un texto alternativo para una imagen.
origen cruzado anónimo
credenciales de uso
Permitir imágenes de sitios de terceros que permiten el uso de acceso de origen cruzado con lienzo
altura pixeles Especifica la altura de una imagen.
ismap ismap Especifica una imagen como mapa de imágenes del lado del servidor
cargando entusiasta
perezoso
Especifica si un navegador debe cargar una imagen inmediatamente o posponer la carga de imágenes hasta que se cumplan algunas condiciones.
longdesc URL Especifica una URL para una descripción detallada de una imagen.
referrerpolicy sin referencia
no-referrer-when-downgrade
origen
origen-cuando-origen-cruzado
URL insegura
Especifica qué información de referencia usar al obtener una imagen.
tamaños tamaños Especifica tamaños de imagen para diferentes diseños de página.
src URL Especifica la ruta a la imagen.
srcset Lista de URL Especifica una lista de archivos de imagen para usar en diferentes situaciones.
mapa de uso #mapname Especifica una imagen como mapa de imágenes del lado del cliente
ancho pixeles Especifica el ancho de una imagen.


Atributos globales

los <img> La etiqueta también admite los atributos globales en HTML.


Atributos de eventos

los <img> La etiqueta también admite los atributos de eventos en HTML.


Más ejemplos

Ejemplo

Alinear imagen (con CSS):

Inténtalo tú mismo »

Ejemplo

Agregar borde de imagen (con CSS):

Inténtalo tú mismo »

Ejemplo

Agregue márgenes izquierdo y derecho a la imagen (con CSS):

Inténtalo tú mismo »

Ejemplo

Agregue márgenes superior e inferior a la imagen (con CSS):

Inténtalo tú mismo »

Ejemplo

Cómo insertar imágenes de otra carpeta o de otro sitio web:

Inténtalo tú mismo »

Ejemplo

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

Inténtalo tú mismo »

Ejemplo

Cómo crear un mapa de imágenes, con regiones en las que se puede hacer clic. Cada región es un hipervínculo:

Computadora Phone
Taza de café

Inténtalo tú mismo »


páginas relacionadas

Tutorial HTML: Imágenes HTML

Referencia HTML DOM: objeto de imagen

Tutorial de CSS: estilo de imágenes


Configuración CSS predeterminada

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

close