Tutorial HTML: Imagen (img)

Estructura básica del elemento img y atributos src y alt

Las imágenes son elementos fundamentales en el diseño web moderno, permitiendo enriquecer visualmente el contenido de nuestras páginas. En HTML, utilizamos el elemento <img> para incorporar imágenes en nuestros documentos.

A diferencia de la mayoría de elementos HTML, <img> es un elemento vacío, lo que significa que no tiene etiqueta de cierre ni contenido entre etiquetas. Su estructura básica es simple pero potente:

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">

El atributo src

El atributo src (source o fuente) es obligatorio y especifica la ruta donde se encuentra la imagen que queremos mostrar. Esta ruta puede ser:

• Relativa: apunta a un archivo dentro de nuestro propio sitio web
• Absoluta: incluye la URL completa a una imagen en otro dominio

Veamos algunos ejemplos de uso del atributo src:

<!-- Ruta relativa a un archivo en la misma carpeta -->
<img src="logo.png" alt="Logo de la empresa">

<!-- Ruta relativa a un archivo en una subcarpeta -->
<img src="images/photo.jpg" alt="Fotografía del producto">

<!-- Ruta relativa a un nivel superior -->
<img src="../icons/arrow.png" alt="Icono de flecha">

<!-- Ruta absoluta a una imagen externa -->
<img src="https://example.com/images/banner.jpg" alt="Banner promocional">

Es importante tener en cuenta que el navegador cargará la imagen desde la ubicación especificada, por lo que debemos asegurarnos de que la ruta sea correcta. Si la ruta es incorrecta o la imagen no existe, el navegador mostrará un icono de imagen rota.

El atributo alt

El atributo alt (texto alternativo) proporciona una descripción textual de la imagen. Aunque técnicamente es opcional, se considera una buena práctica incluirlo siempre por varias razones:

• Proporciona contexto cuando la imagen no puede cargarse
• Es fundamental para la accesibilidad, permitiendo a los lectores de pantalla describir la imagen a usuarios con discapacidad visual
• Mejora el SEO (posicionamiento en buscadores)

El texto alternativo debe ser descriptivo y conciso, transmitiendo la misma información que la imagen comunica visualmente:

<!-- Buen uso del atributo alt -->
<img src="products/coffee-machine.jpg" alt="Cafetera automática modelo XZ-200 en color plateado">

<!-- Para imágenes decorativas que no aportan información -->
<img src="decorative-line.png" alt="">

En el caso de imágenes puramente decorativas que no aportan información relevante al contenido, podemos usar un alt="" vacío, lo que indica a los lectores de pantalla que pueden ignorar esta imagen.

Estructura completa con atributos adicionales

Aunque src y alt son los atributos esenciales, podemos enriquecer nuestro elemento <img> con atributos adicionales para un mayor control:

<img 
  src="team/developer.jpg" 
  alt="Desarrolladora web trabajando en su ordenador portátil" 
  width="300" 
  height="200"
  loading="lazy"
  title="Nuestro equipo de desarrollo en acción"
>

En este ejemplo:

• width y height: establecen las dimensiones de la imagen en píxeles
• loading: con el valor "lazy" permite la carga diferida (la imagen se cargará solo cuando esté cerca de entrar en el viewport)
• title: muestra un tooltip al pasar el cursor sobre la imagen

Ejemplos prácticos

Veamos algunos ejemplos prácticos de uso del elemento <img> en diferentes contextos:

1. Logo de un sitio web:

<header>
  <img src="images/logo.svg" alt="Logo de TechSolutions" width="150" height="50">
  <nav>
    <!-- Menú de navegación -->
  </nav>
</header>

2. Imagen de producto en una tienda online:

<div class="product">
  <img 
    src="products/smartphone.jpg" 
    alt="Smartphone Galaxy S21 en color negro con pantalla de 6.2 pulgadas" 
    width="400" 
    height="400"
  >
  <h2>Galaxy S21</h2>
  <p>$799.99</p>
</div>

3. Imagen de perfil en una red social:

<div class="profile">
  <img 
    src="users/john-doe.jpg" 
    alt="Foto de perfil de John Doe" 
    width="64" 
    height="64"
  >
  <h3>John Doe</h3>
</div>

4. Imagen de fondo decorativa:

<section class="hero">
  <img src="backgrounds/pattern.png" alt="" class="background-pattern">
  <h1>Bienvenido a nuestra plataforma</h1>
</section>

Consideraciones importantes

Al trabajar con el elemento <img>, debemos tener en cuenta algunas consideraciones:

• Tamaño de archivo: las imágenes deben optimizarse para reducir su tamaño sin perder calidad visual
• Dimensiones: especificar width y height ayuda al navegador a reservar espacio para la imagen antes de cargarla, evitando saltos en el diseño
• Formato adecuado: elegir el formato de imagen apropiado según el tipo de contenido visual
• Responsividad: para sitios responsive, podemos usar CSS para que las imágenes se adapten a diferentes tamaños de pantalla

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="banner.jpg" alt="Banner promocional de verano">

El elemento <img> es simple pero potente, y cuando se utiliza correctamente con sus atributos src y alt, proporciona una base sólida para incorporar contenido visual accesible y optimizado en nuestras páginas web.

Formatos de imagen para web: JPG, PNG, GIF, WebP

Elegir el formato de imagen adecuado es fundamental para optimizar el rendimiento de un sitio web. Cada formato tiene características específicas que lo hacen más apropiado para ciertos tipos de contenido visual.

JPG (o JPEG)

El formato JPG (Joint Photographic Experts Group) es ideal para fotografías y imágenes con muchos colores y degradados. Sus principales características son:

• Utiliza compresión con pérdida, lo que significa que reduce el tamaño del archivo eliminando información que el ojo humano percibe menos
• Permite ajustar el nivel de compresión (calidad vs tamaño)
• No soporta transparencia
• Es perfecto para fotografías de personas, paisajes o productos

<img src="vacation-photo.jpg" alt="Playa tropical al atardecer" width="800" height="600">

Un caso típico de uso:

<article class="blog-post">
  <img src="travel/beach-sunset.jpg" alt="Puesta de sol en la playa de Barcelona" width="1200" height="800">
  <h2>Los mejores destinos para este verano</h2>
  <p>Descubre los lugares más impresionantes para tus vacaciones...</p>
</article>

PNG

El formato PNG (Portable Network Graphics) es excelente para gráficos con áreas de color sólido y cuando necesitamos transparencia:

• Utiliza compresión sin pérdida, manteniendo toda la información original
• Soporta transparencia (canal alfa)
• Ideal para logos, iconos y gráficos con texto
• Existen dos variantes principales:
• PNG-8: limitado a 256 colores, similar a GIF pero sin animación
• PNG-24: millones de colores, archivos más pesados

<img src="company-logo.png" alt="Logo de TechCompany con fondo transparente" width="200" height="80">

Ejemplo práctico con transparencia:

<header class="site-header">
  <img src="logos/company-logo.png" alt="Logo de nuestra empresa" class="logo" width="180" height="60">
  <nav>
    <!-- Menú de navegación -->
  </nav>
</header>

GIF

El formato GIF (Graphics Interchange Format) es conocido principalmente por su capacidad de animación:

• Limitado a 256 colores, lo que lo hace inadecuado para fotografías
• Soporta transparencia básica (un color completamente transparente)
• Permite animaciones simples
• Ideal para animaciones cortas y elementos interactivos simples

<img src="loading-spinner.gif" alt="Indicador de carga" width="64" height="64">

Ejemplo de uso común:

<div class="reaction">
  <img src="emojis/thumbs-up.gif" alt="Emoji animado de pulgar hacia arriba" width="32" height="32">
  <span>15 personas han reaccionado</span>
</div>

WebP

El formato WebP es un formato moderno desarrollado por Google que ofrece lo mejor de todos los anteriores:

• Proporciona compresión superior tanto con pérdida como sin pérdida
• Soporta transparencia con menos peso que PNG
• Permite animaciones más eficientes que GIF
• Ofrece archivos hasta un 30% más pequeños que JPG con calidad similar
• Compatible con la mayoría de navegadores modernos

<img src="product-showcase.webp" alt="Colección de productos premium" width="1000" height="600">

Sin embargo, como WebP no tiene soporte universal en navegadores antiguos, es recomendable proporcionar alternativas usando el elemento <picture>:

<picture>
  <source srcset="banner.webp" type="image/webp">
  <source srcset="banner.jpg" type="image/jpeg">
  <img src="banner.jpg" alt="Banner promocional de temporada" width="1200" height="400">
</picture>

Este código muestra la versión WebP en navegadores compatibles y recurre automáticamente a JPG en navegadores que no soportan WebP.

Comparativa de formatos

Para elegir el formato adecuado, considera esta tabla comparativa:

Ejemplos prácticos según el tipo de contenido

Para fotografías de productos:

<!-- JPG es ideal para fotografías detalladas -->
<div class="product-gallery">
  <img src="products/camera-detail.jpg" alt="Cámara DSLR modelo X200 con lente zoom" width="600" height="400">
</div>

Para logos e iconos:

<!-- PNG es perfecto para logos con transparencia -->
<footer>
  <img src="icons/social/twitter.png" alt="Síguenos en Twitter" width="32" height="32">
  <img src="icons/social/facebook.png" alt="Visita nuestra página de Facebook" width="32" height="32">
</footer>

Para indicadores de carga o pequeñas animaciones:

<!-- GIF para animaciones simples -->
<div class="loading">
  <img src="ui/loading.gif" alt="Cargando contenido..." width="48" height="48">
  <p>Cargando resultados...</p>
</div>

Para sitios modernos con optimización de rendimiento:

<!-- WebP con fallback a JPG -->
<picture>
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="Nuestro equipo de desarrollo en acción" width="1600" height="900">
</picture>

Consideraciones para elegir el formato adecuado

Al seleccionar un formato de imagen, considera estos factores:

• Tipo de imagen: ¿Es una fotografía, un gráfico, un logo?
• Necesidad de transparencia: ¿Necesitas que partes de la imagen sean transparentes?
• Animación: ¿La imagen debe animarse?
• Compatibilidad: ¿Qué navegadores deben mostrar correctamente la imagen?
• Rendimiento: ¿Cuánto afecta el tamaño de la imagen al tiempo de carga?

Elegir el formato correcto no solo mejora la apariencia visual de tu sitio, sino que también contribuye significativamente a su rendimiento y experiencia de usuario.

Dimensiones, resolución y optimización de imágenes

Las imágenes son uno de los elementos que más impacto tienen en el rendimiento de una página web. Comprender cómo manejar correctamente sus dimensiones, resolución y optimización es fundamental para crear sitios web rápidos y eficientes.

Dimensiones de imágenes

Las dimensiones de una imagen se refieren a su ancho y alto medidos en píxeles. Cuando trabajamos con imágenes para web, es importante considerar:

• Tamaño real vs. tamaño de visualización: Una imagen debe tener dimensiones apropiadas para su uso previsto.
• Relación de aspecto: La proporción entre ancho y alto de una imagen.

Es recomendable especificar las dimensiones de las imágenes directamente en el HTML mediante los atributos width y height:

<img src="product.jpg" alt="Producto destacado" width="800" height="600">

Esto ayuda al navegador a reservar el espacio correcto para la imagen antes de que se cargue, evitando saltos en el diseño (layout shifts) durante la carga de la página.

Imágenes responsive

Para sitios responsive, necesitamos que las imágenes se adapten a diferentes tamaños de pantalla. Podemos lograrlo con CSS:

<style>
  .responsive-img {
    max-width: 100%;
    height: auto;
  }
</style>

<img class="responsive-img" src="banner.jpg" alt="Banner promocional" width="1200" height="600">

Para casos más avanzados, podemos usar el atributo srcset para proporcionar diferentes versiones de una imagen según la resolución del dispositivo:

<img 
  src="photo-800w.jpg" 
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Fotografía adaptativa"
  width="800" 
  height="600"
>

En este ejemplo:

• srcset define las imágenes disponibles y sus anchos
• sizes indica qué tamaño de imagen usar según el ancho de la ventana
• El navegador selecciona automáticamente la imagen más adecuada

Resolución de imágenes

La resolución se refiere a la densidad de píxeles en una imagen, generalmente medida en PPI (píxeles por pulgada). En la web, debemos considerar:

• Pantallas estándar: Utilizan una relación 1:1 entre píxeles de imagen y píxeles de pantalla.
• Pantallas de alta densidad (Retina): Pueden mostrar más píxeles en el mismo espacio físico.

Para ofrecer imágenes nítidas en pantallas de alta densidad, podemos usar el descriptor de densidad en srcset:

<img 
  src="icon.png" 
  srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" 
  alt="Icono de la aplicación"
  width="64" 
  height="64"
>

Este código proporciona versiones de mayor resolución para dispositivos con pantallas de mayor densidad de píxeles.

Optimización de imágenes

La optimización consiste en reducir el tamaño del archivo sin comprometer significativamente la calidad visual. Algunas técnicas clave incluyen:

1. Redimensionamiento adecuado

Nunca uses imágenes más grandes de lo necesario. Si una imagen se mostrará a 600px de ancho, no tiene sentido cargar una versión de 2000px:

<!-- Mal uso: imagen demasiado grande -->
<div style="width: 300px">
  <img src="huge-photo-2500px.jpg" alt="Imagen sobredimensionada">
</div>

<!-- Buen uso: imagen con dimensiones apropiadas -->
<div style="width: 300px">
  <img src="optimized-photo-600px.jpg" alt="Imagen correctamente dimensionada" width="600" height="400">
</div>

2. Compresión

La compresión reduce el tamaño del archivo eliminando datos redundantes o menos perceptibles:

• Compresión sin pérdida: Reduce el tamaño sin eliminar información (ideal para PNG).
• Compresión con pérdida: Elimina algunos datos para reducir significativamente el tamaño (usado en JPG).

Para JPG, un nivel de compresión entre 70-80% suele ofrecer un buen equilibrio entre calidad y tamaño.

3. Lazy loading

La carga diferida o lazy loading permite que las imágenes se carguen solo cuando están a punto de ser visibles en la pantalla:

<img 
  src="product.jpg" 
  alt="Producto en oferta" 
  width="400" 
  height="300"
  loading="lazy"
>

El atributo loading="lazy" está soportado nativamente en navegadores modernos y ayuda a mejorar significativamente el tiempo de carga inicial de la página.

4. Eliminación de metadatos

Las imágenes suelen contener metadatos (información EXIF como ubicación, cámara, fecha) que aumentan su tamaño sin aportar valor visual. Herramientas de optimización pueden eliminar estos datos innecesarios.

Herramientas y técnicas de optimización

Existen diversas herramientas que facilitan la optimización de imágenes:

• Herramientas online: TinyPNG, Squoosh, Compressor.io
• Herramientas de línea de comandos: ImageMagick, OptiPNG
• Plugins para CMS: Existen plugins para WordPress y otros CMS que automatizan la optimización

Un flujo de trabajo básico para optimizar imágenes incluye:

1. Redimensionar la imagen al tamaño máximo necesario
2. Comprimir la imagen con la herramienta adecuada
3. Elegir el formato más apropiado según el contenido
4. Implementar técnicas responsive como srcset y lazy loading

Ejemplo práctico de optimización

Veamos un ejemplo completo de una imagen optimizada para un sitio web moderno:

<picture>
  <!-- Versión WebP para navegadores compatibles -->
  <source
    type="image/webp"
    srcset="
      product-400.webp 400w,
      product-800.webp 800w,
      product-1200.webp 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  
  <!-- Fallback a JPG para navegadores sin soporte WebP -->
  <source
    type="image/jpeg"
    srcset="
      product-400.jpg 400w,
      product-800.jpg 800w,
      product-1200.jpg 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  
  <!-- Imagen base con dimensiones especificadas y lazy loading -->
  <img 
    src="product-800.jpg" 
    alt="Producto destacado en nuestra tienda" 
    width="800" 
    height="600"
    loading="lazy"
  >
</picture>

Este ejemplo implementa:

• Múltiples formatos (WebP con fallback a JPG)
• Múltiples resoluciones para diferentes tamaños de pantalla
• Dimensiones explícitas para evitar saltos de diseño
• Lazy loading para mejorar el rendimiento

Impacto en el rendimiento

La optimización de imágenes tiene un impacto directo en varios aspectos del rendimiento web:

• Tiempo de carga: Imágenes más pequeñas se cargan más rápido
• Consumo de datos: Crucial para usuarios con conexiones limitadas o planes de datos móviles
• Core Web Vitals: Métricas como LCP (Largest Contentful Paint) y CLS (Cumulative Layout Shift) mejoran con imágenes optimizadas
• SEO: Google favorece sitios con mejor rendimiento en sus rankings

Un sitio con imágenes bien optimizadas puede cargar hasta 5-10 veces más rápido que uno con imágenes sin optimizar, lo que se traduce directamente en mejor experiencia de usuario y mayores tasas de conversión.

Consideraciones para diferentes tipos de sitios

Las estrategias de optimización pueden variar según el tipo de sitio:

• Tiendas online: Prioriza la calidad de las imágenes de productos sin sacrificar el rendimiento
• Blogs: Implementa lazy loading para artículos con muchas imágenes
• Portfolios fotográficos: Considera usar miniaturas con lazy loading y versiones de alta resolución bajo demanda
• Aplicaciones web: Optimiza iconos e imágenes de interfaz para cargas rápidas

La optimización de imágenes no es una tarea única sino un proceso continuo que debe integrarse en el flujo de trabajo de desarrollo web para garantizar un rendimiento óptimo.

Accesibilidad en imágenes y texto alternativo

La accesibilidad web es un aspecto fundamental del desarrollo moderno que garantiza que todas las personas, independientemente de sus capacidades, puedan percibir, entender, navegar e interactuar con el contenido web. Cuando trabajamos con imágenes, la accesibilidad cobra especial relevancia, ya que estos elementos visuales pueden presentar barreras significativas para usuarios con discapacidades visuales.

La importancia del texto alternativo

El texto alternativo es mucho más que un simple atributo técnico; representa el puente que permite a los usuarios con discapacidad visual comprender el contenido visual de tu sitio web. Aunque ya hemos mencionado el atributo alt en secciones anteriores, ahora profundizaremos en su implementación desde una perspectiva de accesibilidad:

<img src="chart-sales-2023.png" alt="Gráfico de barras mostrando el incremento de ventas del 27% en el último trimestre de 2023">

Un buen texto alternativo debe:

• Ser descriptivo pero conciso
• Transmitir el propósito de la imagen, no solo describir lo que se ve
• Evitar redundancias como "imagen de..." o "foto de..."
• Incluir información crítica presente en la imagen

Diferentes tipos de imágenes, diferentes enfoques

No todas las imágenes requieren el mismo tratamiento en términos de accesibilidad. Veamos cómo abordar diferentes casos:

1. Imágenes informativas

Son aquellas que transmiten información esencial para entender el contenido:

<img 
  src="symptoms-covid.png" 
  alt="Síntomas comunes de COVID-19: fiebre, tos seca, cansancio, dificultad para respirar"
  width="600" 
  height="400"
>

2. Imágenes funcionales (botones, iconos)

Cuando la imagen funciona como un control interactivo:

<button>
  <img src="icons/search.svg" alt="Buscar" width="24" height="24">
</button>

<!-- Alternativa con mejor accesibilidad -->
<button aria-label="Buscar">
  <img src="icons/search.svg" alt="" width="24" height="24">
</button>

En el segundo ejemplo, el aria-label del botón proporciona el contexto, por lo que la imagen puede tener un alt vacío para evitar redundancia.

3. Imágenes decorativas

Para imágenes puramente estéticas que no aportan información:

<img src="decorative-divider.png" alt="" width="800" height="20">

El alt="" (vacío pero presente) indica a los lectores de pantalla que deben ignorar esta imagen.

4. Imágenes de texto

Aunque debemos evitar usar imágenes para mostrar texto, cuando sea inevitable:

<img 
  src="quote-einstein.jpg" 
  alt="La imaginación es más importante que el conocimiento. - Albert Einstein" 
  width="500" 
  height="300"
>

Más allá del atributo alt: técnicas avanzadas

El atributo alt es esencial, pero existen otras técnicas para mejorar la accesibilidad de las imágenes:

Uso de figcaption para contexto adicional

Cuando necesitamos proporcionar más contexto o descripción:

<figure>
  <img 
    src="diagram-network.png" 
    alt="Diagrama de red mostrando la conexión entre servidores y clientes" 
    width="800" 
    height="600"
  >
  <figcaption>
    Figura 1: Arquitectura de red implementada en nuestro centro de datos principal, 
    con redundancia N+1 y conexiones de fibra óptica de 10Gbps.
  </figcaption>
</figure>

El elemento <figcaption> complementa el texto alternativo, proporcionando información adicional que beneficia a todos los usuarios.

Atributo longdesc para descripciones extensas

Para imágenes complejas como gráficos, diagramas o infografías que requieren explicaciones detalladas:

<img 
  src="complex-chart.png" 
  alt="Gráfico de flujo del proceso de producción" 
  longdesc="chart-description.html"
  width="1000" 
  height="800"
>

Aunque longdesc está obsoleto en HTML5, sigue siendo útil para algunos lectores de pantalla. Una alternativa moderna es:

<img 
  src="complex-chart.png" 
  alt="Gráfico de flujo del proceso de producción" 
  width="1000" 
  height="800"
  aria-describedby="chart-desc"
>

<div id="chart-desc" class="visually-hidden">
  <h3>Descripción detallada del gráfico de flujo</h3>
  <p>Este diagrama muestra el proceso completo de producción en 5 etapas:</p>
  <ol>
    <li>Recepción de materias primas (representado en verde)</li>
    <li>Control de calidad inicial (representado en azul)</li>
    <!-- más detalles -->
  </ol>
</div>

La clase visually-hidden oculta el contenido visualmente pero lo mantiene accesible para lectores de pantalla:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Imágenes responsivas accesibles

Al implementar imágenes responsivas, debemos mantener la accesibilidad:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 400px)" srcset="medium-image.jpg">
  <img 
    src="small-image.jpg" 
    alt="Equipo de desarrollo colaborando en una sesión de planificación" 
    width="400" 
    height="300"
  >
</picture>

El texto alternativo solo se coloca en el elemento <img> base, no en los elementos <source>.

Pruebas de accesibilidad para imágenes

Para asegurar que tus imágenes sean realmente accesibles, considera estas pruebas:

• Desactivar las imágenes en tu navegador y verificar si el contenido sigue siendo comprensible
• Utilizar un lector de pantalla como NVDA, JAWS o VoiceOver para experimentar cómo se perciben tus imágenes
• Validar con herramientas automáticas como Lighthouse, WAVE o axe
• Realizar pruebas con usuarios reales que utilicen tecnologías de asistencia

Errores comunes a evitar

Algunos errores frecuentes que comprometen la accesibilidad de las imágenes incluyen:

• Omitir el atributo alt completamente (diferente de dejarlo vacío intencionalmente)
• Usar textos alternativos genéricos como "imagen" o "foto"
• Repetir el mismo texto que ya aparece en leyendas o títulos cercanos
• Incluir "imagen de..." al inicio del texto alternativo (los lectores de pantalla ya anuncian que es una imagen)
• Textos demasiado largos o demasiado cortos que no transmiten adecuadamente el contenido

Ejemplos prácticos en diferentes contextos

Comercio electrónico

<!-- Buena práctica -->
<img 
  src="products/running-shoes.jpg" 
  alt="Zapatillas deportivas modelo RunPro X3 en color azul con suela blanca" 
  width="400" 
  height="300"
>

<!-- Práctica deficiente -->
<img 
  src="products/running-shoes.jpg" 
  alt="Zapatillas" 
  width="400" 
  height="300"
>

Blog o sitio de noticias

<!-- Buena práctica -->
<img 
  src="news/climate-conference.jpg" 
  alt="Representantes de 45 países reunidos en la Conferencia sobre Cambio Climático en Madrid" 
  width="800" 
  height="500"
>

<!-- Con figcaption para información complementaria -->
<figure>
  <img 
    src="news/climate-conference.jpg" 
    alt="Representantes de 45 países reunidos en la Conferencia sobre Cambio Climático" 
    width="800" 
    height="500"
  >
  <figcaption>
    La secretaria general de la ONU, Ana García, durante su discurso inaugural. 
    Foto: Carlos Rodríguez / Reuters
  </figcaption>
</figure>

Plataforma educativa

<figure>
  <img 
    src="lessons/cell-structure.png" 
    alt="Diagrama de una célula animal mostrando núcleo, mitocondrias, membrana celular y otros orgánulos" 
    width="600" 
    height="450"
  >
  <figcaption>
    Figura 2.3: Estructura básica de una célula animal. 
    Los componentes principales están etiquetados y codificados por colores.
  </figcaption>
</figure>

Beneficios más allá de la accesibilidad

Implementar correctamente el texto alternativo y otras técnicas de accesibilidad para imágenes no solo beneficia a usuarios con discapacidades visuales, sino que también:

• Mejora el SEO, ya que los motores de búsqueda utilizan el texto alternativo para indexar imágenes
• Proporciona contexto cuando las imágenes no pueden cargarse debido a conexiones lentas
• Facilita la traducción del contenido a otros idiomas
• Permite la reutilización del contenido en diferentes formatos (como lectores RSS)

La accesibilidad en imágenes no debe verse como una carga adicional sino como una parte integral del desarrollo web que beneficia a todos los usuarios y mejora la calidad general de nuestros proyectos.