Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Imágenes para web

18/22
Recursos

Aportes 64

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Imágenes para Web

  • JPG: Imágenes con degradados (ligero pero sin tanta calidad)
  • PNG: Fondo transparente
  • SVG: Vectores, usados en iconos y animaciones
  • GIF: En movimiento, es pesado

Como elegir:

  • Aporten al contenido
  • Dirigido al cliente
  • Consistente con la paleta de colores
  • 👀 Licencias

Rendimiento y accesibilidad

  • Evitar texto en las imágenes
  • Exportar al tamaño del contenedor final
  • Lazy loading: Cargando dinámico
  • Texto alternativo

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.

Hay varias aplicaciones que se pueden usar para buscar imagenes

Pexels
Pinterest
Pixabay

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:

Les comparto

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.

Para aquellos que quieran ampliar sobre lazy loading:
https://es.wikipedia.org/wiki/Lazy_loading
https://web.dev/fast/
😉

Dejo mis apuntes, espero les sirva 😃

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.

¡Ahora se puede hacer lazy loadiing con HTML nativo!

<img src="..." loading="lazy" />

¡Pruébenlo en sus proyectos!

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

Creo que es importante saber que debemos empezar a usar imágenes con formato de próxima generación (.webp)

JPG haciéndose pasar por un PNG.

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

18. Imágenes para web

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

  • Elige imágenes que aporten al contenido.
  • Utiliza imágenes en las que tu público objetivo se vea reflejado.
  • Verificar el uso de derechos de las imágen.
  • Evitar imágenes con texto incrustado.
  • Exporta imágenes al tamaño del contenedor final.
  • Considera el uso de estrategias como “Lazy Loading”.
  • Asegúrate de añadir “alt text” a las imágenes que tengan un fin comunicativo.

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

Excelente! Muy bien explicado, muy buena profesora!

Jpg es mucho mejor solo por el peso del archivo

Excelente!

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.

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???

  • JPG: para fotografía o degradados.
  • PNG: Imágenes decorativas que requieren un fondo transparente.
  • SVG: Imágenes vectoriales y convertibles a código.
  • Gif: Imágenes animadas pero muy pesadas.

¿soy el único que piensa que debido ser mas practica?

<h5>Formatos:</h5>

JPG: Imágenes con degradado.
PNG: Fondo transparente.
SVG: Iconos y animaciones de baja complejidad (ADOBE ILUSTRATOR).
GIF: Animaciones, son muy pesadas.

Las imágenes son un aporte al contenido, q sean consistentes (colores) y reflejen al público. !LINCENCIAS.

<h5>Rendimientos y Accesibilidad:</h5>

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’.

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.

18.-Imágenes para web

SVG permite que sus propiedades sean modificadas en css. Para animaciones de baja complejidad, iconos.

Elegir imágenes para mi diseño:

  • Elige imágenes que aporten al contenido.
  • Utiliza imágenes en las que tu público objetivo se vea reflejado.
  • Elige imágenes consistentes con tu paleta de colores
  • Cuidado con las licencias.

Rendimiento y accesibilidad:

  • Evita exportar imágenes con texto incrustado.
  • Exporta imágenes al tamaño del contenedor final.
  • Considera el uso de estrategias como ‘Lazy loading’ que consiste en cargar las imágenes conforme vamos haciendo scroll.
  • Asegúrate de añadir ‘alt text’ a las imágenes que tengan un fin comunicativo.

No es buena práctica añadir un titulo dentro de una imagen.

Con esta herramienta pueden mejorar el peso de sus imágenes.


https://tinypng.com/

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.

Alguien conoce los nuevos formatos recomendados por Google en su sistema de Pagespeed

  • JPEG 2000
  • JPEG XR
  • WebP

¿Alguien los usa?

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 ?

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