Código HTML para atributos de imagen

Mejorar el SEO de tu web implica un esfuerzo muy necesario, es importante colocar títulos a las imágenes para que aparezcan en los buscadores, te enseñamos cómo hacerlo:

El HTML <img> elemento representa una imagen en el documento.

Nota de uso: Los navegadores no siempre muestran la imagen referenciada por el elemento.Este es el caso de los navegadores no gráficos (incluidos los utilizados por las personas con problemas de visión), si el usuario opta por no mostrar imágenes, o si el navegador no puede mostrar la imagen, ya que no es válido o un tipo no soportado . En estos casos, el navegador puede reemplazar la imagen con el texto definido en este elemento alt atributo.

Las categorías de contenido	El flujo de contenido , contenido estático , contenido incrustado, el contenido palpable. Si el elemento tiene una usemap atributo, sino que también es una parte de la categoría de contenido interactivo.
contenido permitido	Nada, es un elemento vacío .
tag omisión	Debe tener una etiqueta de inicio y no debe tener una etiqueta de cierre.
elementos primarios permitidos	Cualquier elemento que acepte contenido incrustado.
interfaz DOM	HTMLImageElement

atributos

Este elemento incluye los atributos globales .

align  Obsoleto desde HTML4.01 , obsoleto desde HTML5 Uso del vertical-alignpropiedad CSS

La alineación de la imagen con respecto a su contexto circundante.

alt

Este atributo define el texto alternativo que describe la imagen. Los usuarios verán esta muestra si el URL de la imagen es incorrecta, la imagen no está en uno de losformatos compatibles , o si la imagen no se descarga.

Nota de uso: La omisión de este atributo indica que la imagen es una parte clave del contenido, pero sin equivalente textual está disponible. Al establecer este atributo a la cadena vacía indica que esta imagen es no una parte clave del contenido; navegadores no visuales pueden omitirlo en la representación.

frontera  Obsoleto desde HTML4.01 , obsoleto desde HTML5

El ancho de un borde alrededor de la imagen.

crossorigin HTML5

Este atributo enumerado indica si el ir a buscar de la imagen relacionada debe hacerse utilizando CORS o no. Habilitadas las imágenes-CORS pueden ser reutilizados en el <canvas> elemento sin ser contaminada . Los valores permitidos son:

"anónimo"

Una solicitud de origen cruzado (es decir, con origen: cabecera HTTP) se lleva a cabo. Pero no se envía credenciales (es decir, no hay ninguna cookie, no hay ningún certificado X.509, y no HTTP se envía la autenticación básica). Si el servidor no da credenciales al sitio de origen (si no se establece el Access-Control-Allow-Origen: cabecera HTTP), la imagen será contaminado y su uso restringido.

El "uso credenciales"

Una solicitud de origen cruzado (es decir, con origen: cabecera HTTP) realizado con credencial se envía (es decir, una galleta, un certificado y la autenticación básica HTTP se realiza). Si el servidor no da credenciales al sitio de origen (a través de Access-Control-Allow-Credenciales: cabecera HTTP), la imagen serácontaminado y su uso restringido.

Cuando no está presente, el recurso se recupera sin una solicitud CORS (es decir, sin necesidad de enviar el origen: cabecera HTTP), evitando su uso no contaminada en<canvas> elementos. Si no es válido, se maneja como si la palabra clave enumeradoen el anonimato se utilizó. Ver configuración CORS atributos para obtener información adicional.

altura

La altura intrínseca de la imagen en HTML 5 píxeles CSS o HTML 4 en píxeles o como porcentaje.

hspace  Desfasada desde HTML4.01 , obsoleto desde HTML5

El número de píxeles de espacio en blanco para insertar a la izquierda y derecha de la imagen.

ismap

Este atributo booleano indica que la imagen es parte de un mapa del lado del servidor.Si es así, las coordenadas precisas de un clic se envían al servidor.

Nota de uso: Se permite que este atributo sólo si el <img> elemento es un descendiente de un <a> elemento con un válido href atributo.

longdesc

La URL de la descripción de la imagen que se mostrará, que complementa la alt texto.

Nombre  Obsoleto desde HTML4.01 , obsoleto desde HTML5

Un nombre para el elemento. Es compatible con HTML 4 sólo para compatibilidad con versiones anteriores. Utilice la Identificación del atributo en su lugar.

referrerpolicy 

Una cadena que indica el remitente para utilizar al recuperar el recurso:

• "sin referencia" significa que el Referer: cabecera no se enviará.
• " Sin remitente-cuando-rebaja " lo que significa que hay Referer: cabecera será enviado al navegar a un origen sin TLS (HTTPS). Este es el comportamiento por defecto de un agente de usuario, si no hay política se especifique lo contrario.
• "origen" lo que significa que la referencia será el origen de la página, que es más o menos el esquema, el anfitrión y el puerto.
• "Origen-cuando-cruz-origen" lo que significa que las navegaciones de otros orígenes se limitará a dichos regímenes, el host y el puerto, mientras que las navegaciones en el mismo origen incluirán el camino de la de referencia.
• "inseguros-url" lo que significa que la URL de referencia incluirá el origen y la ruta de acceso (pero no el fragmento, la contraseña o nombre de usuario). Este caso no es seguro, ya que puede filtrarse orígenes y trayectorias de los recursos protegidos-TLS a orígenes inseguros.

tamaños HTML5

Una lista de una o más cadenas separadas por comas que indican un conjunto de tamaños de fuentes. Cada tamaño de fuente se compone de:

1. una condición de medios de comunicación. Esto debe ser omitido para el último elemento.
2. un valor de tamaño de fuente.

Valores de tamaño de Fuente especifican el tamaño de la pantalla prevista de la imagen. Los agentes de usuario utilizan el tamaño de fuente de corriente para seleccionar una de las fuentes suministradas por el srcset atributo, cuando esas fuentes se describen utilizando el ancho ( ' w ') descriptores. El tamaño fuente seleccionada afecta el tamaño intrínseco de la imagen (tamaño de visualización de la imagen si no se aplica un estilo CSS). Si el srcset atributo está ausente, o no contiene valores con una anchura ( w descriptor), entonces los tamaños atributo no tiene ningún efecto.

src

La URL de la imagen. Este atributo es obligatorio para el <img> elemento. En los navegadores de apoyo srcset , src se trata de una imagen candidato con un descriptor de densidad de píxeles como 1x menos una imagen con este descriptor densidad de píxeles ya está definido en srcset o srcset contiene ' w ' descriptores.

srcset HTML5

Una lista de una o más cadenas separadas por comas que indican un conjunto de posibles fuentes de imagen para el agente de usuario para su uso. Cada cadena se compone de:

1. una URL a una imagen,
2. opcionalmente, espacio en blanco seguido por uno de:
   • un descriptor de anchura, que es un entero positivo seguido directamente por " w '. El descriptor de anchura se divide por el tamaño de la fuente dada en los  tamaños de atributo para calcular la densidad de píxeles efectivos.
   • un descriptor de densidad de píxeles, que es un número de coma flotante positiva seguida directamente por ' x '.

Si no se especifica un descriptor, la fuente se asigna el descriptor por defecto: 1x .

No es válido para mezclar los descriptores de ancho y descriptores densidad de píxeles en la misma srcset atributo. Descriptores duplicados (por ejemplo, dos fuentes en la misma srcset que están ambos descritos con ' 2x ') no son válidas, también.

Los agentes de usuario se deja a criterio elegir cualquiera de las fuentes disponibles.Esto les proporciona un margen significativo para adaptar su selección en función de cosas como las preferencias del usuario o las condiciones de ancho de banda.

anchura

La anchura intrínseca de la imagen en HTML 5 píxeles CSS o HTML 4 en píxeles o como porcentaje.

usemap

La dirección URL parcial (que empiezan con '#') de un mapa de imagen asociada con el elemento.

Nota de uso: No se puede utilizar este atributo si el <img> elemento es un descendiente de un <a> o <button> elemento.

vspace  Obsoleto desde HTML4.01 , obsoleto desde HTML5

El número de píxeles de espacio en blanco para insertar arriba y debajo de la imagen.

Formatos de imagen soportados

El estándar HTML no da una lista de los formatos de imagen que debe ser apoyada, por lo que cada agente de usuario es compatible con un conjunto diferente de los formatos.Gecko es compatible con:

JPEG

GIF , incluyendo GIF animados

PNG

APNG

SVG

BMP

BMP ICO

PNG ICO

Interacción con CSS

En cuanto a CSS, <img> es un elemento reemplazado . No tiene ninguna línea de base, por lo que cuando las imágenes se usan en un contexto de formato de línea convertical-align : línea de base , la parte inferior de la imagen se coloca en la línea de base del contenedor.

Dependiendo de su tipo, una imagen puede tener una anchura y altura intrínseca, pero no necesariamente tienen. Por ejemplo, las imágenes SVG no tienen dimensiones intrínsecas.

Ejemplo 1

< Img  src = " MDN-logo-sm.png "  alt = " MDN " >

Ejemplo 2: Enlace de Imagen

< Un  href = " https://developer.mozilla.org/ " > < img  src = " MDN-logo-sm.png "  alt = " MDN " > </ a >

Ejemplo 3: Uso de la srcset atributo

La src atributo es un 1x candidato en las aplicaciones de usuario que soportan srcset .

< Img  src = " MDN-logo-sm.png " 
       alt = " MDN " 
       srcset = " MDN-logo-HD.png 2x " >

Ejemplo 4: Uso del srcset y el tamaño de los atributos

La src atributo se ignora en los agentes de usuario que soportan srcset cuando se utiliza ' w descriptores. Cuando el (min-width: 600px) partidos condición medios de comunicación, la imagen será 200 píxeles de ancho, de lo contrario será 50vw amplia (50% del ancho de la ventana gráfica).

< Img  src = " reloj-demo-thumb-200.png " 
       alt = " reloj " 
       srcset = " reloj-demo-thumb-200.png 200w, reloj-demo-thumb-400.png 400w "
       tamaños = " (min -width: 600px) 200 píxeles, 50vw " >

Fuente: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img