Elemento img en HTML

Elemento img en HTML

El elemento img en HTML sirve para agregar imagenes dentro de la página web. Es un elemento vacío, lo que significa que no tiene una etiqueta de cierre.

Este elemento requiere de dos atributos importantes:

• src: especifica la URL de la imagen que se desea mostrar. Este atributo es obligatorio.
• alt: proporciona una descripción alternativa de la imagen. Este atributo es importante para la accesibilidad y SEO, ya que ayuda a los lectores de pantalla a describir la imagen a los usuarios con discapacidades visuales.

<img src="https://www.ejemplo.com/imagen.jpg" alt="Descripción de la imagen" />

Carga diferida

Muchas veces necesitarás cargar imágenes de forma diferida, es decir, que se carguen solo cuando el usuario se desplace hacia la sección donde se encuentra la imagen. Para esto puedes usar el atributo loading con el valor lazy.

<img src="https://www.ejemplo.com/imagen.jpg" alt="Descripción de la imagen" loading="lazy" />

Tipo de imagenes recomendadas

En la actualidad los formatos para la web recomendados son:

• webp: formato de imagen moderno que ofrece una buena compresión y calidad.
• avif: formato de imagen que ofrece una compresión aún mejor que webp, pero no es compatible con todos los navegadores.
• svg: formato de imagen vectorial que se puede escalar sin perder calidad. Ideal para logotipos y gráficos simples.

Width y height

El elemento img también puede tener los atributos width y height para especificar el tamaño de la imagen. Estos atributos son opcionales, pero es recomendable usarlos para mejorar el rendimiento de la página.

<img src="https://www.ejemplo.com/imagen.jpg" alt="Descripción de la imagen" width="600" height="400" />

Imagenes responsivas

Para hacer que las imágenes sean responsivas, comunmente se uitiliza CSS, aunque también puedes usar el atributo srcset para especificar diferentes versiones de la imagen para diferentes tamaños de pantalla.

<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  src="fallback.jpg"
  alt="Imagen adaptable">