Diseño web responsive: Imágenes

Optimización de imágenes para el atributo picture

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo daremos un repaso muy rápido a lo que debemos tener en cuenta a la hora de preparar todas las imágenes que necesitemos, si estamos pensando en utilizar picture en las imágenes de nuestro proyecto.
02:48

Transcripción

Basándonos en experimentación y bocetos, deberíamos ser capaces de hacernos una idea de los diferentes tamaños de imágenes que vamos a preparar para poder emplear con el elemento picture. No te sientas frustrado si no eres capaz de establecer bien los tamaños y formatos a la primera, es cuestión de práctica, simplemente. En el caso de las imágenes responsive, es que en realidad no se trata de hacerlo todo perfectamente y como se venía diciendo que se hacía antes que había que hacer las cosas a nivel de diseño, hacerlas pixel perfect. En este ejemplo concreto que estamos viendo ahora mismo en pantalla, bueno, si nos fijamos hay diferentes puntos de corte en los que van apareciendo diferentes imágenes. Estas imágenes las tengo dentro de la carpeta referenciada en el HTML que estamos viendo en el navegador. Tengo seis imágenes diferentes, aunque nosotros en el navegador, ahora mismo, en realidad estemos viendo solo tres, una, dos y tres. Estas dos son la misma. Pero como digo, tengo seis versiones porque, bueno, yo he tomado la imagen original de cada una de ellas, me he quedado con una versión a alta resolución o 2x, que son estas imágenes que tengo aquí y luego a partir de estas imágenes, también he creado sus versiones a resolución estándar. Yo considero que esta es la práctica más habitual cuando se están empleando imágenes de ese tipo, imágenes bitmap, tener una versión estándar y otra de alta resolución. Y digo, imágenes de bitmap porque cuando estemos trabajando con archivos en formato vectorial evidentemente no necesitamos generar diferentes versiones porque van a poder escalar sin perder ni un ápice de calidad. Lo que tienes que tener en cuenta, es las diferentes herramientas y posibilidades que tenemos en general todos para poder optimizar las imágenes y emplearlas sin falta, evidentemente, a la hora de crear nuestros contenidos. Me refiero a que aunque estemos creando diferentes versiones de las imágenes porque estemos preparándolas para que el navegador solo haga la solicitud al servidor de la imagen que necesite en cada momento específico, bueno, pues tenemos que optimizarlas de manera correcta todas y para ello, bueno, pues tengamos cuidado a la hora de guardarlas desde Photoshop, desde Sketch, desde el programa que nosotros estemos habituados a usar y también recordar que tenemos otras herramientas, otros servicios online con los que podríamos optimizar aún más el peso de estas imágenes. Herramientas como tinyjpg, tinypng o JPEGmini, en las que podemos incluir nuestras imágenes, y reducir aún más el tamaño de estos archivos.

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.