Etiqueta img en HTML
Introducción
Las imágenes son fundamentales en el diseño web, ya que pueden mejorar la experiencia visual de los usuarios y transmitir información de manera más efectiva que el texto. Por esta razón, es esencial conocer cómo utilizar correctamente la etiqueta <img> y sus atributos.
Además, HTML 5 ha mejorado significativamente la capacidad de mostrar y manipular imágenes en comparación con sus versiones anteriores. Esto se debe a la introducción de nuevos atributos y la compatibilidad con nuevos formatos de imagen.
En este artículo, exploraremos en detalle la etiqueta <img> de HTML 5, incluyendo su definición, atributos, formatos de imagen compatibles, ejemplos prácticos y buenas prácticas para su uso.
Esperamos que después de leer este artículo, puedas utilizar la etiqueta <img> de manera efectiva y crear sitios web visualmente atractivos y accesibles para tus usuarios.
¿Qué es la etiqueta <img> en HTML?
La etiqueta <img> es una etiqueta de HTML que permite insertar imágenes en una página web. Esta etiqueta es esencial en el diseño web, ya que las imágenes son un elemento visual muy importante para transmitir información y mejorar la experiencia del usuario.
En su forma más básica, la etiqueta <img> tiene un solo atributo obligatorio, que es “src”, que especifica la URL de la imagen que se desea mostrar.
Por ejemplo:
<img src="https://ejemplo.com/imagen.jpg" alt="Texto alternativo">
Lenguaje del código: HTML, XML (xml)En este ejemplo, “https://ejemplo.com/imagen.jpg” es la URL de la imagen que se desea mostrar, y “Texto alternativo” es el texto que se mostrará si la imagen no se puede cargar por alguna razón, como una conexión a Internet lenta o un error en la URL.
Formatos de imagen compatibles con la etiqueta <img>
La etiqueta <img> de HTML 5 es compatible con varios formatos de imagen, cada uno con sus propias ventajas y desventajas. Es importante conocer estos formatos para poder elegir el más adecuado para cada situación.
A continuación, se describen algunos de los formatos de imagen más comunes y sus características.
JPEG (Joint Photographic Experts Group)
El formato JPEG es uno de los más comunes en la web debido a su capacidad para comprimir imágenes de alta calidad. Es ideal para fotografías y otras imágenes que contienen muchas tonalidades diferentes.
El formato JPEG es compatible con la mayoría de los navegadores web y admite la transparencia de fondo en su versión más reciente.
<img src="imagen.jpg" alt="Ejemplo de imagen JPEG">
Lenguaje del código: HTML, XML (xml)PNG (Portable Network Graphics)
El formato PNG es ideal para gráficos e imágenes con áreas transparentes. El formato PNG comprime sin pérdida de calidad, lo que significa que la imagen resultante es de alta calidad y no pierde detalles.
Sin embargo, los archivos PNG pueden ser más grandes que los archivos JPEG, lo que puede afectar el tiempo de carga de la página.
<img src="imagen.png" alt="Ejemplo de imagen PNG">
Lenguaje del código: HTML, XML (xml)GIF (Graphics Interchange Format)
El formato GIF es ideal para imágenes animadas y gráficos simples con un número limitado de colores. Los archivos GIF son muy pequeños en tamaño, lo que significa que se cargan rápidamente en la página.
Sin embargo, la calidad de la imagen puede ser limitada debido al número limitado de colores que admite el formato.
<img src="animacion.gif" alt="Ejemplo de imagen GIF">
Lenguaje del código: HTML, XML (xml)SVG (Scalable Vector Graphics)
El formato SVG es ideal para gráficos vectoriales y es compatible con la mayoría de los navegadores modernos.
Los archivos SVG son pequeños en tamaño y se pueden ampliar o reducir sin pérdida de calidad. Además, los archivos SVG son ideales para la animación y la interactividad.
<img src="imagen.svg" alt="Ejemplo de imagen SVG">
Lenguaje del código: HTML, XML (xml)En general, es importante elegir el formato de imagen adecuado para cada situación para garantizar la mejor calidad y velocidad de carga posible.
También es importante tener en cuenta que, aunque la mayoría de los navegadores modernos son compatibles con varios formatos de imagen, aún hay algunos navegadores antiguos que no pueden mostrar ciertos formatos.
Por lo tanto, se recomienda comprobar la compatibilidad del formato de imagen con los navegadores antes de utilizarlo en el sitio web.
Uso de la etiqueta <img> en HTML5
La etiqueta <img> es una herramienta esencial en el diseño web, ya que permite insertar imágenes en una página web.
En esta sección, veremos algunos ejemplos prácticos de cómo utilizar la etiqueta <img> en diferentes situaciones.
Insertar una imagen en una página web
El uso más básico de la etiqueta <img> es para insertar una imagen en una página web.
Para hacerlo, necesitamos especificar la URL de la imagen utilizando el atributo src, como se muestra en el siguiente ejemplo:
<img src="imagen.jpg" alt="Ejemplo de imagen">
Lenguaje del código: HTML, XML (xml)En este ejemplo, “imagen.jpg” es la URL de la imagen que se desea mostrar, y “Ejemplo de imagen” es el texto alternativo que se mostrará si la imagen no se puede cargar por alguna razón.
Establecer el tamaño de la imagen
Para establecer el tamaño de la imagen, podemos utilizar los atributos width y height, como se muestra en el siguiente ejemplo:
<img src="imagen.jpg" alt="Ejemplo de imagen" width="200" height="200">
Lenguaje del código: HTML, XML (xml)En este ejemplo, la imagen se establece en un tamaño de 200 píxeles de ancho y 200 píxeles de alto.
Insertar una imagen con un subtítulo
Para insertar una imagen con un subtítulo, podemos utilizar la etiqueta <figure> y la etiqueta <figcaption>, como se muestra en el siguiente ejemplo:
<figure>
<img src="imagen.jpg" alt="Ejemplo de imagen">
<figcaption>Subtítulo de la imagen</figcaption>
</figure>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <figure> contiene la etiqueta <img> y la etiqueta <figcaption>, lo que permite agregar un subtítulo a la imagen.
Insertar imágenes en un encabezado
Para insertar imágenes en un encabezado, podemos utilizar la etiqueta <header>, como se muestra en el siguiente ejemplo:
<header>
<h1>Título del sitio web</h1>
<img src="logo.png" alt="Logo del sitio web">
</header>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <header> contiene el título del sitio web y el logo del sitio web.
Insertar imágenes en un cuerpo de texto
Para insertar imágenes en el cuerpo de un artículo o una página de texto, podemos utilizar la etiqueta <div> o la etiqueta <section>, como se muestra en el siguiente ejemplo:
<section>
<h2>Título del artículo</h2>
<p>Texto del artículo.</p>
<img src="imagen.jpg" alt="Ejemplo de imagen">
<p>Más texto del artículo.</p>
</section>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <section> contiene el título del artículo, el texto del artículo, y la imagen. La imagen se coloca entre los párrafos del artículo para mejorar la legibilidad del texto.
Atributos básicos
Los atributos más importantes de la etiqueta <img> en HTML son:
- src: especifica la ruta de la imagen que se mostrará. Este atributo es esencial para indicar cuál es la imagen que se va a mostrar.
- alt: especifica un texto alternativo que se mostrará si la imagen no se puede cargar o no es accesible para el usuario. Este atributo es importante para proporcionar una descripción de la imagen y también es requerido para accesibilidad.
- width y height: especifica las dimensiones de la imagen en píxeles. Este atributo es importante para controlar el tamaño de la imagen en la página.
- title: proporciona un texto que se mostrará como una descripción o información adicional al pasar el cursor sobre la imagen.
Además de estos atributos, también se pueden utilizar otros como class, id, style, entre otros, para modificar el estilo o comportamiento de la imagen.
Atributos avanzados de la etiqueta <img>
La etiqueta <img> de HTML 5 tiene varios atributos avanzados que permiten mostrar diferentes versiones de una imagen según el dispositivo del usuario.
A continuación, se describen algunos de los atributos avanzados más útiles.
srcset
El atributo “srcset” permite especificar varias versiones de la misma imagen, cada una con una resolución diferente.
De esta manera, el navegador puede elegir la versión más adecuada para el dispositivo del usuario, lo que puede mejorar la calidad de la imagen y la velocidad de carga de la página.
<img src="imagen.jpg" srcset="imagen-1000.jpg 1000w, imagen-2000.jpg 2000w, imagen-3000.jpg 3000w" alt="Ejemplo de imagen">
Lenguaje del código: HTML, XML (xml)En este ejemplo, se especifican tres versiones de la imagen, con resoluciones de 1000 píxeles, 2000 píxeles y 3000 píxeles de ancho.
El navegador elegirá la versión más adecuada según la resolución de la pantalla del usuario.
sizes
El atributo “sizes” permite especificar el tamaño de la imagen en diferentes resoluciones de pantalla.
De esta manera, el navegador puede elegir la versión más adecuada según la resolución de la pantalla del usuario y la relación de aspecto de la imagen.
<img src="imagen.jpg" srcset="imagen-1000.jpg 1000w, imagen-2000.jpg 2000w, imagen-3000.jpg 3000w" sizes="(max-width: 600px) 100vw, 50vw" alt="Ejemplo de imagen">
Lenguaje del código: HTML, XML (xml)En este ejemplo, se especifican dos tamaños diferentes de la imagen, uno para pantallas de menos de 600 píxeles de ancho y otro para pantallas más grandes.
El navegador elegirá la versión más adecuada según la resolución de la pantalla y la relación de aspecto de la imagen.
loading
El atributo “loading” permite especificar cómo se carga la imagen en la página. Esto puede mejorar la velocidad de carga de la página y la experiencia del usuario.
<img src="imagen.jpg" alt="Ejemplo de imagen" loading="lazy">
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza el valor “lazy” para el atributo “loading”, lo que significa que la imagen se cargará solo cuando sea visible en la ventana del navegador. Esto puede mejorar la velocidad de carga de la página y reducir el uso de datos.
Buenas prácticas en el uso de la etiqueta <img>
Para utilizar la etiqueta <img> de manera efectiva y mejorar la experiencia del usuario en el sitio web, es importante seguir algunas buenas prácticas. A continuación, se describen algunas de las mejores prácticas para utilizar la etiqueta <img>.
Optimizar el tamaño de las imágenes
Las imágenes de gran tamaño pueden afectar negativamente la velocidad de carga de la página y la experiencia del usuario.
Por lo tanto, es importante optimizar el tamaño de las imágenes para que sean lo más pequeñas posible sin perder calidad.
Hay varias herramientas en línea que pueden ayudar con este proceso, como TinyPNG o Compressor.io.
<img src="imagen-optimizada.jpg" alt="Ejemplo de imagen optimizada">
Lenguaje del código: HTML, XML (xml)Utilizar el atributo “alt”
El atributo “alt” es esencial para la accesibilidad de la página web, ya que permite que los usuarios con discapacidades visuales entiendan el contenido de la imagen.
Es importante utilizar el atributo “alt” en todas las imágenes y proporcionar una descripción precisa del contenido de la imagen.
<img src="imagen.jpg" alt="Descripción precisa del contenido de la imagen">
Lenguaje del código: HTML, XML (xml)Elegir el formato de imagen adecuado
Es importante elegir el formato de imagen adecuado para cada situación para garantizar la mejor calidad y velocidad de carga posible. También es importante tener en cuenta la compatibilidad del formato de imagen con los navegadores.
<img src="imagen.png" alt="Ejemplo de imagen en formato PNG">
Lenguaje del código: HTML, XML (xml)Especificar el ancho y la altura de la imagen
Especificar el ancho y la altura de la imagen puede mejorar la velocidad de carga de la página y evitar que el contenido se mueva mientras se carga la imagen.
<img src="imagen.jpg" alt="Ejemplo de imagen" width="200" height="200">
Lenguaje del código: HTML, XML (xml)Utilizar los atributos avanzados para mejorar la velocidad de carga
Los atributos avanzados, como srcset, sizes y loading, pueden mejorar la velocidad de carga de la página y la experiencia del usuario.
Es importante utilizar estos atributos de manera adecuada y optimizarlos para cada situación.
<img src="imagen.jpg" alt="Ejemplo de imagen" srcset="imagen-1000.jpg 1000w, imagen-2000.jpg 2000w, imagen-3000.jpg 3000w" sizes="(max-width: 600px) 100vw, 50vw" loading="lazy">
Lenguaje del código: HTML, XML (xml)En general, seguir estas buenas prácticas puede mejorar significativamente la experiencia del usuario en el sitio web y garantizar la mejor calidad y velocidad de carga posible para las imágenes.
Referencias
- W3Schools. (2022). HTML <img> Tag.
- Mozilla. (s.f.). <img>: The Image Embed element.
- Google Developers. (s.f.). Optimizing images.