Es un elemento o etiqueta que se utiliza en el código HTML para indicar que se añadirá un archivo de imagen. La etiqueta img permite que se muestren las imágenes, pero en caso de que el archivo esté dañado también es capaz de describir el gráfico con algunos atributos, lo que es ideal para ordenadores con navegadores no gráficos, como los utilizados por personas con discapacidad visual.
¿Qué es img?
Índice de contenidos
Se trata de un elemento que representa a una imagen en el código HTML, este se utiliza entre corchetes angulares al momento de insertar el archivo. Sin embargo, a diferencia de otros elementos no es necesario utilizar el mismo código al final del mismo. De esta forma, la imagen es un recurso externo que será incrustado en el cuerpo de la página, es necesario que el diseñador web se asegure de que el recurso externo está especificado con un atributo src.
Es importante que esta etiqueta solo se utilice con imágenes que tendrán un significado relacionado con el contenido, ya que usualmente es utilizado de forma inadecuada para añadir separadores especiales en archivos gráficos. Sin embargo, existen herramientas de organización de contenidos que permiten insertar estos separadores sin necesidad de incluir este elemento.
¿Cuáles son los atributos que se pueden utilizar con IMG?
Como se mencionó en la introducción, este elemento puede ser apoyado por otros atributos en caso de que el archivo esté dañado, pero también existen otras opciones que permiten modificar el texto alrededor de la imagen, entre otras funcionalidades que pueden ser muy útiles para el diseño gráfico de un proyecto digital, los tributos más utilizados en este caso son los siguientes.
- Alt: Es una descripción alternativa del elemento gráfico, se muestra en caso de que la imagen no pueda ser vista, por ejemplo en los navegadores sin soporte o en navegadores para usuarios de discapacidad visual.
- Src: Incluye la URL de la imagen, acompaña obligatoriamente al elemento img.
- Height: Con éste se puede indicar la altura de la imagen en valores de píxeles en CSS para HTML 5 y en porcentaje para HTML 4.
- Width: Indica el ancho de la imagen en píxeles, cumpliendo con las condiciones nombradas en el atributo anterior.
- Longdesc: Permite ampliar la descripción de la imagen, añadiendo una URL para complementar el texto con el atributo alt.
¿Qué tipo de imagen soporta este elemento?
Normalmente, HTML no ofrece una lista de formatos de imagen que se pueden incluir con este elemento, sin embargo los más utilizados son los siguientes.
- Jpg o jpeg.
- GIF.
- PNG.
- APNG.
- SVG.
- BMP.
Ejemplo de IMG
Normalmente, sólo podrás observar este elemento si le echas un vistazo al código HTML de un documento o página web en Internet, se verá de la siguiente forma.
- <img src=»logo.png» alt=»logo»>
En este caso, se incluyen los atributos alt y src, el src, que indica el enlace del archivo y el alt que incluye la descripción de la imagen. En este caso, ambos atributos también son importantes para el posicionamiento web, ya que los robots de los buscadores pueden utilizar el texto alternativo para relacionar con las palabras clave y el enlace para evaluar el elemento.
Más información sobre IMG
¿Sabías que también existen otros elementos en HTML para indicar otros recursos gráficos? Como picture, objetc y embed. Aquí tienes un par de enlaces para ampliar esta información.