Optimización de Imágenes para Web
Contenido del curso
Luis >
Sebastian Alejo Becerra
Pedro Sierra
jorge llanque
sebastian gomez
Andres Condezo Monge
Alex Diaz Cantor
Maria Jose Muñoz Ruiz
Jean León
Anfernee Valera
Laidon Manolo Ayala Dominguez
Javier Paulo Perdomo Tamani
Jesús Molina Castro
emanuel
Eduard Godi
Juan Esteban Galvis
Leonardo de los angeles Espinoza Hernandez
Omar García Betanzos
Tomás Felipe Beltrán Pulido
John Perez
Tomás Felipe Beltrán Pulido
Saul Maldonado Ortiz
Martin Exequiel Gomez Colantti
Leonidas Silva Falcon
Osvaldo Leonel Galvan Ramos
Ender Velasco
Isaac Borbon Miquirray
Efraín Hernández García
Isaac Borbon Miquirray
Sara Salgado Casas
David Antonio Torres Castañeda
Carlos Andres Bohorquez Duran
Jose Luis Grande Acevedo
Carlos Leon
Jossie Steeven Quintero Giron
Francisco Jesús Eslava Fernández
Joel Dominguez Merino
Sebastian Baez Ramos
Daniel Simon
Francisco Javier Ali Cruz Aguila
Anel Silva
Oscar Barajas Tavares
Team Platzi
Randy Ponte
Jesús Gireaud
Gabriel Mundaray
Guillermo Díaz
Richardson Alejandro Lainez Carcamo
Iván Arcos
Adonys Santos
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:
que bien! no tenia idea que existía ese atributo
Excelente dato! Igual tener en cuenta que safari no lo soporta.
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.
puede que nos quite un poco mas de tiempo , pero resulta ser mucho mejor que las herramientas web
Gracias por el consejo.
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
Esta es muy buena, graciass
Es la que uso mucho, ademas me genera imágenes en formato WebP
Existen muchas opciones para optimizar las imágenes, pero Tiny PNG Tiene un panda, eso ya son puntos extras
hahahaha
Genial!😄👏
Buen aporte!
Gracias por el aporte!
Recomiendo el curso de optimización de carga de sitios Web de Leonidas Esteban, donde también vemos esto de comprimir imágenes
Siento que el curso de Jonathan Alvarez está más completo https://platzi.com/clases/web-performance/ incluye explicaciones más amplias y técnicas más avanzadas :D
No sabíaque existíanesos cursos 😮
Este sitio le quita el fondo a imágenes, para que queden con transparencia
Que buen aporte, no tengo ni idea porque no hay mas likes.
Me alegra que te haya gustado :)
Platzi dentro de platzi
Jajajajaj que bueno
JAJAJA XD
También pueden hacer uso de https://squoosh.app
Esta es la aplicación oficial de Google para optimizar imágenes
Gracias, la probaré!!
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
Muy buen dato. Ese formato tiene compatibilidad con todos los navegadores?
Muy buena pregunta Efrain; la mayorita de los navegadores lo soporta pero no lo soporta Safari lo cual hay que considerar por su cuota de mercado. Se puede mostrar formatos como JPEG en navegadores que no lo soportan y usar WebP en lo que son soportados. https://developers.google.com/speed/webp/faq
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í
Está geniaal!! Muchas gracias.
Excelente compilacion, muchas gracias
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.
XD
jajajajaja ¡eso es todo!
Me surgió una duda dudosa con respecto a los metadatos que puede guardar una imagen tomada con el celular. ¿Es posible que te puedan ubicar por la localización que registre la foto? Se que es una pregunta fuera del tema pero me intrigo, no sabia eso...
Sí, compañero. Es posible. Los metadatos de una imagen pueden alojar información muy delicada si de seguridad de la información nos referimos.
Para se más precisos hay 3 categorías principales de datos:
Descriptivo : información sobre el contenido visual. Esto puede incluir título, subtítulo, palabras clave. Otras personas, ubicaciones, empresas, obras de arte o productos que se muestran en la imagen. Esto se puede hacer usando texto libre o códigos de un vocabulario controlado u otros identificadores.
Derechos : identificación del creador, información de derechos de autor, créditos y derechos subyacentes en el contenido visual, incluidos los derechos de modelo y propiedad. Términos de uso de derechos adicionales y otros datos para licenciar el uso de la imagen.
Administrativo : fecha y ubicación de creación, instrucciones para los usuarios, identificadores de trabajo y otros detalles.
Es importante que los metadatos almacenados en un archivo de imagen permanezcan con la imagen. Los metadatos son esenciales para la identificación y la protección de los derechos de autor. Los metadatos también son clave para suavizar el flujo de trabajo, encontrar imágenes digitales fácilmente mediante la búsqueda, en línea o fuera de línea, y rastrear el uso de imágenes.
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!
Para reducir el tamaño de las imagenes, ¿existen opciones de herramientas diferentes a paginas web?
Sí, puedes hacerlo con Webpack :D en el curso de Webpack lo revisamos a detalle.
Si tienes el paquete de Adobe Creative Cloud, puedes usar varios de sus herramientas para optimizar imágenes de manera automática en un directorio local a través de scripts.
Página recomendada para compresión de imágenes
¿Qué permite?
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
Muy cierto. Yo primero las optimizo en Photoshop guardándolas para web y posteriormente utilizo una herramienta online para mejorar aún más el peso sin perder mucha calidad.
🤣🤣🤣 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 👉🏼
Muchas gracias!
