Imágenes HTML

Los marcadores te saltan por el texto. Las imágenes traen fotos, diagramas y logotipos a la página. La herramienta HTML básica es el elemento vacío img: en el uso normal no envuelve un pie de foto entre etiquetas de apertura y cierre. Apunta a un archivo con src y ofrece una alternativa de texto con alt.

Qué hace img

img es un elemento reemplazado (replaced). El navegador obtiene el recurso en src y lo pinta en el diseño. Si el archivo falta o está bloqueado, los visitantes aún necesitan un alt útil (o, para decoración pura, un alt="" explícitamente vacío). Las rutas siguen las mismas reglas relativas y absolutas que ya usas para enlaces y favicons.

Respuesta directa

Escribe <img src="path/to/file.jpg" alt="descripción breve">.

• src — dónde está el archivo de imagen
• alt — alternativa de texto cuando la imagen no se ve o falla al cargar
  width y height opcionales pueden reservar espacio y reducir saltos de diseño. Prefiere comprimir fotos sobredimensionadas en lugar de enviar archivos de varios megabytes a cada alumno con conexión lenta.

Atributos principales de un vistazo

Una imagen informativa básica

Pon las imágenes en una carpeta clara como images/ y describe lo que importa en alt.

Lectura del ejemplo básico

• src="images/team.jpg" es una ruta relativa desde el archivo HTML
• alt explica el significado de la foto para lectores de pantalla y cargas fallidas
• No hay un </img> de cierre separado en HTML normal — los atributos viven en la etiqueta única
• Si la carpeta o el nombre de archivo son incorrectos, la imagen se rompe aunque la etiqueta parezca perfecta

Indicaciones de ancho y alto

Dar ancho y alto ayuda al navegador a reservar espacio antes de que lleguen los bytes. Coincide con la relación de aspecto del archivo real cuando puedas, para que la imagen no se vea estirada. Encoger una foto enorme solo con atributos HTML sigue descargando el archivo enorme — redimensiona y comprime los recursos para la web.

Imágenes decorativas y alt vacío

Cuando una imagen no aporta información — un adorno puramente decorativo ya cubierto por texto cercano — usa alt="". No omitas el atributo. Omitir alt y escribir alt="" vacío son distintos: vacío significa «ignórame en los árboles de accesibilidad»; faltante a menudo significa «algo falló en el marcado».

Escribe alt por significado, no por spam

Un buen alt es un sustituto breve de la imagen en contexto: lo que un usuario vidente necesita para entender la página. Un mal alt rellena palabras clave, repite un pie ya impreso junto a la imagen o dice «imagen» sin contenido. Si la imagen es un gráfico, resume la conclusión; si es un logotipo que también actúa como enlace a inicio, el nombre accesible del enlace suele venir del alt de la imagen o del texto cercano — sé honesto.

Formatos de archivo que encuentra un principiante

JPEG (.jpg) conviene a fotos. PNG conviene a gráficos con bordes nítidos o transparencia. SVG conviene a iconos y logotipos simples cuando quieres escalado nítido (verás más patrones SVG más adelante). Elige un formato que encaje con el contenido y mantén un peso de archivo razonable.

Practica en tu editor

1. Pon un .jpg o .png pequeño en una carpeta images.
2. Añade un img con src relativo correcto y alt claro.
3. Añade ancho y alto que coincidan con la relación de aspecto.
4. Rompe la ruta a propósito una vez — confirma que alt (o la UI de imagen rota) te ayuda a notar el error, luego corrige la ruta.
5. Añade una imagen decorativa con alt="" y confirma que no eliminaste el atributo por completo.

Errores fáciles

• Falta de alt en imágenes informativas
• Carpeta o ortografía incorrecta en src
• Enviar una foto de cámara de varios megabytes cuando bastaría un archivo web más pequeño
• Tratar alt como vertedero de palabras clave
• Estirar logotipos con width/height desajustados
• Confundir src (imágenes) con href (enlaces)

Resumen

• Las imágenes usan img con src y alt
• Las rutas siguen las mismas reglas que otros archivos del sitio
• alt apoya la accesibilidad y las cargas fallidas; usa alt="" solo para decoración pura
• Ancho y alto pueden reservar espacio; aún así optimiza el tamaño real del archivo
• Elige un formato sensato y mantén las descargas ligeras