Advertise

miércoles, 26 de junio de 2013

Imágenes adaptaptadas al dispositivo en diseños ‘responsive’

Llevo un tiempo dándole vueltas a las diferentes soluciones a la hora de servir imágenes en un diseño responsive. No me refiero simplemente a hacer que las imágenes sean fluídas y que se adapten al dispositivo, sino que hablo de que no sea necesario descargar una imagen de 1280px en un dispositivo que solo tiene 480px de ancho.
Diseño responsive
Imaginad una web que tenga muchas imágenes de alta resolución (hablando de páginas web), o si no sois capaces echad simplemente un vistazo a esta web. Si nos estamos adaptando a los dispositivos móviles, lo que no podemos es hacerle descargar al usuario más de 5 megas en fotos y luego escalarlas a la mitad, mucho menos si tenemos en cuenta el ancho de banda de las tarifas móviles españolas.
Por eso creo, y no soy el único, que habría que servir diferentes tamaños (y por lo tanto diferentes pesos) de imágenes en función del dispositivo que esté accediendo a tu web. La mejor solución que he encontrado es Adaptive Images, o cualquier sucedáneo del mismo. Pero el problema es que aunque es lo mejor que he visto no me convence, tiene ciertas pegas y no me gustaría que fuese peor el remedio que la enfermedad.
Las pegas que le veo a este sistema son:
  • Todas las imágenes servidas de esta manera dejarán de ser ‘contenido estático’ ya que será un archivo PHP el encargado de decidir la imagen a servir en base a la resolución del dispositivo.
  • Las imágenes afectadas no se podrán servir desde un dominio libre de cookies ya que el sistema se basa en ellas para funcionar.
Aún así, en webs que no tienen un excesivo tráfico no creo que conlleve un gran problema y creo que utilizar Adaptive Images mejorará la experiencia del usuario en dispositivos móviles sin afectar negativamente al resto de usuararios, pero me gustaría que me dijerais si vosotros os habéis planteado esto y si habéis encontrado una manera mejor de hacerlo.

0 comentarios:

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews