Se encuentra usted aquí

Creando imágenes adaptables o responsive

Activado 21 Mar, 2015 Por Adolfo 50 Comentarios

Logotipo de avanzalia.info Como sabréis, Google está modificando su algoritmo de búsqueda para dar prioridad a las páginas que se adapten a la navegación desde cualquier dispositivo, en especial para móviles. En avanzalia.info hemos modificado el tema par que se adapte a los móviles, pero nos hemos encontrado con un problema, y es que las imágenes tienen un tamaño concreto que no se adapta a los dispositivos. De momento estamos solucionando este problema utilizando un método para crear imágenes adaptables.

El problema, inicialmente, lo solucionamos en nuestra página e-ducacion.net utilizando un tanto por ciento al definir el tamaño de la imagen. Esto nos servía porque eran imágenes decorativas y que ocupan toda la parte superior de la página.

El mismo problema nos encontramos en avanzalia.info (incluso compartimos tema, actualmente). El caso es que aquí las imágenes no suelen ser decorativas, excepto la que inicia cada post, y el porcentaje no nos sirve ya que las imágenes no ocupan el total del ancho de pantalla en la versión web.

Solución actual

Después de consultar algunas webs, la solución que estamos adoptando es la siguiente:

No utilizamos valores fijos de tamaño, que son los que se insertan automáticamente desde el editor de textos de la página. En su lugar añadimos un poco de estilos con lo siguiente:

img {width: 100%; max-width: 500px;}

Con esto lo que hacemos es que la imágen se muestre al 100% del tamaño disponible, incluyendo las diferentes capas (divs) del diseño, pero que en caso de ser superior a 500 píxeles ya no se muestre a este tamaño, si no que se quede en 500 píxeles siempre.

Un ejemplo de esto se puede ver en nuestra entrada Cómo cambiar el PIN en un móvil android, donde mostramos algunas capturas realizadas desde un terminal. Aquí lo que hacemos es mostrar la imágen con el siguiente código:

<img src="/sites/default/files/images/bloqueosim.png" alt="Pantalla con la selección de configuración de bloqueo de la tarjeta SIM." title="Configurar bloqueo SIM" style="width: 100%; max-width: 500px;">

Y podemos ver el ejemplo en la siguente imágen.

Otra cosa que podemos hacer es añadir un enlace a la imagen para que la muestre a tamaño completo, para facilitar el acceso desde terminales donde se vea reducida.

Podéis comprobar el funcionamiento de la imagen desde un navegador de escritorio y desde un terminal móvil, para ver su funcionamiento. También podéis ver el funcionamiento modificando el tamaño del navegador de escritorio.

Otras opciones

Este método lo hemos probado en navegadores modernos y ha funcionado correctamente, pero posiblemente en algunos antiguos de problemas.

Seguimos buscando soluciones a este caso ya que existe un problema añadido y es que en caso de visualizarlo desde un móviil, el ancho de banda es importante, y el tamaño de la imagen sigue siendo el mismo, aunque se vea más pequeña, y nos gustaría reducir, en este caso, el peso de las mimas. Una solución, que aún no hemos probado, consiste en utilizar el elemento picture, aunque la implementación no nos acaba de gustar, ya que se trata de introducir difernetes versiones dentro del código y es mucho más complejo de utilizar (no todos los redactores de nuestras páginas son informáticos, y ya cuesta explicarles que han de utilizar siempre el título y la descripción de la imagen).

En fin, eso es lo que tenemos de momento, Si conoceis algún otro sistema para generar imágenes adaptables podéis utilizar los comentarios para indicarlos.

Etiquetas: