Atributos responsive design para imagenes

Vamos a hablar de un interesantísimo atributo para todos los que desarrollamos sitios adaptativos o responsive design. El atributo src-N para imágenes.

El diseño web adaptable, diseño adaptativo  o Responsive Web Design,  es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, que consigue adaptar el sitio web al entorno del usuario.

responsive-adaptativo

Los casos en los que usaríamos una imagen responsive o adaptativa , son:

– Cambio de resolución basado en la proporción de píxeles del dispositivo: Los dispositivos con una mayor densidad de píxeles (admiten 2 px de imagen por píxel CSS ) deben cargar una imagen de calidad superior que los dispositivos de menor densidad de píxeles

–  Los dispositivos con un Viewport pequeño, deben cargar imágenes de menor resolución que los de mayor tamaño.

– Conseguir una combinación o efecto visual diferente. Muchas veces los creativos, buscamos un efecto visual concreto,y este, lógicamente, no se aprecia del mismo modo en todos los dispositivos.

Por ejemplo, en la creación de una web portafolio, podríamos hacer un diseño para pantallas grandes, donde apareciese un gran slider con la presentación de nuestros trabajos con gran cantidad de detalles, mientras que para un movil podríamos diseñar una galería con miniaturas de las fotos, lo que permitiría una carga más ágil y un resultado mas ligero para nuestra combinación.

Debemos pensar siempre que, utilizar diseños responsive design o adaptativos, permitirá que la navegación resulte más ágil, nuestros proyectos se visualicen del modo correcto (tal cual nosotros los hemos creado) y en definitiva, conseguir una experiencia de usuario muy buena.

Una solución de imagen sensible que navega con éxito estos casos de uso ahorra ancho de banda y sirve la imagen que se ve

El atributo src-N es increíblemente útil y versátil, ya que se encarga de “averiguar” qué imagen se ajuste mejor al tamaño de ventana y la resolución del dispositivo

El atributo src-N  es iterativo y se aplica a la etiqueta , por lo que, la etiqueta se compondría de “src” y una serie de atributos src (src-1, src-2, etc..):


<img src-1="(max-width: 480px) logo.jpg"
src-2="(max-width: 1024px) logo-tablet.jpg" 
src="logo-desktop.jpg alt="Logotipo de la empresa">

Las URLs basadas en la resolución se utilizan cuando queremos cargar una imagen de mayor calidad para los dispositivos con una mayor densidad de píxeles.

La resolución se expresa como la relación de píxeles de la imagen a píxeles CSS. Por lo tanto, un dispositivo de alta densidad de píxeles (que es 2px de imagen a 1px CSS), se expresa como 2x. Enumerando las URLs como valores separados por comas, por ejemplo:

>
<img src-1="logo-standard.png, 
logo-hd.png 2x">

URLs basadas en Viewport

Tienen una sintaxis más compleja, ya que frecuente expresamos los tamaños como porcentajes, por ejemplo:

       img {    
         float: right;<br />   
         width: 60%;<br />
         }
         @media only screen and (max-width : 30em) 
      img {
         width: 100%;
          }

La imagen del ejemplo está expresada en porcentajes: ancho del 60 % en un dispositivo grande y del 100% en dispositivo pequeño (teléfono)

En este caso, lo ideal sería disponer de varias imágenes de diferentes anchos, mostrar la que corresponda en cada caso; Para hacer esto debemos considerar:

1 . Los tamaños del Viewport : 30em para disp. pequeños, 100 para todos los demás
2 . El tamaño de la imagen para cada caso: 100 % y 60%
3 . Las URL de las imágenes y sus respectivas longitudes (expresadas en píxeles, no en %)

Con todo esto, podríamos cargar una imagen de gran calidad para una gran pantalla de retina, una de menor calidad para un monitor estándar o una pequeña y de menos calidad en un teléfono movil.

La sintaxis sería:

<viewport-urls> = <size-viewport-list> ; <size-based-urls>
<size-viewport-list> = <image-size> [ ( <viewport-size> ) <image-size> ]*     <image-size> = <length> | <percentage>
<viewport-size> = <length>
<size-based-urls> = [ <url> <integer> ]

Por ejemplo:

<img src-1="100% (30em) 60%;
logo-small.png 200, small.png 500, medium.png 800,
large.png 1100, x-large.png 1400">

Con esto ya podrás hacer que tus imágenes se muestren de modo correcto en función del dispositivo desde el que son vistas y conseguirás crear proyectos web de mayor calidad, con un funcionamiento más ágil y optimizado y con una mayor calidad creativa y visual.

: Link


 Google+

Patricia Juberias

Acerca de Patricia Juberias

https://patyjg.wordpress.com

Publicado el 3 febrero, 2014 en Creación y diseño web, DISEÑO Y NUEVAS TECNOLOGIAS y etiquetado en , , , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: