Seguro te pasó. Entrás a una página desde el celu y—¡pum!—una imagen a pantalla completa se desborda de la pantalla como si quisiera escaparse. O peor, un video tan apretado que parece que lo están castigando por existir. Esos momentos pasan porque el contenido multimedia no se puso al día con el diseño responsive.
Si estás diseñando para todos los dispositivos (y seamos honestos, seguro que sí), asegurarte de que imágenes y videos se comporten bien es tan importante como el diseño mismo.
¿Qué significa que un medio sea “flexible”?
Los medios flexibles son elementos visuales — imágenes, videos, iframes — que se adaptan según el tamaño del contenedor o de la pantalla donde se ven. Sin que se corten, sin barras de scroll incómodas. Simplemente imágenes y videos que se estiran, achican y acomodan con gracia.
La regla básica de CSS que mantiene las imágenes alineadas
img {
max-width: 100%;
height: auto;
}
Esta combinación simple evita que las imágenes se desborden del contenedor y mantiene la proporción original. Nada de estirar o achicar de forma rara. Solo un cambio limpio y proporcional.
Entrega inteligente de imágenes: técnicas responsive que importan
Escalar es una cosa, pero mostrar la imagen correcta es otra. Acá entran en juego srcset y el elemento <picture>. Le permiten al navegador elegir la mejor fuente según el tamaño o la resolución de pantalla, ahorrando datos y acelerando la carga.
Ejemplo con <picture>:
<picture> <source media="(max-width: 600px)" srcset="imagen-chica.jpg"> <source media="(min-width: 601px)" srcset="imagen-grande.jpg"> <img src="imagen-fallback.jpg" alt="Imagen de ejemplo"> </picture>
Los usuarios de celulares reciben un archivo más liviano, los de escritorio más detalles. Todos ganan.
Integrar de manera responsable: videos e iframes que se adaptan
Anchos y altos fijos ya no sirven para videos. Una configuración responsive usa un contenedor con un truco de «relleno» inteligente para mantener la proporción y que ésta sea totalmente adaptable.
Contenedor responsivo para videos (CSS):
video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Poné esto alrededor de embeds de YouTube o Vimeo y estás hecho. Librerías como FitVids.js te ayudan si tenés un sitio con mucho contenido.
No solo flexibles: optimizá
Los medios responsive no son solo redimensionar, también tienen que rendir bien. Unos cuantos consejos importantes:
- Comprimí tus imágenes (hola, WebP)
- Cargá las imágenes no críticas con
loading="lazy" - Usá un CDN para que los assets lleguen más rápido a todo el mundo
Estos ajustes hacen que tu sitio sea más rápido y y respetuoso con los planes de datos de los usuarios.
En conclusión:
Las buenas prácticas con medios flexibles marcan la diferencia entre un sitio «correcto” y uno que se siente fluir naturalmente en cualquier dispositivo. Estas prácticas protegen el diseño que creaste, mantienen a tus usuarios enganchados y muestran que te importa tanto el rendimiento como la estética. ¡Es la mejor experiencia que podés darle a tus usuarios!
