La HTML La etiqueta IMG gobierna la inserción de imágenes y otros objetos gráficos estáticos dentro de una página web. Esta etiqueta común admite varios atributos obligatorios y opcionales que agregan riqueza a su capacidad para diseñar un sitio web atractivo y centrado en imágenes.
Un ejemplo de una etiqueta IMG HTML completamente formada se ve así:
Atributos de etiqueta IMG obligatorios
src = "/ ruta / a / imagen.jpg"
El único atributo que necesita para que una imagen se muestre en una página web es el src atributo. Este atributo identifica el nombre y la ubicación del archivo de imagen que se mostrará.
alt = "Descripción de la imagen"
Para escribir XHTML y HTML4 válidos, el alt El atributo también es obligatorio. Este atributo se utiliza para proporcionar a los navegadores no visuales texto que describe la imagen. Los navegadores muestran el texto alternativo de diferentes formas. Algunos lo muestran como una ventana emergente cuando coloca el mouse sobre la imagen, otros lo muestran en propiedades cuando hace clic con el botón derecho en la imagen y algunos no lo muestran en absoluto.
Utilizar el texto alternativo para dar detalles adicionales sobre la imagen que no son relevantes o importantes para el texto de la página web. Pero recuerde que en los lectores de pantalla y otros navegadores de solo texto, el texto se leerá en línea con el resto del texto de la página. Para evitar confusiones, utilice un texto alternativo descriptivo que diga (por ejemplo) "Acerca del diseño web y HTML" en lugar de solo "logotipo".
La alt El texto también es esencial para SEO (Search Engine Optimization). Los bots que los motores de búsqueda, como Google, utilizan para explorar el contenido de los sitios no pueden "ver" imágenes. Dependen de la alt texto para determinar qué hay en la página.
En HTML5, la alt El atributo no siempre es obligatorio, porque puede utilizar un subtítulo para agregarle más descripción. También puede utilizar este atributo para indicar un ID que contenga una descripción completa:
aria-describedby = "Descripción de la imagen"
Tampoco se requiere texto alternativo si la imagen es puramente decorativa, como un gráfico en la parte superior de una página web o iconos. Pero si no está seguro, incluya texto alternativo por si acaso.
Atributos de tamaño
ancho = "500"y.
altura = "500"Dependiendo de su diseño, use el. altura y. ancho
Generalmente, querrá que el tamaño de la imagen se establezca en su CSS. La mayoría de las veces, ese será el resultado de las dimensiones del contenedor principal de una imagen. Este enfoque permite la mayor flexibilidad al adaptarse a diferentes tamaños de pantalla. Sin embargo, todavía hay casos en los que es posible que desee especificar las dimensiones de la imagen como atributos HTML.
Otros atributos útiles de IMG
title = "Nombre de imagen descriptivo"El atributo es un atributo global que se puede aplicar a cualquiera. Elemento HTML. Además, el. título
La mayoría de los navegadores admiten título atributo, pero lo hacen de diferentes maneras. Algunos muestran el texto como una ventana emergente, mientras que otros lo muestran en pantallas de información cuando el usuario hace clic con el botón derecho en la imagen. Puedes usar el título atributo para escribir información adicional sobre la imagen, pero no cuente con que esta información esté oculta o visible. Definitivamente no debería usar esto para ocultar palabras clave para motores de búsqueda. Esta práctica ahora es penalizada por la mayoría de los motores de búsqueda.
usemap = ""y.
ismap = ""Estos dos atributos establecen el lado del cliente () y el lado del servidor (ISMAP) mapas de imágenes
longdesc = "Una descripción más detallada de su imagen"La. longdesc
Atributos IMG obsoletos y obsoletos
Varios atributos ahora están obsoletos en HTML5 o en HTML4. Para obtener el mejor HTML, debe buscar otras soluciones en lugar de utilizar estos atributos.
border = "3"
alinear = "izquierda"Este atributo le permite colocar una imagen dentro del texto y hacer que el texto fluya a su alrededor. Puede alinear una imagen a la derecha oa la izquierda. Se ha desaprobado en favor de. propiedad CSS flotante
hspcace = "10"y.
vspace = "10"La. hspace y. vspace los atributos agregan espacios en blanco horizontalmente ( hspace) y verticalmente ( vspace
lowsrc = "/ ruta / a / lowres.jpg"La. lowsrc El atributo proporciona una imagen alternativa cuando la fuente de la imagen es tan grande que se descarga muy lentamente. Por ejemplo, es posible que tenga una imagen de 500 KB que desee mostrar en su página web, pero 500 KB tardaría mucho en descargarse. Así que crea una copia mucho más pequeña de la imagen, tal vez en blanco y negro o simplemente extremadamente optimizada, y la coloca en formato. lowsrc
La lowsrc El atributo se agregó a Netscape Navigator 2.0 a la etiqueta. Formaba parte del nivel DOM 1, pero luego se eliminó del nivel DOM 2. La compatibilidad del navegador ha sido incompleta para este atributo, aunque muchos sitios afirman que es compatible con todos los navegadores modernos. No está obsoleto en HTML4 ni obsoleto en HTML5 porque nunca fue una parte oficial de ninguna de las dos especificaciones.
Evite usar este atributo y en su lugar optimice sus imágenes para que se carguen rápidamente. La velocidad de carga de la página es una parte fundamental de un buen diseño web, y las imágenes grandes ralentizan enormemente las páginas, incluso si utiliza el lowsrc atributo.