Diseño web responsive: Imágenes

Cuándo y cómo usar etiquetado responsive

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Plantearemos diferentes situaciones que nos servirán para decidir cuándo es mejor usar las diferentes soluciones que tenemos disponibles actualmente para incluir imágenes responsive en nuestros proyectos.
02:35

Transcripción

Hay dos métodos principales para añadir imágenes responsive a nuestro proyecto web. Podemos usar el etiquetado tradicional img junto a la opción de usar srcset y, por ejemplo, sizes, o también podemos optar por el etiquetado pictures especificando imágenes a partir de ciertas condiciones. La más común es emplear srcset, aunque es importante hacerse las siguientes preguntas: ¿cuándo debemos usar imágenes responsive? y ¿qué método es el más eficaz? o ¿cuál debemos emplear? ¿Es mejor usar uno u otro en función de alguna situación en concreto? En las situaciones en las que una imagen necesite ser visualizada a gran tamaño o grandes dimensiones eso querrá decir que necesitaremos una imagen de alta resolución, pero en pantallas de alta densidad de pixel, también es probable que querramos mostrar imágenes nítidas. Y a pesar del tamaño físico de la pantalla, la cantidad de pixeles de la imagen también será necesariamente elevada. En estos casos, considerar que es mejor emplear el detectado img con srcset y sizes, porque estamos indicando al navegador que averigüe qué imagen es mejor para cada situación. No tenemos el control absoluto. Dejamos esa papeleta. Delegamos en el navegador que sea él, a partir de las imágenes que tengamos creadas, el que coloque la imagen que mejor encaje en cada situación. Por otro lado, si queremos tener un control minucioso de las imágenes a mostrar, por ejemplo, modificando incluso el contenido de la imagen en determinadas condiciones cuando la pantalla cambie, podemos emplear el elemento picture. Por norma general, cuando hablamos de imágenes responsive, estamos hablando de imágenes que se adaptan, como concepto general. Y aunque yo actualmente soy partidario de usar srcset porque me parece mucho más sencillo y manejable, no perdamos de vista que ambas soluciones son igualmente válidas y pueden encajar perfectamente en nuestros próximos proyectos. Si queréis seguir buscando más información sobre pictures, sobre img, sobre srcset, hay unos cuantos artículos en internet disponibles. Yo en un momento dado, bueno, pues escribí este título tan simpático en el que intenté hacer una especie de resumen de cómo estaba el panorama a la hora de trabajar con todo este contenido de imágenes responsive. Yo creo merece mucho la pena, sobre todo por la cantidad de enlaces desde los que vamos a poder seguir ampliando información.

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.