Diseño web responsive: Imágenes

Detectando densidad de pixels por pulgada usando x

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En este ejemplo aprenderemos a detectar la densidad de pixels del navegador para poder incluir imágenes responsive empleando srcset, pero definiendo diferentes densidades de pixel y no empleando el ancho de las imágenes como referencia.
04:44

Transcripción

(Hombre) Sabemos que a la hora de trabajar con SRCC tenemos diferentes atributos que podemos incluir para indicarle al navegador lo grande que es una imagen. Tenemos por un lado el atributo W para definir el ancho y también tenemos el atributo descriptor X para indicar la densidad de pixel de la pantalla. Si he dejado un poco de lado esta última opción, es porque por norma habitual suele emplearse más el primero y además recuerda que es muy importante no usar los dos a la vez para evitar problemas. Generalmente, se usa el atributo del ancho porque es mucho más entendible de cara construir también el CSS asociado nuestro documento HTML, de todas formas, con el atributo X, en vez de hablar de anchos hablariamos de densidades de píxel. Esta imagen para pantallas con una densidad de 1X, esta otra imagen para pantallas con densidad 2X, y así, tantas como nosotros hubiesemos preparado en nuestro programa de diseño, las hubiesemos guardado y las estuviesemos incluyendo y enlazando dentro el SRCC de la imagen en concreto. En cualquier caso, va a haber situaciones en las que es interesante en vez de usar el descriptor W, usar el X, y por ejemplo vamos a usar el ejercicio que he venido usando anteriormente. Lo tengo aquí abierto ahora en Firefox, con la posibilidad de ver como quedaría en diferentes tamaños de ventana ahora mismo no hay nada extraño porque todo está mostrando el código que yo tenía generalmente asociado tenia el SRCC con diferentes anchos definidos también tenía un atributo sizes entonces lo que voy a hacer es, en vez de atacar o apuntar en este caso al ancho de las imágenes, lo que voy a hacer es definirlas para una densidad de píxel de pantalla determinada. Para hacerlo fácil, lo que voy a hacer es quedarme con la imagen más pequeña y con una de las imágenes grandes, en este caso por ejemplo cereza-large voy a eliminar estos dos ejemplos que tengo en medio, los selecciono y los elimino, voy a eliminar también la coma del final, y vamos a escribir aquí: 1x y aquí: 2x para que, para que una imagen se muestre en aquellos dispositivos que esten accediendo y que tengan densidad de píxel de 1x o estándar y para los dispositivos que sean de 2x o superior, podría poner otra imagen si la tuviese, darle el nombre que fuese y poner 3x, 4x, tantas como necesitara Con esto, y guardándolo, no tendría que hacer ningún cambio más realmente sizes también me valdría para poder tener en cuenta determinados casos de anchos de ventana del navegador, pero, realmente con este simple cambio, vamos a poder ver en el navegador, a la hora de recargar, que bueno, en principio, no parece haber ningún cambio, de hecho si me fijo ahora no voy a cargar diferentes imágenes dentro de esta primera imagen, que es la que había modificado. Voy a abrir por ejemplo, el emulador de Chrome vamos a recargar para ver que estemos usando el mismo ejemplo y además con los últimos cambios y lo que voy a hacer es activar también el emulador de este navegador, porque me voy a fijar que pueda modificar la densidad de píxel, me fijo que estoy ahora mismo usando una densidad de 1x y si la cambio a 2, vamos a cambiarla, y vamos a recargar, Y me fijo en que ha cambiado la imagen. SI quisiera poner otra imagen diferente con 3x, bueno pues tendría que volver al documento, y como he dicho anteriormente, pues. además de preparar la imagen vincularla correctamente. Una vez visto esto mi consejo, en el fondo es emplear el atributo W en la medida de lo posible. Yo creo que es más práctico, salvo que encontremos algún caso donde cargar las diferentes imágenes a partir de la densidad de píxel, bueno pues, tenga mucho más sentido Por ejemplo, en este caso de layout donde lo que estaba haciendo era trabajar con una galeria, donde dentro de una pantalla tampoco tenia mucho sentido realizar cambios, sí que me podía interesar realizar el cambio de imagen en función de la densidad de píxel de la pantalla no del tamaño de la ventana en sí. En el fondo con esto quiero decir que todo va a depender de la situación concreta y de como estemos preparando la estructura de nuestro proyecto HTML.

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.