Tutorial HTML: Imagen (img)

La etiqueta de imagen (<img>) en HTML es uno de los elementos esenciales de la web. Esta etiqueta se utiliza para insertar imágenes en un documento HTML. Una de las principales características de la etiqueta <img> es que es una etiqueta de cierre automático, lo que significa que no necesita una etiqueta de cierre.

La etiqueta <img> consta principalmente de dos atributos:

1. src (source): este atributo indica la ubicación (URL) de la imagen que se desea mostrar. Puede ser una ruta a un archivo en el mismo servidor o una URL a un recurso en cualquier otro servidor en la web.

2. alt (alternative text): este atributo se utiliza para especificar un texto alternativo que se mostrará en caso de que la imagen no se pueda cargar. Este texto también es útil para los motores de búsqueda y las tecnologías de asistencia, ya que les ayuda a entender qué representa la imagen.

A continuación se presenta un ejemplo básico de cómo se utiliza la etiqueta <img>:

<img src="url_de_la_imagen.jpg" alt="descripción de la imagen">

Además de src y alt, hay varios otros atributos que se pueden utilizar con la etiqueta <img>, como width (ancho), height (alto), class, id, style, entre otros.

El atributo width se utiliza para definir el ancho de la imagen y height se utiliza para definir la altura de la imagen. Ambos se especifican en píxeles.

Por ejemplo:

<img src="url_de_la_imagen.jpg" alt="descripción de la imagen" width="500" height="600">

En este caso, la imagen tendrá un ancho de 500 píxeles y una altura de 600 píxeles.

El uso de atributos como class, id y style es más avanzado. class e id se utilizan para referenciar la imagen desde CSS o JavaScript. style se utiliza para aplicar estilos CSS directamente a la imagen.

Por ejemplo, si queremos aplicar un margen de 10px y una sombra a nuestra imagen, podríamos hacerlo de la siguiente manera:

<img src="url_de_la_imagen.jpg" alt="descripción de la imagen" style="margin: 10px; box-shadow: 10px 10px 5px grey;">

Es importante tener en cuenta que las imágenes pueden tener un impacto significativo en el tiempo de carga de un sitio web. Por lo tanto, se recomienda optimizar las imágenes para la web antes de usarlas en un sitio web.

Por último, siempre es una buena práctica proporcionar un texto alternativo (alt) adecuado para las imágenes. Esto no solo ayuda en caso de que la imagen no se pueda cargar, sino que también mejora la accesibilidad del sitio web para los usuarios que dependen de lectores de pantalla u otras tecnologías de asistencia.