Diseño web responsive: Imágenes

Uso de sizes

¡Prueba gratis durante 10 días

nuestros 1271 cursos !

Prueba gratis Mostrar modalidades de suscripción
Con sizes podremos controlar con mayor grado de detalle la aparición de las diferentes imágenes que tengamos incluidas en nuestro etiquetado srcset a partir de condicionales basados en los puntos de corte de nuestro documento html.
06:45

Transcripción

Cuando añadimos el atributo sizes a nuestras imágenes, es bueno que le echemos un vistazo a nuestro documento y nuestro ccs de manera previa. En este caso, vamos a ver además que a medida que hago más grande la página llegará un punto en que deje de hacerse más grande, y eso es así porque tengo una condición, un punto de corte, a partir del cual he establecido ese comportamiento. Tengamos esto en cuenta porque con el srcc solo, el navegador sigue buscando imágenes más y más grandes, sin tener en cuenta el ancho realmente de la imagen. Vamos a verlo. Tengo aquí el HTML ya abierto de ejemplo, y lo que he estado diciendo es que, aquí tengo diferentes puntos de corte, los que cambian la imagen, y llega un punto en el que la maqueta en general, ya no se hace más grande. La imagen, el tamaño que ocupa dentro de la ventana del navegador, no se modifica para nada. Bueno, en este caso lo que vamos a hacer es utilizar sizes, para indicar la imagen que se esté usando correctamente en cada momento, porque por defecto, si solo estamos usando ese rcep, el navegador, como decía, sigue buscando imágenes más y más grandes sin tener en cuenta el ancho que necesitamos realmente de la imagen. Hay un momento en que la imagen ya deja de crecer, y no necesitamos seguir empleando imágenes más y más grandes, con lo cual estamos realmente desperdiciando recursos. No tenemos por qué cargar esas imágenes cuando realmente el ancho de la imagen no varía. Esto podemos verlo fácilmente viendo por un lado que no se hace más grande porque lo tenemos en un punto de corte en el ccs, vamos a mostrarlo. El ccs donde tengo el punto de corte, lo tengo aquí. Tengo el punto de corte usando una unidad relativa 48 em. Vamos a mostrar el contenido. Esos 48 em, en este caso escritorio, equivale a unos 900 pixeles más o menos. Vamos a re-escalar la ventana, en este caso hacia unos 900 más o menos, que es justo lo que decía. Vamos a cerrar esto temporalmente. y vamos a ponerlo aquí arriba para poder verlo. Vamos a ponerlo en 900 más o menos. Aquí es donde se hace el corte. Ya no se hace más grande, y sin embargo, hay imágenes que siguen cargando y que no son necesarias. Vamos a dejarlo en 900, y vamos a ver ademas, nuevamente vamos a inspeccionar, vamos a ver cuanto ocupa realmente ese ancho en este caso. Nos estamos fijando que tenemos 792 píxeles aproximadamente de ancho, y sin embargo, estoy cargando la imagen de 1200 píxeles de ancho. Realmente aquí lo que podríamos hacer, es emplear la imagen que teníamos de 800 pixeles de ancho ya preparada. Es innecesario que usemos esta imagen así tan grande, y menos aún la de 1600 de ancho que también aparece si seguimos haciendo más grande el viewport. En nuestro caso no es necesario. Para eso está sizes en este caso. Y vamos a incluirlo dentro del documento. ¿Qué voy a hacer? Pues lo que voy a tener en cuenta, es el punto de corte, que yo he creado a partir del cual deja de crecer el contenedor de mi HTML, en este caso la clase main, que es donde tengo además la imagen. Me voy a fijar en el valor de 48 em, y lo que voy a hacer es copiar esta regla, vamos a copiarla, y vamos a incluirla dentro del atributo sizes de mi imagen. Vamos a poner sizes, y vamos a incluir la regla a partir de la cual yo estoy definiendo el ancho de la ventana del navegador, y voy a indicarle el máximo del ancho de la imagen en píxeles. en este caso, bueno, pues vamos a poner 800 px. Vamos a escribir una coma, y tenemos que dejar siempre un valor por defecto en el caso de que no indiquemos ninguna regla adicional, pues cuanto va a ocupar esta imagen dentro del hueco que se va a dejar en el HTML. Vamos a escribir 100 vw para indicar que la imagen ocupe todo el espacio posible dentro del hueco que se deje dentro del HTML. Vamos a guardar, y vamos a volver al navegador. En este caso lo que voy a hacer es abrir una ventana nueva. Vamos a copiarlo, para poder ver la diferencia. Vamos a activar nuevamente la vista de diseño adaptable, y realmente ya estamos viendo el cambio si nos fijamos. Vamos a poner aquí el ancho, lo vemos: 1206 x 1024. 1206 x 1024, si nos fijamos, nosotros hemos sido capaces de decirle al navegador que tenemos diferentes imagenes preparadas para poder utilizar en diferentes casos, pero bueno, en este caso realmente no es necesario que nosotros empleemos la imagen de 1200 o incluso la de 1600, porque nos bastaría con emplear la de ancho de 800 px, y eso lo hemos podido utilizar gracias al uso de sizes. Las otras dos imágenes, ¿cuándo se van a usar? Bueno, se usarían en casos en los que por ejemplo, estuviésemos empleando otro tipo de dispositivos como por ejemplo de alta densidad, de alta resolución. Aquellas pantallas a 2x o 3x, sí que mostrarían estas imágenes más grandes, porque son las que realmente harían falta. Hagamos un repaso rápido por tanto. Con sizes podemos limitar el ancho de la imagen en función del tamaño del viewport usando condicionales. Generalmente se usan pares de datos: por un lado el condicional, y por otro, el valor de ancho de la imagen. Y lo último que vemos suelto, es de 100 vw, es un valor por defecto que determina el ancho de la imagen en los casos en los que no hayamos definido ningún tipo de condición. Podemos añadir tantos pares de opciones como necesitemos, y usar las diferentes unidades que tenemos a nuestra disposición, valores absolutos en pixel, o por ejemplo relativos, con la unidad em. Si queremos ampliar información sobre el uso de sizes, de srcc, o de todo lo que necesitaramos para poder aplicar las imágenes responsive, también tenemos un artículo en la web de Eric Portis, donde podemos ampliar información sobre todo esto que estamos hablando.

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.