En este tutorial veremos ciertos conceptos básicos de la etiqueta «img» de HTML, que se utiliza para mostrar imágenes.
Uso básico de la etiqueta «img»
La etiqueta img dispone del atributo src, que es el que permite indicar la ubicación de la imagen que queremos mostrar. Aquí tienes un ejemplo:
<img src="imagen.jpg" />Puedes utilizar imágenes de innumerables formatos, aunque los más habituales son los formatos JPG, GIF, PNG, WebP y SVG.
Las imágenes pueden estar ubicadas tanto localmente como en un servidor remoto:
<img src="https://dominio.tld/img/imagen.jpg" />Además de indicar la ubicación, también debes proporcionar una descripción de la imagen, para lo cual se utiliza el atributo alt, que te permitirá escribir un pequeño texto que se mostrará en pantalla en caso de que la imagen no pueda mostrarse.
<img src="robot.jpg" alt="Imagen de un robot" />Además, el atributo alt también es utilizado por los motores de búsqueda, de modo que puedan saber cuál el contenido de las imágenes.
Podrás definir las dimensiones de las imágenes mediante los atributos width y height, que indican el ancho y el alto de cada imagen respectivamente. De este modo, el navegador reservará el espacio indicado para cada imagen, de modo que no se modifique el aspecto del documento cuando se carguen las imágenes. Estas etiquetas aceptan un número entero como valor, que expresará los pixels de ancho y de alto que ocupará la imagen. Aquí tienes un ejemplo:
<img src="persona.jpg" alt="Imagen de una persona" width="500" height="600" />La imagen definida en este ejemplo, ocupará 500 pixels de ancho y 600 pixels de alto.
Imágenes responsivas con «srcset»
Además del atributo src que hemos visto, también podrás hacer uso del atributo srcset, mediante el cual podrás configurar imágenes responsivas que el navegador utilizará dependiendo del ancho de pantalla o de la densidad de pixels del navegador.
Gracias a la etiqueta srcset podrás agregar imágenes de diferentes tamaños para definir una misma imagen. El navegador se limitará a descargar únicamente aquella que coincida con la configuración del usuario, ahorrando un valioso ancho de banda en caso de que el usuario use un dispositivo de pantalla reducida como puede ser un teléfono.
En el siguiente ejemplo agregamos la imagen que se mostrará por defecto mediante el atributo src y, seguidamente, también definimos tres imágenes adicionales que se mostrarán en lugar de la imagen por defecto si el dispositivo que utiliza el usuario cumple los requisitos indicados:
<img src="persona.jpg" alt="Imagen de una persona"
srcset="persona-600.jpg 600w,
persona-900.jpg 900w,
persona-1200.jpg 1200w">He agregado la etiqueta en varias líneas para que resulte más legible, pero no es imprescindible.
Lo que hemos agregado como valor de la etiqueta srcset son diversas imágenes junto con el ancho de pantalla que ocupan. En función de imágenes proporcionadas, el navegador escogerá aquella imagen que mejor se adapte a la pantalla automáticamente. Para ello, realiza un sencillo cálculo con el ancho de la pantalla del usuario y el ancho de las imágenes disponibles, escogiendo aquella con un ratio más próximo al ancho de pantalla.
La etiqueta img también dispone del atributo sizes, que nos permite aplicar consideraciones adicionales sobre el tamaño de las imágenes. Podrás configurar el espacio que ocupará la imagen según el ancho de la pantalla del dispositivo del usuario. Veamos un ejemplo:
<img src="persona.jpg" alt="Imagen de una persona"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 900px"
srcset="persona-600.jpg 600w,
persona-900.jpg 900w,
persona-1200.jpg 1200w">En este ejemplo, hemos agregado diferentes condiciones separadas por coma como valor del atributo sizes, definiendo el tamaño de la imagen en relación con el viewport o ancho de pantalla del dispositivo del usuario. Vamos a ver estas condiciones una por una:
- La condición
(max-width: 600px) 100vwindica que la imagen ocupará el 100% de la pantalla cuando el ancho de misma sea de, como máximo, 600px. - La condición
(max-width: 900px) 50vwindica que la imagen ocupará el 50% de la pantalla cuando el ancho de misma sea de, como máximo, 900px. Sin embargo, la primera condición tiene prioridad, por lo que esta regla solamente se tendrá en cuenta cuando el ancho de pantalla sea de entre 601px y 900px. - La condición
800pxes la que se utilizará en cualquier otro caso. Es decir, cuando el ancho de pantalla sea superior a 900px, el tamaño de la imagen será de 800px.
La unidad vw significa viewport width, y hace referencia a la pantalla del usuario. Su valor es el porcentaje del ancho de la misma, por lo que 1vw equivale al 1% del ancho de la pantalla y 100vw equivale al 100% del ancho de la pantalla. A modo de información, también existe la unidad vh, que hace referencia a la altura de la pantalla del usuario. Su valor es el porcentaje de alto de la misma, por lo que 1vh equivale al 1% del la altura de la pantalla y 100vh equivale al 100% de la altura de la pantalla.
Si la creación de estas imágenes te resulta engorrosa, siempre puedes recurrir a alguna de las múltiples herramientas online que automatizan este proceso.
Si quieres conocer otros métodos de inclusión de imágenes en documentos HTML, consulta cómo utilizar la etiqueta picture.
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
