¿Por qué es importante optimizar imágenes para la web?
Optimizar imágenes es crucial para cualquier proyecto web que se precie. Imagina que una imagen de tu sitio pesa tanto que ralentiza la carga de la página, provocando una mala experiencia al usuario. Esto es lo que ocurre cuando se usan imágenes pesadas sin procesar. Además, las imágenes pesadas ocupan más espacio de almacenamiento y pueden afectar negativamente tu posicionamiento en motores de búsqueda. Entonces, ¿cómo podemos optimizar las imágenes sin sacrificar calidad? ¡Aquí te lo explicamos!
¿Cuál es el tamaño óptimo para una imagen web?
El tamaño recomendado para una imagen en un sitio web no debería superar los 70 kilobytes (KB). Sin embargo, muchas veces encontramos imágenes que pesan varios megabytes (MB), lo cual es excesivo. Un peso tan elevado no solo afecta el tiempo de carga sino también el rendimiento general de tu página web.
Peso óptimo: Alrededor de 70 KB
Límite máximo: Nunca más de 1 MB
¿Cómo optimizar imágenes eficientemente?
Existen varias herramientas y métodos para optimizar imágenes de manera eficaz. A continuación, te describimos dos opciones que te serán de utilidad para comprimir y optimizar imágenes sin perder demasiada calidad:
1. TinyPNG
TinyPNG es una solución web eficiente que permite comprimir imágenes de formatos PNG y JPG. Aunque su nombre lo asocia principalmente al formato PNG, es especialmente eficaz para fotos en formato JPG, ya que reduce significativamente el tamaño sin comprometer la calidad visual.
1. Ve a [TinyPNG](https://tinypng.com).
2. Sube la imagen que deseas optimizar.
3. Descarga la versión comprimida que el sitio genera.
TinyPNG se encarga automáticamente de reducir el tamaño del archivo, proporcionándote un archivo comprimido adecuado para usar en tu proyecto.
2. Verifix
Verifix se especializa en eliminar metadatos de las fotografías. Cuando tomas fotos con una cámara o un teléfono, estas a menudo almacenan metadatos como la hora en que se tomó, la ubicación, entre otros. Aunque útiles en ciertos contextos, estos datos pueden añadir peso innecesario a tus archivos.
Pasos para usar Verifix:
Sube la imagen: Especialmente útil para imágenes tomadas con cámaras digitales o móviles.
Limpia los metadatos: Quita información como la geolocalización y la fecha.
Descarga la imagen: Ahora está más liviana y lista para web.
La eliminación de metadatos innecesarios va a ayudar a recortar esas valiosas decenas de KB, haciendo tu sitio web más ligero y rápido.
¿Cómo afecta el peso de las imágenes al rendimiento web?
Imágenes pesadas son la razón por la que algunas páginas tardan en cargar, lo cual puede ser frustrante para los usuarios. Además del tiempo de carga, las imágenes de mayor tamaño pueden afectar:
Aranado en buscadores: Las velocidades de carga más lentas pueden afectar tu SEO negativamente.
Excesivo uso de datos: Esto es problemático particularmente para usuarios móviles.
Menor retención de usuarios: Los visitantes tienden a abandonar páginas lentas rápidamente.
Consejos finales para la optimización de imágenes
Revisa antes de subir: Siempre verifica el tamaño de tus imágenes antes de añadirlas a tu web.
Usa herramientas online: Utiliza compresores de imágenes como TinyPNG o elimina metadatos con Verifix.
Define medidas específicas: Asegúrate de que la resolución se ajuste a tus necesidades, ni más ni menos, para no cargar archivos innecesariamente grandes.
Al prestar atención al peso de tus imágenes y optimizarlas adecuadamente, no solo mejorarás la experiencia del usuario, sino que también potenciarás el rendimiento general de tu sitio web. ¡Sigue aprendiendo y aplicando estos conocimientos para un proyecto web más eficiente y rápido!
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.
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
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.
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.
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 👉🏼