¿Cómo insertar imágenes en tu página web con la etiqueta img de HTML?

Las imágenes son un elemento esencial para crear páginas web atractivas, informativas y dinámicas. Las imágenes pueden transmitir mensajes, emociones, datos o instrucciones de forma visual y eficaz. Sin embargo, para insertar imágenes en tu página web, no basta con copiar y pegar el archivo de la imagen.

Necesitas usar una etiqueta especial de HTML que te permita especificar la fuente, el tamaño, el estilo y la descripción de la imagen. Esta etiqueta es la etiqueta <img>.

En este artículo te explicaremos qué es la etiqueta <img>, cómo se usa, qué atributos tiene y qué consejos debes seguir para optimizar el uso de las imágenes en tu página web.

¿Qué es la etiqueta <img>?

La etiqueta <img> es una etiqueta de HTML que se usa para insertar una imagen en un documento web. HTML es el lenguaje de marcado que se usa para crear páginas web. Un documento web es un archivo que contiene el código HTML que define la estructura y el contenido de una página web. Una imagen es un archivo que contiene una representación gráfica de algo, como una fotografía, un dibujo, un diagrama o un icono.

La etiqueta <img> es una etiqueta vacía, lo que significa que no tiene contenido ni etiqueta de cierre. Solo tiene atributos que indican las características de la imagen. La etiqueta <img> se puede colocar en cualquier parte del documento web, dentro de otras etiquetas como <p>, <div>, <li>, etc.

¿Cómo se usa la etiqueta <img>?

La sintaxis básica de la etiqueta <img> es la siguiente:

<img src=“url” alt=“descripción” />

El atributo src indica la URL de la imagen que se quiere mostrar. La URL es la dirección web que identifica el recurso que se quiere acceder. La URL puede ser absoluta o relativa. Una URL absoluta es una dirección completa que incluye el protocolo, el dominio y el camino del recurso. Por ejemplo: https://www.bing.com/images/logo.png. Una URL relativa es una dirección parcial que se basa en la ubicación del documento web actual. Por ejemplo: images/logo.png.

El atributo alt proporciona un texto alternativo que describe la imagen, para el caso de que la imagen no se pueda mostrar o el usuario tenga dificultades para verla. El texto alternativo es útil para los lectores de pantalla y para la accesibilidad web. El texto alternativo debe contener una breve explicación del contenido de la imagen.

Estos dos atributos son obligatorios y deben especificarse siempre. Por ejemplo, si queremos mostrar el logo de Bing en nuestra página web, podríamos usar el siguiente código:

<img src=“https://www.bing.com/images/logo.png” alt=“Logo de Bing” />

El resultado sería el siguiente:

<|graphic_art(“the logo of Bing”)|>

¿Qué atributos tiene la etiqueta <img>?

Además de los atributos src y alt, la etiqueta <img> admite otros atributos opcionales que permiten modificar el aspecto y el comportamiento de la imagen. Algunos de estos atributos son:

• width y height: estos atributos indican el ancho y el alto de la imagen en píxeles o en porcentaje. Estos atributos son opcionales, pero pueden ayudar a mejorar el rendimiento y la apariencia de la página web, al reservar el espacio necesario para la imagen antes de cargarla. Por ejemplo: <img src=“https://www.bing.com/images/logo.png” alt=“Logo de Bing” width=“200” height=“100” />
• style: este atributo permite aplicar estilos CSS a la imagen, como el borde, el margen, el relleno, etc. CSS es un lenguaje que se usa para definir el diseño y la presentación de las páginas web. El atributo style se puede usar para darle un aspecto personalizado a la imagen. Por ejemplo: <img src=“https://www.bing.com/images/logo.png” alt=“Logo de Bing” style=“border: 5px solid blue;” />
• allow: este atributo especifica una política de características que restringe qué tipos de contenido se pueden mostrar dentro de la imagen. Este atributo se usa principalmente cuando la imagen contiene contenido interactivo o multimedia, como un vídeo o un mapa. El atributo allow se puede usar para habilitar o deshabilitar ciertas funciones del contenido, como el sonido, el zoom, el modo de pantalla completa, etc. Por ejemplo: <img src=“https://www.youtube.com/embed/5qap5aO4i9A” alt=“Lo-fi hip hop radio” allow=“autoplay; fullscreen” />
• sandbox: este atributo activa un modo de seguridad que aísla el contenido de la imagen del resto de la página web, evitando que ejecute scripts, acceda al almacenamiento local, envíe formularios, etc. Este atributo se usa principalmente cuando la imagen contiene contenido de otro origen o de una fuente no confiable. El atributo sandbox se puede usar para proteger la página web de posibles ataques o vulnerabilidades del contenido. Por ejemplo: <img src=“https://example.com/unsafe-image.jpg” alt=“Imagen insegura” sandbox />

Para ver más atributos y ejemplos de la etiqueta <img>, se puede consultar la documentación de MDN, Neoguias o HTML5 en la educación.

¿Consejos debes seguir para optimizar el uso de las imágenes en tu página web?

El uso de las imágenes en tu página web puede tener un gran impacto en la experiencia de los usuarios y en el posicionamiento SEO de tu página web. Por eso, es importante seguir algunos consejos para optimizar el uso de las imágenes y evitar problemas o inconvenientes. Algunos de estos consejos son:

• Usa imágenes relevantes y de calidad: las imágenes que uses en tu página web deben estar relacionadas con el tema y el propósito de tu página web. Además, las imágenes deben tener una buena resolución y una buena compresión, para que se vean bien y no ocupen demasiado espacio. Puedes usar herramientas como TinyPNG o [Compressor.io] para reducir el tamaño de tus imágenes sin perder calidad.
• Usa formatos adecuados: los formatos más comunes para las imágenes en la web son JPEG, PNG y GIF. Cada uno tiene sus ventajas y desventajas, dependiendo del tipo y la complejidad de la imagen. En general, se recomienda usar JPEG para imágenes con muchos colores y detalles, como fotografías; PNG para imágenes con transparencia o pocos colores, como iconos o logotipos; y GIF para imágenes animadas o con pocos fotogramas, como banners o memes. También existen otros formatos más modernos y eficientes, como WebP o AVIF, que pueden ofrecer una mejor calidad y una menor compresión que los formatos tradicionales. Puedes usar herramientas como Squoosh o Cloudinary para convertir tus imágenes a estos formatos.
• Usa atributos responsivos: las imágenes que uses en tu página web deben adaptarse al tamaño y la resolución de la pantalla del dispositivo del usuario. Para lograr esto, puedes usar atributos responsivos como srcset y sizes, que te permiten especificar varias versiones de la misma imagen con diferentes dimensiones y densidades. De esta forma, el navegador puede elegir la versión más adecuada para cada caso. Por ejemplo: <img src=“logo.png” srcset=“logo-200.png 200w, logo-400.png 400w, logo-600.png 600w” sizes=“(max-width: 600px) 50vw, 25vw” alt=“Logo responsivo” />
• Usa etiquetas semánticas: las etiquetas que uses para insertar las imágenes en tu página web deben reflejar el significado y la función de las imágenes. Para ello, puedes usar etiquetas semánticas como <figure> y <figcaption>, que te permiten agrupar una imagen con su título o leyenda. De esta forma, puedes mejorar la estructura y la accesibilidad de tu página web. Por ejemplo: <figure> <img src=“foto.jpg” alt=“Foto de un gato” /> <figcaption>Este es mi gato Tom</figcaption> </figure>