Optimización de imágenes

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.

David Aguilera

Compañeros les comparto las paginas que yo uso en mis proyectos.
Compressor.io Comprime sin perder calidad (mejor todavia Tinypng)
Picresize Comprime y recorta el tamaño de la imagen
Convertio convierte jpg, png a svg (esta pagina es muy buena puede convertir de todo a otros formatos es gratis, chequenla y comenten que les parecio )

Saludos ✌🏻

Albert K. Camargo Barreda

Pexels
Pixabay
Freerange
Realistic Shots
PicJumbo
Magdeleine
Creativecommons
Freejpg

Y de donde descargar imágenes ??? Pues te traigo un pack de páginas donde puedes descargar imágenes libre de copyright, en algunas puedes elegir el tamaño de la imagen 😉 🚀🚀🚀🚀🚀

Compresores de imágenes:

Optimizilla
IloveIMG

4564878

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.

jorge llanque

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.

alexdicant

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

Anfernee Valera

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

Jesús Molina Castro

Juan Esteban Galvis

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

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

Tomás Felipe Beltrán Pulido

https://www.remove.bg/

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

Saul Maldonado Ortiz

Platzi dentro de platzi

Osvaldo Leonel Galvan Ramos

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

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

Isaac Borbon Miquirray

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

Sara Salgado Casas

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í

Jose Luis Grande Acevedo

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.

Carlos Leon

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.

Francisco Javier Ali Cruz Aguila

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!

Jesús Gireaud

https://compressjpeg.com/

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

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

Gabriel Tomás Mundaray Guédez

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

Richardson Alejandro Lainez Carcamo

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

Iván Arcos

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

David Angarita

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

kikega

Tambien sirve GIMP

Ricardo Cuauro

hace 4 meses

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

Espero les sirva este pequeño aporte.

Daniel Torrealba Febres Cordero

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

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

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

Julian David Orozco Colorado

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

user_deleted_1572741

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

Cristhian Daza

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

Francisco Xavier Nuñez Garcia

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)

Captura de Pantalla 2022-03-15 a la(s) 21.53.45.png

Leonardo Gutierrez

Genial

Patrick Jeremy Rodriguez Sandoval

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

Ronald Arana

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

Uriel Solis Salinas

Ahora si que, el tamaño si importa jaja

Cristian Camilo Cortes Ortiz

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

Pedro Isaac Aguilar

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

Kraken
Image Optim
Image compressor

Javier Jiménez García

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

Fernandez Bianca

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

Abraham Castillo Valera

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

Jonathan Parra

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?

Pablo Perez

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

Juan David Santamaria Gomez

hace 4 meses

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.

Daniel Martínez

hace 8 meses

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

Pachas Jenifer

Andres Salazar

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!

Leidy Vaneza Vicente Ccorimanya

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

FranciscoJesus

https://www.iloveimg.com/es

Para la compresión de imagenes les recomiendo

tiene ademas otras opciones de edición

Luis Kennedy Saavedra Fuentes

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

mundial andrs

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

Carlos Perez

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

Itallo Benedetti

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:

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

juan david Ospina

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

Yorman Eduardo Amaro Carrero

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.

Camilo Andres Mora Arias

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

Daniel David Mármol Rivero

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

alexruizlul

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

Alexander Herrera

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

Yehender Alexander Carrasco Marquez

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

Joseph Ciriaco

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

Juan López

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.

Ikal

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

Ramses Garate

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.

Enso César Llanos Sánchez

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

Jossie Steeven Quintero Giron

Con Tinypng Analizer pueden analizar su sitio web.

user_deleted_2244058

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

David Lara Troncoso

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

vicuna

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.

Juan Sebastián Martínez Medina

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.

rubengjz

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.

Alex Leonardo Rodriguez Carvajal

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

Fernando Galdós

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/

Tomas Guijarro

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

Elvis Rafael Perez Gutierrez

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

Jose Barboza

que bueno asi esta bien

Camilo Arias Céspedes

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.

Aldo Miguel Ortiz Parodi

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.

Abigail Perez

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

Anthony González (@ThonnyGeek)

Anotaciones:

RENE GUIO

Muy buena información

jorge llanque

Sebastian Vizcarra

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.

Josue Granados

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

WILLIAM FERNEY CHAPARRO CHAPARRO

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.

Sebastian Alejo Becerra

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

Danna Valentina Hernández Pinilla

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

Juan Guillermo Poblete Bazaes

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

Rafael Amed Valenzuela Gonzalez

![](

Laura Moya

De los mejores cursos de platzi

Jose Palencia

Valioso aporte el portal tinyPNG

Reinaldo Omar Mendoza Leal

Yo uso https://compressor.io/

yanina paola lacerra