Introducción
Todo lo que aprenderás sobre diseño para programadores
Entender los Fundamentos del diseño
El proceso creativo
Conceptos básicos de diseño
Diseño responsivo
Accesibilidad y diseño
Brief y requerimientos técnicos
Aprender sobre Diseño Experiencia de usuario
Definición de diseño UX
Diagramas de flujo
Wireframes y componentes
Aprender sobre Diseño de interfaz de usuario
Definición de diseño UI
Moodboard y línea gráfica
Teoría del color
Paletas de color
Tipografía
Layout y sistemas de grillas
Sistemas de componentes UI
Themes y customizaciones
Imágenes para web
Gráficos en movimiento para web
Resultado final
Conclusiones
Conclusiones del curso
Mentoría Expert
Diseño para programadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 76
Preguntas 8
Imágenes para Web
Como elegir:
Rendimiento y accesibilidad
IMÁGENES WEB
Las imágenes y videos y otros elementos decorativos nos ayudan a reforzar el mensaje que queremos dar en nuestra página.
¿Cómo elegir las imágenes para la web?
Lo primero es tener claro los formatos de imágenes que podemos usar:
• JPG: indicado para imágenes con degradados. Recomendado sobre PNG pues pesa menos.
• PNG: Indicado para imágenes con fondo transparente.
• SVG: Indicado para iconos y animaciones de baja complejidad. Es vectorial y se puede pasar a código, permitiendo editar sus propiedades con CSS.
• GIF: No recomendado para animaciones largas pues pesa mucho.
¿qué imágenes podemos elegir?
• Que aporten algo al contenido.
• Usa imágenes en la que el publico objetivo se vea reflejado.
• Elige las imágenes que se adecuen a la paleta de colores que seleccionaste.
• Cuidado con las imágenes con licencia.
Otras consideraciones importantes de rendimiento y accesibilidad:
• No exportes imágenes con texto incrustado. No las puede leer el lector de pantallas.
• Poner imágenes del tamaño del contenedor. Cuando tenemos que modificar una imagen para que se adapte al contenedor, esta normalmente se estropea y no se ve correctamente. Y cuando son imágenes muy grandes, se agranda el tiempo de carga innecesariamente.
• Considera el uso del “lazy loading”. Esta estrategia consiste en que las imágenes se van cargando a medida que hacemos scrool, minimizando el tiempo de carga de nuestro sitio.
• Asegúrate de añadir ALT Text a las imágenes que tengan un fin comunicativo.
JPG haciéndose pasar por un PNG.
El alt text también es importante para el SEO
A mi me gusta usar mucho imágenes de Unsplash
Y su licenciamiento es muy flexible.
Recomiendo el curso de optimización web: https://platzi.com/clases/optimizacion-web/
Se explica y soluciona el problema de una imagen gigante en un espacio pequeño (Lo cual retrasa la carga de la página).
Sobre “alt text” en imagenes:
¡Ahora se puede hacer lazy loadiing con HTML nativo!
<img src="..." loading="lazy" />
¡Pruébenlo en sus proyectos!
Les comparto
Para aquellos que quieran ampliar sobre lazy loading:
https://es.wikipedia.org/wiki/Lazy_loading
https://web.dev/fast/
😉
Consejo: Tomen el curso de Introducción al Diseño, Fundamentos de Diseño ui&ux y FIGMA. Estoy seguro que harán buenas páginas.
A nivel SEO, si es una web que va a ser indexada por los buscadores, se recomienda que las imágenes tengan el formato WebP, un formato creado por Google que ayuda al posicionamiento y rendimiento de la imagenes en temas de velocidad de carga e indexación, ese es el formato que piden ellos en caso de que la app reciba tráfico orgánico desde el buscador.
Leo muchas recomendaciones de sitios para imágenes. Una recomendación muy buena por parte del profesor DeGranda.
Midan el peso de sus imágenes( https://tinypng.com/).
Medidas responsive (https://www.mydevice.io/#compare-devices).
Ayuda mucho también programas como los de Adobe.
https://www.youtube.com/watch?v=h59jW3lgx7w
Les comprato un video muy interesante que explica a grandes rasgos el formato SVG y su uso en HTML
Formatos para la web:
JPG: Indicado para fotografías o imágenes con degradados.
PNG: Indicado para imágenes decorativas que requieran un fondo transparente.
SVG: Formato en vectores que puede ser cambiado a código, indicado para iconos y animaciones de baja complejidad. Es vectorial y permite editar sus propiedades con CSS.
GIF: No recomendado para animacioens de larga duración debido a su peso.
Tips para agregar imágenes
Actualmente se considera el formato webp, por ser más ligeras.
Ahora existe un nuevo formato para imágenes para la web llamado: webp, el cual reduce su tamaño en peso y enfocado en la web.
Dejo mis apuntes, espero les sirva 😃
Link de lazy load mencionado para la carga de imágenes !
Una opción a Gif pueden usar un archivo JSON
demo
🐱💻 Si utilizamos imágenes de Internet, debemos buscar aquellas que no tienen derechos de autor.
Una duda…No recomienan los “gifs” por pesar mucho. En el caso de un blog, veo que, los ponen mucho (complementar lo escrito). Los han utilizado? Los recomiendan? es interactivo con el usuario?
Una buena web para imágenes es https://pixabay.com/es/ la mayor parte de sus imágenes las puedes utilizar ya que están libres de derechos de autor, cada autor te da las condiciones de cómo usarlas muchas de ellas solo es darle el reconocimiento de que ellos son los autores.
A mi me gusta mucho usar imagenes SVG, son flexibles y siempre se ven bien sin importar el tamaño ya que son vectoriales
Alguien conoce los nuevos formatos recomendados por Google en su sistema de Pagespeed
¿Alguien los usa?
SVG permite que sus propiedades sean modificadas en css. Para animaciones de baja complejidad, iconos.
Elegir imágenes para mi diseño:
Rendimiento y accesibilidad:
No es buena práctica añadir un titulo dentro de una imagen.
JPG: Imágenes con degradado.
PNG: Fondo transparente.
SVG: Iconos y animaciones de baja complejidad (ADOBE ILUSTRATOR).
GIF: Animaciones, son muy pesadas.
<h5>Rendimientos y Accesibilidad:</h5>Las imágenes son un aporte al contenido, q sean consistentes (colores) y reflejen al público. !LINCENCIAS.
Evitar imágenes con texto incrustado.
Exportar las imágenes al tamaño de contenedor.
‘lazy loading’ -> Carga las imágenes conforme baja el scroll de la página.
Añadir ‘altText’.
Hay varios formatos de imágenes utilizados para la web, a continuación, veremos los más utilizados y sus características.
Cuando diseñamos tenemos que tener especial cuidado en el peso de la imagen, ya que esto puede afectar al rendimiento de nuestra página. Por lo tanto, debemos elegir imágenes con mucho cuidado y siguiendo los siguientes criterios.
A continuación veremos algunas recomendaciones a tener en cuenta que pueden ayudar al rendimiento y a la accesibilidad, cuando trabajamos con imágenes.
lazy loadingVarios cursos ya tienen varios años, que dificil es querer comenzar en el mundo del desarrollo web con cursos no actualizados. Este curso me parece que debió considerarse primero como teórico y después hacer uno práctico aplicando los conocimientos. Me siento maaaal 😦
un Tip para la busqueda de imagenes sin licencia es agregarle al nombre CCo. ejemplo Casa CCo… no traera el buscador todas las imagenes que no tiene copyright
Creo que es importante saber que debemos empezar a usar imágenes con formato de próxima generación (.webp)
Mi experiencia en diseño y web me ha demostrado que para fotografías es mejor usar JPG y para casos como imágenes de tipo ilustración, logos, flat, con pocos colores es mejor usar PNG y lo digo por el peso final, aunque si tienes la posibilidad de exportar en SVG pues sería lo ideal, mejor que PNG
Excelente! Muy bien explicado, muy buena profesora!
Jpg es mucho mejor solo por el peso del archivo
Excelente!
Genial!
¡¡Magnífico!!
debemos seleccionar muy detalladamente nuestros archivos a incluir en nuestro proyecto, las extensiones jpg y gif son extensiones de imagenes pesadas y que pueden llevar a reletizar la vista de nuestro proyecto, debemos tener como primera opcion las extensiones svg y png, con respecto a svg son archivos creados con adobe illustrator lo que permite el toque de originalidad.
En cuanto estrategias de rendimiento podemos utilizar el lazy loading que permite cargar las imagenes y animaciones a medida que vas dandole scroll a la pagina.
también se puede usar el formato de webp
Lazy loading:
Me llamó la atención la recomendación de agregar alt text, para considerar a personas que por motivos técnicos de su dispositivo u otras causas, no puedan ver las imágenes de la interfaz. De esta manera, te aseguras que quien no pueda ver tus imágenes, tenga textos alternativos que den una explicación breve de lo que se trata cada imagen, y así nadie se queda fuera de recibir la misma información o mensaje. Esto es un tema importante de accesibilidad web.
En relación con las licencias, que paginas recomiendan para bajar imagenes, bien sea jpg, png, svg, pero que sean de uso libre y sin problemas de reclamos???
¿soy el único que piensa que debido ser mas practica?
Recomiendo utilizar compresores de imágenes y que queden de alta calidad, uno de los que mas utilizo es: https://tinypng.com/
Muy buen curso, siempre tuve mucho conflicto con los procesos de diseño, ahora ya se como empezar mi proyecto personal…
Gracias Totales!
Las imágenes para web que subas deberían estar optimizadas para tener el mínimo tamaño posible, sin pérdidas de calidad apreciables.
Imágenes vectoriales. …
Imágenes en mapa de bits. …
Captura de pantalla. …
Infografías. …
Tablas y gráficas. …
Fotos personales. …
Imágenes de películas y series. …
Imágenes personalizadas.
no ponerle a las hamburguesas 80,000 filtros como en el INSTAGRAM jajajajjajajaja >:V
Es importante recordar que para subir una imagen a la web esta debe pesar máximo 70kb.
Siempre debes añadir el ALT a tus imagenes.
Ayuda a la accesibilidad y al SEO
Evita las imagenes de stock gratiutas, todo mundo las utiliza y resta seriedad a la pagina.
Las imagenes siempre deben ser un aporte al contenido, no simplemente poner imagenes porque si
El tema del Alt Text es importante especialmente para sitios que usualmente tienen mucho contenido y puede que a veces no cargue todo
Excelente!
Gracias platzi!!!
Yo una vez vi un vídeo en youtube en que decían que ya había que olvidarnos de PNG y JPG y enfocarnos en solamente utilizar SVG para imágenes en la web.
Muy importante tener en cuenta
Formatos: JPG - PNG
Formatos: SVG - GIF
Elegir imágenes para mi diseño
Rendimiento y accesibilidad
Gracias por el contenido
Muchas gracias, buen video.
Muy bien los tips.
Para bajar el peso de sus imágenes pueden usar Tiny png
webp ?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?