La etiqueta HTML 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 la imagen.
Un ejemplo de una etiqueta IMG HTML completamente formada se ve así:
Atributos de etiqueta IMG requeridos
SRC.El único atributo que necesita para obtener una imagen para mostrar en una página web es el atributo SRC. Este atributo identifica el nombre y la ubicación del archivo de imagen que se mostrará.
ALT.Para escribir XHTML y HTML4 válidos, el ALT 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 maneras. 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 otros no lo muestran en absoluto.
Utilice el texto alternativo para proporcionar 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 en la página. Para evitar confusiones, use el texto alternativo descriptivo que dice (por ejemplo), "Acerca del diseño web y HTML" en lugar de solo "logotipo".
En HTML5, el ALT el atributo no siempre es necesario, porque puedes usar un título para agregarle más descripción. También puede utilizar el atributo. ARIA DESCRIBIDO para indicar una identificación que contiene una descripción completa.
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 íconos. Pero si no está seguro, incluya el texto alt por si acaso.
Atributos IMG recomendados
ANCHURA y ALTURA. Debes adquirir el hábito de usar siempre el ANCHURA y ALTURA atributos Y siempre debe usar el tamaño real y no cambiar el tamaño de sus imágenes con el navegador.
Estos atributos aceleran la representación de la página porque el navegador puede asignar espacio en el diseño para la imagen y luego continuar descargando el resto del contenido, en lugar de esperar a que se descargue la imagen completa.
Otros atributos útiles de IMG
TÍTULO. El atributo es un atributo global que se puede aplicar a cualquier elemento HTML. Además, la TÍTULO atributo le permite agregar información adicional sobre la imagen.
La mayoría de los navegadores soportan 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 está penalizada por la mayoría de los motores de búsqueda.
USEMAP y ISMAP. Estos dos atributos configuran los mapas de imagen del lado del cliente () y del lado del servidor (ISMAP) de sus imágenes.
LONGDESC. El atributo admite URL para una descripción más larga de la imagen. Esta característica hace que sus imágenes sean más accesibles.
Atributos IMG obsoletos y obsoletos
Varios atributos ahora están obsoletos en HTML5 o en desuso en HTML4. Para obtener el mejor HTML, debe encontrar otras soluciones en lugar de usar estos atributos.
FRONTERA. El atributo define el ancho en píxeles de cualquier borde alrededor de la imagen. Ha sido desaprobado a favor de CSS en HTML4 y está obsoleto en HTML5.
ALINEAR. 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 o la izquierda. Ha quedado en desuso en favor de la propiedad float CSS en HTML4 y está obsoleta en HTML5.
ESPACIO y VSPACE. los ESPACIO y VSPACE los atributos añaden espacios en blanco horizontalmente (ESPACIO) y verticalmente (VSPACE). El espacio en blanco se agregará a ambos lados del gráfico (arriba y abajo o a la izquierda y a la derecha), por lo que si solo necesita espacio en un lado, debe usar CSS. Estos atributos han quedado en desuso en HTML4 a favor de la propiedad de margen de CSS, y están obsoletos en HTML5.
LOWSRC. los LOWSRC el atributo proporciona una imagen alternativa cuando la fuente de su imagen es tan grande que se descarga extremadamente lentamente. Por ejemplo, puede tener una imagen de 500 KB que desee mostrar en su página web, pero 500KB demoraría mucho tiempo en descargarse. Así que creas una copia mucho más pequeña de la imagen, tal vez en blanco y negro o simplemente extremadamente optimizada, y la pones en la LOWSRC atributo. La imagen más pequeña se descargará y mostrará primero, y luego, cuando aparezca la imagen más grande, reemplazará a la de fuente baja.
los LOWSRC atributo fue agregado a Netscape Navigator 2.0 a la IMG etiqueta. Era parte del nivel 1 de DOM, pero luego se eliminó del nivel 2. El soporte del navegador ha sido incompleto para este atributo, aunque muchos sitios afirman que todos los navegadores modernos lo admiten. No está en desuso en HTML4 ni está obsoleto en HTML5 porque nunca fue parte oficial de ninguna de las 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 crítica de un buen diseño web, y las imágenes grandes reducen la velocidad de las páginas enormemente, incluso si usa la LOWSRC atributo.
