Curso HTML 6. Imágenes y multimedia básica

Curso HTML 6. Imágenes y multimedia básica

En este módulo profundizaremos en el manejo de recursos gráficos y multimedia en páginas web: desde la etiqueta <img> hasta los elementos <picture>, <video> y <audio>. Veremos técnicas de optimización, formatos modernos, accesibilidad y ejemplos prácticos con comentarios.

1. Etiqueta <img> y sus atributos principales

• src: URL de la imagen.
• alt: texto alternativo para lectores de pantalla y cuando no carga.
• width y height: dimensiones explícitas para evitar ‘layout shift’.
• loading: ‘lazy’ o ‘eager’ para diferir carga.
• decoding: ‘async’ o ‘sync’ para controlar el renderizado.
• crossorigin: controla peticiones CORS si se usan filtros o canvas.
• usemap: referencia a <map> para imágenes con áreas clicables.

Atributos en detalle

1.1. Ejemplo básico de <img>

2. Imágenes responsivas y formatos modernos

Para adaptarnos a diferentes resoluciones y ahorrar ancho de banda, usamos la etiqueta <picture> junto a varios <source>. También podemos ofrecer formatos WebP o AVIF y caer a JPG/PNG si el navegador no los soporta.

2.1. Uso de <picture> y <source>

2.2. Conjunto de resoluciones con srcset y sizes

El navegador elegirá la mejor resolución según el ancho de dispositivo.

3. Multimedios: Audio y Video

HTML5 incorpora etiquetas dedicadas para reproducir audio y vídeo de forma nativa, sin plugins. Incluyen controles, múltiples fuentes, subtítulos y opciones de accesibilidad.

3.1. Etiqueta <audio>

• controls: muestra controles predeterminados.
• autoplay: reproducción automática (suele requerir muted para funcionar en móviles).
• loop: bucle infinito.
• muted: silencia el audio.
• preload: ‘auto’, ‘metadata’, ‘none’ controla carga inicial.

3.2. Etiqueta <video>

• controls: controles de reproducción.
• poster: imagen previa antes de play.
• autoplay, loop, muted.
• preload: igual que audio.
• width, height: reservan espacio.

3.3. Subtítulos y accesibilidad

Los elementos <track> permiten:

• kind=’subtitles’: subtítulos para sordos o hablantes de otro idioma.
• kind=’captions’: incluyen descripciones de audio.
• srclang, label: especifican idioma y etiqueta en control.

4. Accesibilidad y mejores prácticas

• Siempre incluir alt significativo en <img>. Si es decorativa, usar alt='' (vacío y sin role).
• Especificar dimensiones para evitar reflujo de contenido (Cumulative Layout Shift).
• Usar loading='lazy' en imágenes y iframes no esenciales para mejorar tiempos de carga.
• Proveer múltiples formatos (AVIF/WebP/JPEG) y resoluciones con <picture> y srcset.
• Para vídeo y audio, ofrecer al menos dos tipos de fuente y subtítulos para garantizar accesibilidad.
• Agregar roles ARIA si es necesario, por ejemplo role='img' en elementos picture con aria-label.

5. Consideraciones de rendimiento

• Servir imágenes optimizadas (compresión sin pérdida, srcset, dimensionado según viewport).
• Usar preload con prudencia: metadata para audio/video.
• Evitar auto-play infinito de vídeo con sonido (mala experiencia). Si necesitas auto-play, iniciar en muted.
• Utilizar CDN y ‘HTTP/2 push’ para recursos críticos si está disponible.

Conclusión

Este apartado cubre desde la simple inserción de imágenes con <img> hasta configuraciones avanzadas con <picture>, <video> y <audio>. Aplicando buenas prácticas de accesibilidad, optimización y formatos modernos, construiremos sitios rápidos y usables en todo tipo de dispositivos.