Problemas y soluciones de las imágenes en diseño responsive

Crear, diseñar y desarrollar, actualizar y administrar versiones distintas de una misma página web para su correcta visualización en los distintos dispositivos de conexión a Internet: ordenadores de sobremesa, portátiles y dispositivos móviles no es factible en la mayoría de casos. Y más teniendo en cuenta que el tamaño de las pantallas de lo móviles es cada vez más variable, lo que obliga a la creación de un número aún mayor de versiones del site.

Por ese motivo, el diseño responsive o adaptativo es una técnica ideal, ampliamente utilizada y muy bien acogida entre diseñadores y webmasters. Su gran beneficio es que solamente es necesario crear una versión de la web, puesto que el sistema permite el reconocimiento y automática adaptación al tamaño de la pantalla del dispositivo de conexión que se está empleando en cada momento.

Otra ventaja es que la aplicación técnica del diseño responsive es bastante sencilla, en principio es suficientes con la aplicación de unas reglas estándares en el código HTML y las hojas de estilo CSS y CSS3. Lo que ocurre en que a veces algunos elementos, fotos y vídeos principalmente, no acaban de visualizarse bien en ciertos tamaños y resoluciones de pantallas. Esto supone un problema del diseño responsive pero, afortunadamente, existen soluciones.

Problemas con imágenes estáticas

Puede ocurrir que al implantar el diseño responsive, algunas fotos, dibujos, infografías, etc., se descuadran o crecen demasiado, sobrepasando el contenedor sobre el que se encuentran. El resultado es un diseño poco estético o directamente defectuoso.

Este problema tiene fácil solución: basta con establecer un tamaño máximo para las imágenes en las hojas de estilo CSS. De esta manera, cuando se disminuya el tamaño del contenedor sobre el que están las imágenes, estas disminuyen proporcionalmente de tamaño, adaptándose a la página.

Problemas con los vídeos

En ocasiones, los vídeos tampoco mantienen las proporciones correctas al visualizarse en las pantallas de menor tamaño de lo smartphones. Vamos con las soluciones:

Para vídeos en HTML5 basta con limitarlos a un tamaño máximo con la instrucción correspondiente:

En el caso de los vídeos de servicios externos YouTube, Vimeo, etc. la solución es más complicado. Estos vídeos casi siempre se incrustan en las páginas mediante un código iframe, por lo que en necesario recurrir a algún truco para que se visualicen correctamente en todo tipo de pantallas.

Un método que ofrece muy buenos resultados consiste en introducir el <iframe> dentro de una etiqueta <div> con un alto de 0px y un ancho del 100%. También hay que establecer el valor porcentual de su ratio de imagen, que suele ser 16:9. Aquí tienes un ejemplo con las relaciones correctas:

Estos son los dos problemas más habituales, aunque existen otros. Algunos móviles y tablets incorporan pantallas con una alta densidad de píxeles conocidas como retina display. Esta tecnología se caracteriza por una calidad y resoluciones superiores Por ellos es preciso usar imágenes optimizadas, como por ejemplo el formato JPG de alta resolución y con una compresión del 40%. De lo contrario, la visualización de las fotos en este tipo de pantallas, que es la que utilizan los últimos modelos de iphones y también de ipads, será bastante deficiente.