Diseño web responsive: Imágenes

Cómo funcionan las imágenes responsive

¡Prueba gratis durante 10 días

nuestros 1241 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tendremos nuestro primer acercamiento a las imágenes responsive, viéndolas en un ejemplo para entender cómo funcionan y en qué consisten a la hora de estar visualizando una página web en la actualidad.
03:20

Transcripción

Hemos dicho que importa muchísimo el peso de las imágenes en la experiencia de usuario. Como son gran parte de los elementos que están siempre contenidos dentro de las páginas web que consumimos, a través de dispositivos móviles, de tablets, de nuestros sistemas de escritorio, pues es ideal optimizarlas al máximo posible. Sin embargo, qué es lo que ocurre, que en la actualidad, como decía, podemos ver una misma página web desde una pantalla tan pequeña de un dispositivo móvil a una pantalla enorme de un sistema de escritorio de por ejemplo, 27 pulgadas. Entonces, por mucho que optimicemos nosotros las imágenes, lo ideal sería poder contar con diferentes opciones de una misma imagen, de esta manera, el navegador interpretaría cuál es la mejor versión en cada momento y así no tendríamos que desechar recursos o descargar imágenes de un peso que, realmente, nosotros no necesitamos. Ese es el contexto actual en el que las imágenes responsive han venido ha solucionarnos ese problema. Si yo, por ejemplo, estoy visualizando este artículo que tengo ahora mismo en el navegador en mi pantalla de 27 pulgadas en el escritorio, no voy a tener ningún tipo de problema porque se va a ver a la calidad oportuna y el archivo va a pesar determinado peso. Sin embargo, no creo que vayamos a necesitar una imagen de tanto tamaño o de tanto peso para poder verla en una tablet o en un dispositivo móvil. Para eso están las imágenes responsive. Lo ideal, por tanto, es tener diferentes versiones de una misma imagen para que el navegador pueda escoger cuál es la mejor en cada situación. Yo ya tengo un ejemplo aquí creado, con el marcado los elementos .html necesarios para que la imagen sea completamente responsive porque, aunque tengamos una sola imagen y viésemos que con un marcado simple, definiendo un contenedor, dentro del contenedor establecemos que la imagen ocupe el 100% del ancho y un alto proporcional, siempre vamos a estar utilizando la misma imagen, con lo cual, si queremos que se vea bien en pantallas grandes la imagen va a tener una resolución y un tamaño determinado que quizá no sea lo necesario para una tablet o un móvil. En este caso, voy a activar, usando el navegador Firefox, la vista de diseño adaptable y, esto, en el fondo, es el resultado que nosotros estamos buscando a la hora de trabajar con imágenes responsive: un marcado .html, que nos permita cargar diferentes imágenes en función del tamaño del viewport y, de esta manera, no estamos, por así decirlo, desperdiciando recursos, sino que, en función del contexto en el que estemos visualizando la página web se cargará una imagen u otra. Recuerdo que las imágenes consumían gran parte del ancho de banda a la hora de visualizar una página web y de lo que se trata es de ofrecer una correcta experiencia de usuario, la mejor posible. Con lo cual, el uso del imágenes responsive a día de hoy es casi obligatorio.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.