El elemento <img>: incrustar imágenes

El elemento `<img>`: incrustar imágenes

<img> incrusta una imagen en el documento. Es un void element — no tiene etiqueta de cierre y no contiene texto ni hijos.

A diferencia de elementos como <p> o <a>, que envuelven contenido entre una etiqueta de apertura y una de cierre, <img> es una instrucción al navegador para que cargue un recurso externo y lo muestre en ese punto del documento. Todo lo que necesita lo recibe a través de sus atributos, no de su contenido.

<!-- ❌ MAL: <img> no tiene etiqueta de cierre -->
<img src="gato.jpg" alt="Un gato naranja"></img>

<!-- ✅ BIEN: void element, sin cierre -->
<img src="gato.jpg" alt="Un gato naranja">

El cierre autocontenido <img /> es válido en HTML5 pero innecesario — la forma sin barra es la convención actual.

`src` y `alt`: los dos atributos obligatorios

src (source, fuente) — la ruta o URL del archivo de imagen. El valor puede ser una ruta relativa (gato.jpg, fotos/gato.jpg) o una URL absoluta (https://ejemplo.com/gato.jpg), igual que href en <a>.
alt (alternative text, texto alternativo) — descripción textual de la imagen. Lo usan los lectores de pantalla, aparece cuando la imagen no carga y lo indexan los motores de búsqueda.

<!-- Sintaxis mínima: <img> con src y alt -->
<img src="gato.jpg" alt="Un gato naranja durmiendo en un sillón" />

En el sandbox la imagen no carga (no hay servidor de archivos), pero el check confirma que la estructura del elemento es correcta.

`alt` correcto: qué describir y cuándo dejarlo vacío

Describí lo que la imagen comunica, no lo que es. El lector de pantalla ya sabe que es una imagen — no repitas “imagen de” ni “foto de”:

<!-- ❌ MAL: prefijo redundante -->
<img src="gato.jpg" alt="Imagen de un gato" />

<!-- ✅ BIEN: descripción directa -->
<img src="gato.jpg" alt="Un gato naranja durmiendo en un sillón" />

El caso especial: alt="" vacío para imágenes decorativas. Cuando la imagen no aporta información al contenido (un separador visual, un ícono que ya tiene texto al lado), el alt debe ser vacío. Esto le indica al lector de pantalla que la ignore:

<!-- Imagen decorativa: alt vacío -->
<img src="separador.png" alt="" />

<!-- Ícono con texto al lado: alt vacío (el texto "Inicio" describe la función) -->
<img src="icono-casa.svg" alt="" /> Inicio

La regla de oro: si quitaras la imagen y el contenido no pierde información, es decorativa → alt="". Si aporta información → alt descriptivo.

`width` y `height`: reservar espacio

<!-- Con width y height: el navegador reserva 400×300 px mientras carga -->
<img src="paisaje.jpg" alt="Montañas nevadas al atardecer" width="400" height="300" />

La función de width y height no es escalar la imagen estéticamente — eso es CSS. Son para que el navegador calcule el aspect ratio y reserve el espacio antes de que la imagen cargue, evitando el desplazamiento brusco del contenido (layout shift).

Imagen como enlace

Como ya sabés usar <a>, podés envolver un <img> dentro de un <a> para que la imagen sea el enlace:

<a href="https://ejemplo.com">
  <img src="logo.svg" alt="Empresa Ejemplo — ir al inicio" />
</a>

Formatos de imagen: cuándo usar cuál

Formato	Mejor para	Transparencia	Animación	Estado
JPEG (`.jpg`)	Fotografías, gradientes	No	No	Vigente
PNG (`.png`)	Gráficos con bordes nítidos, capturas	Sí (canal alpha)	No	Vigente
GIF (`.gif`)	(ver nota)	Sí (1 bit)	Sí (frames)	Vigente como formato; legacy para animación
WebP (`.webp`)	Fotos y gráficos modernos	Sí	Sí	Vigente — reemplaza JPEG/PNG para proyectos nuevos
SVG (`.svg`)	Logos, íconos, vectoriales	Sí	Sí	Vigente — escala sin pérdida de calidad

GIF para animación es práctica legacy: solo soporta 256 colores y produce archivos mucho más pesados que un video corto. Para animaciones modernas se usan <video> o WebP animado.

Criterio práctico: foto → JPEG o WebP; transparencia + bordes nítidos → PNG o WebP; logo o ícono → SVG.

Tu turno: creá un <img> con los 4 atributos indicados en el starter. El alt debe ser el texto exacto pedido — sin “imagen de”. Luego hacé clic en “Comprobar”.