Diseño web responsive: Imágenes

Conceptos nuevos y terminología responsive

¡Prueba gratis durante 10 días

nuestros 1199 cursos !

Prueba gratis Mostrar modalidades de suscripción
Estudiaremos en detalle cada uno de los nuevos conceptos introducidos a la hora de trabajar con imágenes responsive, definiendo específicamente qué son cada uno de ellos y para que nos pueden servir en cada momento.
04:28

Transcripción

(hombre) La introducción del uso de las imágenes responsive es evidente que nos acerca a nuevas técnicas que apender y, por extensión, nueva terminología, que tampoco nos viene nada mal entender para poder ponerla en práctica entendiendo realmente de qué estamos hablando. Empecemos haciendo un listado de los elementos más interesantes. Tenemos srcset, también tenemos w para definir anchos, x para definir densidades de píxel, sizes y el elemento picture. Quédate con todos ellos porque los iremos empleando más adelante por muy crípticos que parezcan algunos de inicio. Empecemos con el atributo srcset. En un etiquetado tradicional de una imagen teníamos como elemento obligatorio la fuente o src, el atributo que permitía al navegador saber dónde estaba la imagen que queríamos mostrar justo donde se hacía la llamada. Actualmente tenemos la posibilidad de añadir un nuevo atributo llamado srcset que nos permite definir un listado de una o más imágenes separadas por comas. De todas estas opciones, el navegador escogerá la que mejor encaje, remplazando la URL marcada en el src original. Pero ¿cómo sabe el navegador qué imagen es la mejor en cada caso? Para eso tenemos otros parámetros que seguro que ya te suenan un poco. Podemos por ejemplo emplear el parámetro w que permitirá entender al navegador cual es el ancho de las imágenes listadas antes de que incluso las haya cargado, de esta forma, puede seleccionar la imagen correcta en cada situación sin necesidad de cargar recursos adicionales. Si la imagen "cereza" tiene 400px de ancho, podemos emplear 400w. Si mide 800px, 800w, y así tanto como necesitemos, ¿a qué es fácil? ¿Pensabas que era más complicado? Sigamos, también tenemos x como otro factor opcional. En vez de definir el ancho de las imágenes podemos indicar cuándo queremos usar una imagen u otra en función del valor de densidad de píxel de la pantalla. Por ejemplo, los móviles Apple que, generalmente, tienen densidad 2x o 3x necesitarán imágenes de mayor resolución para que se puedan ver nítidas, pues usamos 2x o 3x en el srcset acompañándolo de las imágenes que hayamos preparado para esas situaciones. Si no definimos nada, las imágenes se considerarán 1x o listas para ser servidas en pantalla de densidad de píxel estándar. Nota importante aquí, usar solo uno de los parámetros opcionales o x o w. Usar los dos a la vez puede dar probemas. Todavía tenemos más opciones disponibles. Tenemos sizes que es un atributo externo al srcset, que indica al navegador el tamaño de la imagen en relación al ancho total disponible del viewport del navegador. Si, por ejemplo, queremos que una imagen ocupe el 50 % del ancho total del viewport sizes debería tener un valor de 50vw. Incluso podemos usar condiciones similares a las media queries de css, en cuyo caso en sizes tendríamos parejas de valores, un condicional y un valor de ancho, dejando siempre al final un valor de ancho por defecto. En el caso del ejemplo que estamos viendo este valor por defecto sería 100vw, y estaríamos diciendo al navegador que esa imagen tiene que ocupar el 100 x 100 del ancho del viewport como valor por defecto. Por último, y dado el nuevo contexto de trabajo responsive tenemos el elemento picture a nuestra disposición que se compone de unas cuantas etiquetas source o fuente. Este elemento se emplea para estipular condiciones específicas a partir de las cuales una determinada imagen va a ser cargada. Para que lo entendamos, el elemento img y el atributo srcset dejan al navegador que escoja la mejor imagen, picture fuerza específicamente a usar determinada imagen bajo las condiciones que marquemos. Recuerda, los conceptos que tenemos y que hemos aplicado dentro de esta terminología responsive es srcset, w, x, sizes y picture.

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.
 
Formadores:
Fecha de publicación:25/10/2016
Duración:1:54 horas (24 Videos)

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.