Creando imágenes adaptables o responsive

Logotipo de avanzalia.infoComo 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.

Pantalla con la selección de configuración de bloqueo de la tarjeta SIM.

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.

 

Comentarios

 Our team of experts specializing in project management  write my college paper for me can provide the much needed assistance in writing management-related essays. 

I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. karamba

Much obliged for imparting this exceptionally assorted insight post where every master has no uncertainty shared his best information on the theme. Have more achievement TypeMyEssay4Me on your excursion.

The best web showcasing extra offers are ones that are sufficient to be remain solitary items. casino777

the website has a 24-hour client hotline in such a case that they do have client benefit accessible as needs be, at that point it implies that the Internet betting webpage implies business. sunmaker

These two organizations are very dynamic and had delivered some great gambling club programming.Betclic

Other than that, if the merchant's "up" card is a numbered card under seven, you have the favorable position,  Pokerstars

Thanks to this article I can learn more. http://chouraha.com/collector-kaise-bane/ Expand your knowledge and abilities. Actually the article is very practical.

Immediately this specific website may have irrefutably turned out to have involved every single issue of a lot of people, as a consequence of careful content along with testimonials along with evaluations. Mrplay

These online club recreations, for example, online blackjack or online craps, are accessible to be played without enrolling.  trada casino

Añadir nuevo comentario

Filtered HTML

  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
CAPTCHA
Esta pregunta se realiza para comprobar que se trata de un humano y prevenir los accesos automatizados para publicar spam.