Responsive Media in HTML5

Guía práctica y rápida de Alex Libby, autor habitual de Packt, centrada en un aspecto concreto del diseño responsive: hacer que imágenes y video se adapten a cualquier dispositivo, tanto en un portafolio de una página como en un gestor de contenidos (CMS). Se publicó a finales de 2014, en plena transición hacia el elemento picture y srcset. Requiere conocer bien HTML y CSS, y conviene tener nociones de JavaScript.

El primer capítulo trata las imágenes: imágenes fluidas, prefijos de proveedor y formatos, imágenes HD o retina, sprites, detección del viewport con CSS y con JavaScript, media queries, atributos data para cargar imágenes según el ancho de banda, SVG e iconos, carruseles y mapas de Google adaptables. El segundo trata el video HTML5: formatos admitidos, incrustación, alternativas (fallbacks), librerías JavaScript y video a pantalla completa. Después se combinan imágenes y video con precargadores, carga diferida (lazy loading) y redimensionado automático. Luego se prueba el resultado en Chrome, Opera, Firefox e Internet Explorer, con herramientas en línea y análisis de velocidad. El último capítulo integra todo en un CMS como WordPress, mediante plugins, con las clases de Bootstrap y con Less CSS, y prepara el paso a producción.

Es útil para quien necesita un repaso centrado solo en los medios, con ejemplos breves por técnica en lugar de un proyecto único. Su contenido se ha quedado atrás: Internet Explorer ha desaparecido, los prefijos de proveedor apenas importan y hoy el atributo loading="lazy", srcset/sizes, picture y formatos como WebP o AVIF resuelven gran parte de lo que entonces requería JavaScript. Conviene leerlo como base conceptual y contrastarlo con la documentación actual.