El tag 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 añaden riqueza a su capacidad de diseñar un sitio web atractivo y centrado en la imagen.
Un ejemplo de un tag HTML IMG completamente formado se ve así:
Índice de contenidos
Atributos de etiqueta IMG necesarios
SRC.
>
El único atributo que necesita para obtener una imagen que se muestre en una página web es el atributo SRC. Este atributo identifica el nombre y la ubicación del archivo de imagen que se va a mostrar.
ALT.
Para escribir XHTML y HTML4 válidos, también se requiere el atributo ALT. Este atributo se utiliza para proporcionar a los navegadores no visuales texto que describa la imagen. Los navegadores muestran el texto alternativo de diferentes maneras. Algunos lo muestran como una ventana emergente al colocar el ratón sobre la imagen, otros lo muestran en propiedades al hacer clic con el botón derecho del ratón sobre la imagen, y otros no lo muestran en absoluto.
Utilice el texto alternativo para dar detalles adicionales sobre la imagen que no sean relevantes o importantes para el texto de la página web. Pero recuerda que en los lectores de pantalla y otros navegadores de sólo 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), «Sobre diseño web y HTML» en lugar de sólo «logotipo».
En HTML5, el atributo ALT no siempre es obligatorio, ya que puede utilizar un subtítulo para añadirle más descripción. También puede utilizar este atributo para indicar un ID que contiene una descripción completa:
ARIA-DESCRIBEDBY
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 IMG recomendados
WIDTH
y
HEIGHT
Debería adquirir el hábito de utilizar siempre los atributos WIDTH y HEIGHT. Y siempre debe usar el tamaño real y no cambiar el tamaño de sus imágenes con el navegador.
Estos atributos aceleran el renderizado de la página porque el navegador puede asignar espacio en el diseño de la imagen, y luego continuar descargando el resto del contenido, en lugar de esperar a que toda la imagen se descargue.
Otros atributos útiles de la IMG
La mayoría de los navegadores soportan el atributo TITLE, 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 del ratón sobre la imagen. Puede utilizar el atributo TITLE para escribir información adicional sobre la imagen, pero no cuente con que esta información esté oculta o sea visible. Definitivamente no deberías usar esto para ocultar palabras clave para los motores de búsqueda. Esta práctica es ahora penalizada por la mayoría de los motores de búsqueda.
LONGDESC
Este atributo soporta URLs para una descripción más larga de la imagen. Esta función hace que sus imágenes sean más accesibles.
Atributos IMG obsoletos y desaprobados
Varios atributos están obsoletos en HTML5 o obsoletos en HTML4. Para el mejor HTML, debería encontrar otras soluciones en lugar de usar estos atributos.
El atributo LOWSRC se agregó a Netscape Navigator 2.0 a la etiqueta IMG. Formaba parte del nivel 1 de DOM, pero luego se eliminó del nivel 2 de DOM. El soporte de navegadores ha sido deficiente para este atributo, aunque muchos sitios afirman que es soportado por todos los navegadores modernos. No es obsoleto en HTML4 ni obsoleto en HTML5 porque nunca fue una 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 ralentizan enormemente las páginas, incluso si se utiliza el atributo LOWSRC.
