14. Media para la Web

Curso HTML5 desde cero — Freimel Jerez

En esta lección aprenderás a trabajar con contenido multimedia en la web: imágenes, audio y video, usando HTML5 y buenas prácticas de rendimiento.

🖼️ Imágenes en la Web

Las imágenes se insertan con la etiqueta <img>. Es importante usar formatos optimizados y siempre el atributo alt.

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

Formatos recomendados

• JPG: fotografías
• PNG: transparencias
• SVG: iconos y gráficos vectoriales
• WebP: imágenes modernas y livianas

🎧 Audio en HTML5

HTML5 permite reproducir audio sin plugins usando la etiqueta <audio>.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta audio.
</audio>

🎬 Video en HTML5

Para videos propios se usa la etiqueta <video>. Para plataformas externas como YouTube se recomienda <iframe>.

<video controls width="100%">
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta video.
</video>

⚡ Buenas prácticas

• Optimiza el peso de las imágenes
• Usa formatos modernos
• No cargues videos pesados sin necesidad
• Usa loading="lazy" cuando sea posible

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• HTML5 permite trabajar con imágenes, audio y video
• Usar formatos correctos mejora el rendimiento
• La media bien optimizada mejora la experiencia del usuario

En la siguiente lección aprenderás a trabajar con audio y video en profundidad.