Los documentos HTML serían muy aburridos si estuviesen basados únicamente de texto. Podemos hacer que la web cobre vida gracias a ciertos elementos que HTML ofrece para insertar contenido multimedia: imágenes, vídeos y audios.
Para insertar imágenes en un documento HTML se usa el elemento <img>, pero si se quiere mantener la calidad de las imágenes en diseños adaptables y mejorar el rendimiento puede hacerse uso del elemento <picture>. Para incrustar vídeo y audio se usa los elementos <video> y <audio>, respectivamente. Con el elemento <souce> se indican recursos múltiples multimedia. Finalmente, puede añadirse pistas de audio con el elemento <track>.
Incrustar imágenes: elemento <img>
Las imágenes son el recurso multimedia más utilizado en las páginas web. En general, la función de las imágenes es explicar el texto o completarlo, aunque también sirven para hacer la lectura más fácil y amena. Cualquier lector se asusta cuando se encuentra delante de largos párrafos de texto.
Para incrustar imágenes se utiliza el elemento <img>. Este elemento no tiene etiqueta de cierre, por lo que se trata de un elemento vacío cuya información se introduce mediante atributos. Con ellos se puede indicar la ruta de la imagen, el alto y el ancho en píxeles, e incluso una descripción de la misma.
Los formatos de imagen más importantes son los siguientes: BMP, JPEG, GIF, PNG y SVG. El formato BMP está sin comprimir, tiene calidad máxima pero también pesa más, por lo que no se recomienda su uso en la web. El formato JPG comprime la imagen con pérdida de calidad. El formato GIF la comprime sin pérdida, pero tiene la limitación de 256 colores. El formato PNG comprime sin pérdida y tiene una profundidad de color de 24 bits. El formato SVG es vectorial.
Aprende a insertar imágenes con el elemento <img>.
Imágenes adaptables: elemento <picture>
Con el fin de mejorar el rendimiento y la calidad de las imágenes en el diseño web responsive, HTML5 aportó dos soluciones: el atributo srcset (para el elemento <img>), con el que se puede mostrar imágenes con la mejor resolución posible, y el elemento <picture>, con el que podemos cambiar la imagen según el tipo de dispositivo, ya sea de escritorio, móvil o una tablet.
Gracias a estos dos recursos de imágenes adaptables evitamos cargar imágenes muy pesadas en dispositivos móviles o imágenes de baja resolución en pantallas grandes. Pero con el elemento <picture> también podemos cambiar la imagen según el tipo de dispositivo (art direction), mejorando el resultado.
Ejemplo de uso del elemento <picture>: tenemos una imagen panorámica de un paisaje y queremos que se muestre completa en un dispositivo de escritorio (pantalla grande); sin embargo, en un dispositivo móvil preferimos mostrar otra imagen que contiene una parte recortada y ampliada del paisaje.
Por imagen completa en un dispositivo de escritorio y una imagen recortada en un dispositivo móvil, perfeccionando aún más el resultado.
Aprende a crear imágenes adaptables con el elemento <picture>.
Incrustar vídeos: elemento <video>
Los vídeos se han popularizado mucho en Internet durante los últimos años, sobretodo gracias a plataformas como YouTube y Vimeo. Para insertar vídeos en un documento HTML se usa el elemento <video>; con este elemento los vídeos se incrustan directamente en el documento HTML, y aparecerá un reproductor.
Aprende a insertar vídeos con el elemento <video>.
Incrustar audios: elemento <audio>
Los audios también se han extendido mucho a través de plataformas de música, radio y podcasts. Para insertar archivos de audio en un documento HTML se utiliza el elemento <audio>. Cuando se incrusta un archivo de audio en un documento también aparece un reproductor con varios controles de la reproducción.
Aprende a insertar audios con el elemento <audio>.
Recursos múltiples: elemento <source>
El elemento <source> se usa para añadir recursos múltiples de un elemento multimedia. Dicho de otro modo, su finalidad es la de proveer diferentes formatos de un archivo en los elementos de imagen adaptable (elemento <picture>), vídeo (elemento <video>) y audio (elemento <audio>).
Aprende a configurar múltiples recursos con el elemento <source>.
Pistas de texto: elemento <track>
El elemento <track> sirve para especificar pistas de texto para los elementos multimedia de vídeo y audio, por lo que debe introducirse dentro de los elementos <video> y <audio>, como elemento hijo. Con este elemento es posible introducir subtítulos, títulos, descripciones o metadatos. Las pistas de texto usan el formato WebVTT (archivos VTT) o de pistas de texto para la web.
Aprende a insertar pistas de texto con el elemento <track>.
