Optimización de imágenes

Optimizar nuestro sitio web con las imagenes o iframes, es colocando en la etiqueta img el atributo loading con el valor lazy.

<img loading="lazy"  src="manzana.png" alt="People">

Atributo loading
El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores:

• lazy: Retrasa la carga de la imagen hasta que el usuario alcanza con el scroll una distancia calculada desde el viewport.
• eager: Carga la imagen inmediatamente, sin importar donde está situada o colocada en la pantalla. En resumen, no hace lazy-loading.
• auto: Implementa el comportamiento por defecto del navegador para la carga de las imágenes. En resumen, poner auto es lo mismo que no poner el atributo loading.

RECOMENDACIÓN PERSONAL
Yo he usado estas páginas y no se logra optimizar a esta capacidad promedio de 70kb, pero usando Photoshop cambiando el ancho de la imagen y guardandolo como una imagen para web, he podido optimizar de 12MB a 92KB, que en mí opinión ha sido mejor que usar algún sitio en internet.

Hay otra pagina que te permite reducir el peso a la imagenes y es mucho mas visual que Tiny PNG, ademas te permite elegir varios formatos y reescalar.

Se llama Squoosh y la puedes ubicar acá: Squoosh

Existen muchas opciones para optimizar las imágenes, pero Tiny PNG Tiene un panda, eso ya son puntos extras

Recomiendo el curso de optimización de carga de sitios Web de Leonidas Esteban, donde también vemos esto de comprimir imágenes

https://platzi.com/clases/optimizacion-web/

https://www.remove.bg/

Este sitio le quita el fondo a imágenes, para que queden con transparencia

Platzi dentro de platzi

También pueden hacer uso de https://squoosh.app

Esta es la aplicación oficial de Google para optimizar imágenes

Recomiento el formato WebP de google cuando quieran reducir aun mas la imagenes.
Este formato obtiene un ahorro de 25 a 35% con respecto a JPG/JPEG y 26% en PNG con la misma calidad de imagen.
Es ideal cuando tu sitio web usa muchas imagenes.

Online Converter es una herramienta para convirtir a WebP
https://imagen.online-convert.com/es/convertir-a-webp

Por aquí les dejo mis apuntes:
Si quieren acceder a todos los apuntes, e importar la hoja de Notion a sus Notion’s, les dejo el link aquí

En promedio una imagen debe de pesar alrededor de 70 kb a 100 kb, no puede pasar más de 1 Mb. Tienes dos opciones para cumplir esto:
• Mejora el tamaño de tus imágenes: Tiny PNG, con esta página tú puedes agarrar una imagen, puedes ponerla en la pagina y la pagina se va a encargar de comprimirla y regresarte ya con un tamaño mucho más óptimo. Es mucho más funcional con imágenes JPG.
• Retira metadatos de tus imágenes: Verexif: cuando tu tomas una fotografía con tu celular, el celular le agrega ciertos datos que se llama metadatos a esta imagen, esta fotografía va llevar como metadatos la hora en la que se tomó, el lugar en donde se tomó y otro tipo de información que tu celular le va a agregar a esta imagen, lo que tenemos que hacer es quitarle esos datos. Así que en esta pagina cuando tu tomes una fotografía con el celular o te pasen una fotografía que viene de alguna cámara tu puedes limpiar esos metadatos para quitar ese peso extra que en tu proyecto no lo vas a necesitar.

Antes, mi peso era de 3Mb, pero todo se soluciono hasta que decidi cambiar mi estilo de vida. Fui al GYM Platzi y ahora peso 70kb, excelente servicio.

Es increíble la calidad de los cursos de Platzi! De 4 cursos previos de HTML y CSS que he tomado, ninguno menciona todas estas peculiaridades tan profesionales como las razones detrás de cada meta, los pesos ideales de las imágenes, como optimizarlas y demás, solo te dicen que poner y como hacerlo, pero no un entendimiento real como en este caso. Muchas gracias, Platzi!

Página recomendada para compresión de imágenes

https://compressjpeg.com/

¿Qué permite?

• Comprime imágenes JPG, PNG, GIF y SVG
• Convierte formatos (ejemplo, pasa una png a jpg)
• Recortar imágenes
• Cambiar tamaño de imágenes
• Optmizar formato Lossy, Lossless y más.

Chicos también me gustaría añadir que puden optimizar las imagenes en photoshop a través de la opción GUARDAR PARA WEB, en el menu superior de Photoshop en la parte de “Exportar” encuentran la opción.

La herramienta permite ajustar la calidad, resolución, color, tamaño etc… Muy buena

🤣🤣🤣 Me encanta que Platzi no pierde una oportunidad para promocionar los cursos

Acá les dejo otra opción, también funciona muy bien con .png y .jpg 👉🏼 Compressor.io

Información completa donde podemos ver como optimizar las imágenes:
https://www.tuposicionamientoweb.net/optimizar-imagenes-web/

Tambien sirve GIMP

Al día de hoy existen nuevos formatos de imágenes que nos permiten tener mejores optimizaciones para aumentar el rendimiento de nuestros páginas webs, estos son:

• WebP (Soportado por todos los navegadores)
• AVIF (Todavía no soportado por todos los navegadores)

Herramientas para optimizar imágenes

Puedes optimizar tus imágenes a WebP con herramientas en línea como:

• SQuoosh
• Convertio
• Entre otras…

También puedes utilizar aplicaciones de escritorio:

• Photoshop
• ImageMagick
• Entre otras

Incluso lo puedes hacer a través de la terminal con estas herramientas

• ImageMagick
• webp-converter-cli

Espero les sirva este pequeño aporte.

Mi recomendación para trabajar imágenes en la web:

https://www.befunky.com/es/

Les permite editar y bajar bastante el peso de cualquier imagen. Muy útil y más sencillo que Photoshop, por ejemplo.

Excelente entender todos los conceptos de formatos y cargado de imagenes en nuestros desarrollos web, este curso es muy profesional.

✨ El promedio optimo del peso de las imágenes debe ser de 70 KB

Y si se convierte la imagen a formato .webp no es mejor?

Yo en Photoshop, acostumbro a exportarlos para WEB, antes de usar este truco, las imágenes para banners me pesaban 1.5 MB, pero ahora me pesan sólo 200 kb o así (no son los 70 kb, pero son banners que abarcan toda la primer pantalla de las páginas web, así que creo que no está muy manchado)

Genial

Web resizer, tambien redimensiona el tamaño de las imagenes.

Otra forma de optimizar los tiempos de carga está en poner loading=“lazy” a las etiquetas de imágenes o iframes que tengamos. Gracias a esta, las imágenes solo se descargarán cuando el usuario llegue a esa parte de la página y no se descargarán todas inmediatamente al entrar, mejorando considerablemente los tiempos de carga

Ahora si que, el tamaño si importa jaja

Un anuncio de platzi en el navegador de un profesor de platzi visto en una clase de un curso de platzi

Comparto también estos otros sites para comprimir tus imágenes JPG y PNG:

• Kraken
• Image Optim
• Image compressor

Hola! Yo uso esta página para comprimir imágenes y más herramientas: https://www.iloveimg.com/es

• OPTIMIZACION DE IMAGENES
  • tamaño promedio de una imagen = 70 KB yl rango promedio es de entre [70KB y 100KB]
  • Optimizando imagen
    • Tiny PNG
      • La pagina comprime y me la regresa en tamaño mas optimo
    • Verefix
      • retira metadatos (hora, fecha) ya que no las necesitamos porque son peso extra

Este es el promedio del peso de una imagen; para cuando se vaya a subir en la página web.

Jajaja esta clase estaba buenísima!!
Yo no sabia que habían paginas para optimizar imágenes. Y yo que le tomo pantallazos a la imagen de 10 M lo edito en Paint y si la imagen sigue muy pesada alejo el zoom tomo pantallazo y vuelvo a editar… Servirá como optimizado de Imagenes?

aqui otra herramienta fantastica de google
https://squoosh.app/

Existe una herramienta más reciente desarrollada por Google hecha específicamente para optimizar imagines para la web:
https://squoosh.app/

También si alguien esta viendo este curso en 2024 y aún no se ha actualizado el curso, recomiendo mucho considerar el formato .webp, permite tanto transparencia como animaciones con una compresión muy buena.

Tamaño máximo recomendado para una imágen:

70kb
.
Herramientas para optimizar imágenes:

Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera.

Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

Comparto una tabla de comparación por si alguie tiene dudas de las equivalencias

Pues yo para reducir tamaño de los jpg uso GIMP que con una barrita me permite ajustar lo mejor de calidad para el tamaño mas mínimo (y si GIMP no es el mas pro ni el mas facil de usar, lo sé) y definitivamente para los mejores PNG sin transparencia uso paint (sorry for MacOS and Linux users). PAINt reduce mucho mas que cualquier otro programa el tamaño de los archivos, no se como, ni porque, pero hace un gran trabajo!

• En promedio una imagen debe de pesar al rededor de de 70 KB.
  Opciones de trabajar las imagenes.

• Mejora el tamaño de tus imagenes.
  🧶Tiny PNG

• Retira metadatos de tus imagenes.
  🧶Verexif

Para la compresión de imagenes les recomiendo

https://www.iloveimg.com/es

tiene ademas otras opciones de edición

Clase 12. Optimización de imágenes
- No es optimo cargar una foto de 3MB
- ¿Cuál es el tamaño optimo?
- Promedio 70 KB
- ¿Cómo optimizo la imagen? (Comprimir)
1. Mejora el tamaño de tus imgs
- tinypng
|
2. Retira metadatos de tus imágenes (Fechas, Geolocalización)
- verexif

Medidas:
1 Kilobyte (KB) = 1.024 bytes
1 Megabyte (MB) = 1.024 KB
1 Gigabyte (GB) = 1.024 MB
1 Terabyte (TB) = 1.024 GB

Hay una web muy buena que se llama pixlr. además de comprimir muy bien las imágenes puedes editarla de muchas formas, y si no te queda tan liviana como quieres luego puedes pasarla por tiny PNG o ShortPixel

APUNTES:
Optimizar imágenes ayuda a que las imágenes de la página web carguen más rápido y así mejorar la experiencia del usuario.
El tamaño promedio es de 70 KB, pudiendo llegar a 100 KB (imágenes de 3 MB son excesivas).
.
Opciones para trabajar las imágenes:

.

1. Compresores:

   • Tiny PNG https://tinypng.com
   • Compressor . io https://compressor.io/
   • Optimizilla https://imagecompressor.com/es/
   • IloveIMG https://www.iloveimg.com/es
   • Kraken https://kraken.io/web-interface
   • Image compressor https://imagecompressor.com/es/
   • Picresize https://picresize.com/
   • Convertio . co https://convertio.co/es/jpg-svg/
     ´

2. Retirar metadatos (fechas, geolocalización, datos de la cámara etc.)_

   • Verexif https://www.verexif.com

.
Páginas para descargar imágenes libres de copyright (aporte de un compañero):

• Pexels https://www.pexels.com/es-es/
• Pixabay https://pixabay.com/
• Freerange https://www.freerangestock.com/
• Realistic Shots https://realisticshots.com/
• Pic Jumbo https://picjumbo.com/
• Magdeleine https://magdeleine.co/
• Creative Commons https://wordpress.org/openverse/?referrer=creativecommons.org
• FreeJPG https://www.freejpg.com.ar/banco-de-imagenes-gratis

el tamaño si importa
https://tinypng.com/

Por lo que he visto existen varias opciones igual nos tocara probar varias para ver la que mas guste pero de igual forma estas del curso están bien.

En resumen debemos siempre tratar de tener imágenes con la suficiente calidad para que se vean bien en nuestra página web pero que al mismo tiempo pesen poco para aumentar el rendimiento de nuestra página

No es óptimo cargar imágenes al proyecto web, por lo tanto, el tamaño promedio debe pesar alrededor de 70 KB. Para ello tenemos dos opciones: Tiny PNG (mejora el tamaño de las imágenes) y Verexif (retira metadatos de tus imágenes, por ejemplo, los datos que agrega el teléfono a las fotografías como fecha, hora y ubicación).

Chale, estoy bastante seguro de que mis primeros proyectos web en la Uni utilizaban imágenes que pesaban varios mbs y ahora viene el profe De Granda a decirme que el promedio debe ser de 70 kb xD

Esta informacion no la tenia en cuenta. Muchas gracias por la buena explicacion profe Diego

informacion relevante: cuando pasas por tiny png tambien matas los metadatos, tiny png ofrece la siguiente informacion de su proceso: disminuye la cantidad de colores en la imagen, lo que es supremamente inperceptible a simple vista por lo que pueden tener una imagen con la misma resolucion pero mucho menor peso (cuando reduces colores digamos que desapareces la info de tonos muy poco diferenciados, por ejemplo tienes blanco y desaparece que si el blanco casi identico pero minimamente casi sin diferencia movido al gris)

El tamaño promedio de las imágnees debe ser de 70KB

oh que chévere, lo agregare a mi lista de tareas favoritas

Estuve revisando los aportes de los compañeros y veo que no recomendaron iloveimg.

Les dejo el link

• iloveimg.

No solo sirve para comprimir imágenes, tiene herramientas como recortar imágenes, cambiar el tamaño, el peso, pasar de HTML a JPG o SVG y más! Recomendadisima.

También puedes convertir a webp la imagen para que pese mínimo 1 KB

Chicos, otra pagina para comprimir imagenes muy buena es https://squoosh.app/, esta herramienta es de google y te permite seleccionar hasta el formato de la imagen comprimida.

Opciones para trabajar las imágenes:
.Mejora el tamaño de tus imágenes
.Tiny PNG
.Retira metadatos de tus imágenes
.Verexit

Con Tinypng Analizer pueden analizar su sitio web.

excelente, he visto algunos cursos en yt donde te explican como colocar imagenes en html pero no la importancia del peso de las imagenes al subirlas a tu pagina web

Adobe photoshop y otras que trabajen con imágenes, tienen la función “Guardar para Web” que muestra una vista preliminar y cuanto pesaría nuestro archivo según el formato que le demos y el ratio de compresión que queramos asignar

Hola amigas y amigos. Una pregunta, me recomendaron no retirar los metadatos de imágenes de una plataforma e-commerce porque esto ayuda al posicionamiento en buscadores. ¿Alguien sabe si esto es verdad? Si el retirarlos afecta el SEO.

En esta clase aprendimos cuál es el tamaño estándar para una imagen en un sitio web, el cuál es entre 70 kb y 100 kb. Además el profe nos proporciona unas herramientas que nos son muy útiles para optimizar imágenes y lograr reducir el tamaño de estas para que puedan cargar mucho más rápido en nuestra página. Estas herramientas son:

• Tiny PNG: Ayuda a modificar el tamaño de imágenes a uno mucho más optimo.

• Verifix: Elimina los metadatos que puedan traer las imágenes (como fecha y ubicación) para reducir su tamaño.

los datos EXIF ayudan a Google a comprender las imágenes

Ojo con quitar los metadatos EXIF, en esta información indica que va en contra de la semántica y de lo que le gusta a Google para posicionar tu página.

en promedio una imagen no deberia pesar mas de 70 kb pregunta de examen
.
vengo del futuro #nuncaparesdeaprender

Tiny PNG => reduce el tamano de tus imagenes comprimiendolas!
Verexif => reduce el tamano de imagenes **Tomadas con camaras de telefonos **

El tamaño promedio debe ser 70KB
Para optimizar:
Tiny PNG → Mejora el tamaño de las imágenes
https://tinypng.com/
Verexif -> Retira metadatos de tus images
https://www.verexif.com/

Me parece muy interesante este vídeo sobre las posibilidades de reducir una imágen con TinyPNG.
Espero que os guste y os abra un mundo de posibilidades para reducir nuestras imágenes.
https://youtu.be/aZ86hlTp5Z8

No sabia lo del peso de las imagenes, de ahora en adelante aplicare esta recomendacion

que bueno asi esta bien

En mi vida laboral me tope con la necesidad de reducir el peso de las imágenes en grandes cantidades, al igual que renombrarlas en grupo y ponerles marca de agua, así que despues de buscar en internet encontré un programa portable gratuito que se llama FSResizer, me funcionó bastante bien se los dejo como dato curioso.

11. Mis apuntes sobre: “Optimización de imágenes”

El tamaño máximo promedio que debería tener una imagen es de 100Kb a 70KB.

Opciones para trabajar las imágenes:

Herramientas para optimizar imágenes:

• Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera.
• Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

HERRAMIENTA PARA COMPRIMIR IMAGENES
https://compressor.io/

Anotaciones:

Muy buena información

Notas
Los formatos de imágenes que no pierden calidad son imágenes o formatos muy pesados de 3 megas o mucho más.
No es óptimo cargar una imagen en nuestro proyecto web que pesa 3 megas (tardaría mucho tiempo en renderizar).

¿Cuál es el tamaño óptimo para subir una imagen?
En promedio una imagen debe de pesar alrededor de 70 kb.

Opciones para trabajar las imágenes

Mejorar el tamaño de tus imágenes:
Tiny PNG
Retirar metadatos de tus imágenes:
Verexif

¿Qué metadatos tienen las imágenes?
Hora, lugar otro tipo de información que el celular agrega.

Exite otro formato de imagenes especificamente para la web llamado WebP, fue desarrollado y presentado por Google.
.
Es una propuesta interesante porque soporta ambos algoritmos de compresión (Lossy y Lossless) además de que este tipo de imagenes suelen ser un 26% mas ligeras que PNG y entre un 25-34% mas ligeras que JPEG.

puedes leer acerca de este formato aquí.

En esta pate de optimización de imagenes uso varios metodos.
uso esta pagina iloveimg, otro es usar facebook para imagenes o videos ya que poseen un algoritmo de compresion bueno, creo un album y las subo, se procesan y los descargo bastante livianos, si todavia estan muy pesados (>100 KB) los paso por iloveimg o cualquier otra pagina que me permita comprimir mas.

muchas veces 70kb no es posible, si tenés un slider fullscreen es muy difícil que el jpg pese menos de 70! a veces es inevitable que pese menos de 150kb

Mi resumen:
Tamaño promedio de 70KB - No puede pasar 1MB
Tiny PNG : comprime el tamaño de las impagenes
Verefix: retira los metadatos de las imágenes, para reducir el tamaño

jpg = jpeg https://kinsta.com/es/blog/jpg-vs-jpeg/

![](

De los mejores cursos de platzi

Valioso aporte el portal tinyPNG

Yo uso https://compressor.io/

muchas gracias por su explicacion, excelente!

El optimizar las imágenes es mas fácil de lo que me imagine.

Lazy loading

 
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It’s a way to shorten the length of the critical rendering path, which translates into reduced page load times.
 
Lazy loading can occur on … => https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Mi tecnica para reducir el tamaño era pasarlas por whatsAPP y quedaban super livianas

a optimización de imágenes en HTML es un paso crucial para mejorar la velocidad de carga de tu sitio web y proporcionar una mejor experiencia al usuario. Las imágenes grandes y no optimizadas pueden ralentizar significativamente el tiempo de carga de una página. Aquí hay algunas prácticas recomendadas para optimizar imágenes en HTML:

1. Elige el Formato de Imagen Correcto:
   Utiliza JPEG para fotografías y otras imágenes con gradientes suaves.
   Usa PNG para imágenes con áreas transparentes, texto y gráficos con bordes nítidos.
   Emplea SVG para gráficos, logotipos e iconos simples.
   Considera WebP para una mejor compresión y calidad en comparación con JPEG y PNG (asegúrate de proporcionar un PNG o JPEG como alternativa para navegadores que no admitan WebP).
2. Comprime las Imágenes:
   Utiliza herramientas de compresión de imágenes en línea o software específico para reducir el tamaño del archivo de las imágenes sin comprometer demasiado la calidad. Herramientas como TinyPNG, ImageOptim o Photoshop son útiles para esto.
3. Ajusta las Dimensiones de la Imagen:
   Asegúrate de que las imágenes tengan las dimensiones adecuadas en píxeles antes de subirlas al sitio web. No cargues imágenes más grandes de lo que se mostrarán en la página.
4. Utiliza la Atribución srcset para Imágenes Responsivas:
   Para imágenes que deben ser responsivas, utiliza la atribución srcset para proporcionar diferentes versiones de la imagen para diferentes tamaños de pantalla y resoluciones de dispositivo. Esto ayuda a cargar la imagen adecuada según el dispositivo del usuario, mejorando la eficiencia y velocidad de carga.

<img srcset=“imagen-grande.jpg 1200w,
imagen-mediana.jpg 800w,
imagen-pequeña.jpg 400w"
sizes=”(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
src=“imagen-mediana.jpg” alt=“Descripción de la imagen”>