No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Imágenes para web

18/22
Recursos

Aportes 78

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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.

Sobre “alt text” en imagenes:

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

¡Ahora se puede hacer lazy loadiing con HTML nativo!

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

¡Pruébenlo en sus proyectos!

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/
😉

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

Actualmente se considera el formato webp, por ser más ligeras.

Varios 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

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.

Para aplicar el lazy loading a las imágenes de nuestro proyecto, se debe agregar la propiedad `loading` con el valor `"lazy"` a cada una de ellas.```js ```

Genial!

### Consejos para Elegir Imágenes 1. **Relevancia con el Contenido**: Selecciona imágenes que complementen y enriquezcan el mensaje que deseas transmitir. Deben añadir valor al contenido y no solo servir como relleno. 2. **Representación del Público Objetivo**: Usa imágenes en las que tus usuarios o clientes se puedan ver reflejados, lo que puede aumentar la conexión emocional y la relevancia del contenido. 3. **Consistencia Visual**: Asegúrate de que las imágenes estén en armonía con la paleta de colores y el estilo visual de tu marca o sitio web. 4. **Atención a las Licencias**: Es fundamental utilizar imágenes para las cuales tienes derechos de uso o que sean de dominio público o bajo licencias creativas compatibles con tu uso.

¡¡Magnífico!!

Imágenes para web

Hay varios formatos de imágenes utilizados para la web, a continuación, veremos los más utilizados y sus características.

  • JPG: Indicado para fotografías o imágenes con degradado
  • PNG: Indicado para imágenes decorativas que requieren un fondo transparente
  • SVG: Indicado para iconos y animaciones de baja complejidad. Es vectorial y permite editar sus propiedades con CSS.
  • GIF: No recomendado para animaciones de larga duración debido a su peso

Elegir imágenes para mi diseño

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.

  • Elige imágenes que aporten contenido
  • Utiliza imágenes en las que tu público objetivo se vea reflejado
  • Tus imágenes deben ser consistentes con la paleta de colores de la página
  • ⚠ Cuidado con las licencias

Rendimiento y accesibilidad

A continuación veremos algunas recomendaciones a tener en cuenta que pueden ayudar al rendimiento y a la accesibilidad, cuando trabajamos con imágenes.

  • Evita exportar imágenes con texto incrustado
  • Exporta las imágenes al tamaño del contenedor final
  • Considera el uso de estrategias como lazy loading
  • Asegúrate de añadir el texto alternativo a las imágenes que tengan un fin comunicativo.

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:

  • consiste en retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse.

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

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

hace poco me enteré que el 70% de personas dice Gif con un G acentuada en inglés como la palabra give o gift, pero el inventor de Gif dijo que realmente debe pronunciarse Jif como giraffe o Jira https://mashable.com/archive/mispronounced-words-tech

Muy bien los tips.

Para bajar el peso de sus imágenes pueden usar Tiny png

webp ?