Diseño web responsive: Imágenes

Preparando imágenes para su uso en entornos responsive

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
Estudiaremos un caso concreto que nos servirá para plantear las bases de trabajo a la hora de incorporar imágenes responsive a nuestro proyecto: qué necesitamos hacer, qué decisiones tomar y cómo afrontar la realidad del uso de imágenes responsive en la actualidad.
07:02

Transcripción

(hombre) Antes de que en cualquier proyecto nos pongamos a incluir todo el código necesario para incluir imágenes responsive es evidente que necesitamos preparar el contenido visual. Esto es, las imágenes. Aquí es donde radica la principal novedad. Donde antes utilizábamos una única imagen ahora nos toca preparar diferentes versiones de la misma para que, por ejemplo, el navegador decida cuál de estas imágenes escoger en cada situación concreta, aunque nosotros primero, evidentemente, deberemos de tomar la decisión sobre qué imágenes y tamaños preparar. El mundo responsive se reduce a crear puntos de corte por decirlo de algún modo. Establecer tamaños a partir de los cuales modificamos el aspecto visual de nuestro proyecto web o recolocamos algunos elementos. Es una definición un poco basta y quizá un poco difusa, pero sirve para hacernos una idea. Por tanto, somos nosotros, a la hora de preparar las imágenes los que tenemos que pensar en esos puntos de corte a la hora de prepararlas. Preparar imágenes, que se vean nítidas y pesen poco en sistemas de escritorio, en las diferentes tablets disponibles en el mercado, en dispositivos móviles. Pongamos un ejemplo ahora mismo. Tenemos un proyecto responsive de una web. Por convención, vamos a decir que establecemos un par de puntos de corte para definir estructuras y contenidos para escritorio para tablets y para mobile. Para cada una de estas tres áreas de actuación podríamos decir que tendríamos, para escritorio, imágenes para resoluciones superiores a 1200px, para el área de tablet imágenes para resoluciones entre 1200 y 480px, y para dispositivos móviles, bueno, pues las imágenes las tendríamos que preparar para resoluciones hasta 480px siempre hablando de ancho. ¿Todo entendido hasta el momento? Bien, pues tenemos un problema y preparar imágenes a diferentes resoluciones no es que sea el problema, precisamente. Abrimos Photoshop, cogemos las imágenes las vamos rescalando y no hay ningún tipo de problema. Pero, piensa un poco dónde puede estar el problema. ¿Recuerdas que las pantallas de los móviles cada vez se han ido viendo mejor? Eso es por la densidad de píxel de pantalla. Si queremos que nuestras imágenes se vean bien en esos dispositivos también vamos a tener que tenerlo en cuenta. Entendiendo la resolución estándar como 1x para densidades de pantalla 2x habría que generar imágenes al doble de tamaño y bueno, no es porque quiera complicar la jugada pero actualmente también ya hay bastantes dispositivos con una densidad 3x, entonces, ¿tenemos que generar nueve tamaños por cada imagen? Suena a locura, y la verdad, es que un poquito sí que lo es, pero vamos a intentar solucionar el problema o, al menos, ponerle un buen parche. Un método que, más o menos, suele funcionar como solución estandarizada es definir primero, el tamaño mínimo necesario, escoger a continuación el tamaño máximo necesario y, a continuación, seguir con los tamaños intermedios. En el caso anterior, tendríamos que el tamaño más pequeño era el del mobile o 480px de ancho a 1x. Y el mayor sería la imagen a 1200px de ancho, pero teniendo en cuenta la densidad 3x, con lo cual tendríamos una imagen que tendría que tener un ancho de 3600px de ancho. Ahora nos toca lidiar con los tamaños intermedios y lo haremos, más o menos, por aproximación. Tendríamos imágenes de 800px 960, 1200, 1440, etc. Lo que hay que hacer aquí es ser un poquito racionales y eliminar aquellos que pensemos que están demasiado aproximados unos con otros, y si hace falta, añadiremos algunos tamaños intermedios que cubriesen algunas resoluciones en concreto. El resultado con el que podríamos quedarnos en esta situación es algo tal que así: Podríamos tener una imagen, por así decirlo, mini de 480px de ancho, una imagen media, como por ejemplo para tablets de 960, para escritorios 1440px de ancho, escritorios de mayor tamaño 1800px y la imagen más grande de 3600px, para atacar, bueno, a pantallas de, no solo altas resoluciones, sino también alta densidad de pantalla. No obstante, esto que acabo de enumerar aquí, no lo tomes como una ley absoluta para nada, todo dependerá absolutamente del diseño planteado y las necesidades. Lo único que quiero hacerte ver es que busques algún tipo de convención a la hora de preparar las imágenes y te quedes con aquellos tamaños que consideres que pueden ser lo suficientemente útiles para cubrir el espectro del dispositivo, y eso sólo lo vas a conseguir a base de probar, testear en diferente dispositivos, ver qué imágenes cargan en unos y en otros. Una vez definidos los tamaños será el momento de que empecemos a optimizar las imágenes. Podemos usar la opción de "salvar para web" de Photoshop, o cualquier otra herramienta de la que dispongamos, para dejar el peso de las imágenes en el menor posible, sin afectar notablemente a la calidad de la misma. Actualmente se usa el formato JPG para fotografías y el formato PNG para el resto de imágenes por ser un formato con compresión sin pérdida. No obstante, siempre que sea posible, intenta usar formatos vectoriales como por ejemplo SVG e incluso fuentes de iconos que tendrán un peso mucho menor y además escalan sin perder calidad. Con los archivos ya definidos a nivel de tamaño y formato hay que considerar darles un nombre entendible por todo el equipo de diseño y desarrollo; es algo opcional, pero muy de agradecer. Emplea con tus archivos una nomenclatura natural, en la que el nombre es muy explícito, o una nomenclatura por dimensiones. Esto es incluso útil de cara a trabajos automatizados y funcionalidades que quizá necesiten reconocer el nombre de los archivos, y cuanto más estandarizados estén y se pueda reconocer un patrón mucho mejor. Por último, sé consciente del concepto de automatización. Siempre que sea posible, usa sistemas automatizados para poder trabajar. No vamos a estar generando continuamente las imágenes de manera manual. Recuerda por ejemplo, que Photoshop ya incorpora funcionalidades de automatización desde hace mucho tiempo y que también incluyó la posibilidad de generar imágenes al vuelo gracias a Generator. Hay otros programas con funcionalidades similares como Sketch, The Bohemian Coding, que también te permitirán automatizar todo el proceso de creación de imágenes.

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.