Hola a tod@s, soy Carlos de Estudio Supermundano. Sé que venís a H!C buscando creatividad, pero nunca está de más acompañar a la creatividad con un poco de tecnología 😉 En H!C voy a ser vuestro apoyo tecnológico, donde os daré consejos, trucos y herramientas para sacar el máximo partido a vuestras creaciones. Empiezo mi andadura en H!C con un post sobre optimización de imágenes. Escueto pero muy útil!
Seguro que muchas veces, tanto viendo blogs de otras personas como vuestro propio blog, os dais cuenta que la página carga lenta. Esto puede deberse a muchos factores:
- velocidad de vuestro hosting
- tamaño de la página
- cacheo
- ordenación de archivos de script
- localización del servidor
Algunas de estas cosas os sonarán a chino, pero lo que seguro que no os suena a chino es el tamaño de las imágenes. Esas fotos espectaculares que ponemos en nuestros blogs no deben ponerse tal cual salen de nuestra cámara o nuestro móvil, que parece que lleven una mochila de megabytes, sino que deben de modificarse a un tamaño adecuado a nuestra página web. Pero en esta ocasión no vamos a explicaros cómo modificar el tamaño de las imágenes, ya que hay miles de herramientas online por internet para hacer esto (http://lmgtfy.com/?q=change+image+size), y si no os gustan siempre podréis hacerlo con una herramienta de escritorio como Photoshop.
Lo que os vamos a explicar hoy es como optimizar esas imágenes, para que, una vez las tengáis al tamaño adecuado, podáis comprimirlas aún más y que pesen menos para que, a la hora de visitar vuestra página o blog, se descarguen mucho más rápido. ¿Cómo hacer esto? Pues tenemos la opción online y la opción herramienta de escritorio.
En el caso de la opción online os voy a presentar la herramienta que utilizamos en Supermundano cuando tenemos una urgencia: compressor.io
Compressor es una sencilla herramienta online que comprime y optimiza nuestras imágenes.
Simplemente tenéis que darle al botón TRY IT ! para comenzar.
Una vez habéis presionado el botón debéis elegir el tipo de compresión y subir un archivo para comenzar la compresión. Yo voy a subir una imagen que me he descargado de la librería unsplash. Originalmente la foto pesa unos 300KB, ya que la he cambiado el tamaño para el tamaño adecuado del blog de H!C. Vamos a ver que tal comprime la foto.
Y voilà!
Hemos conseguido bajar el tamaño de la imagen un 53%. Ahora ya podemos subirla a nuestro blog sabiendo que nadie se va a descargar más megas de los necesarios. Ganamos todos, el usuario de tu web, porque ve tu página más rápida y tu por ahorrar tráfico y espacio en disco 😀
Tip
Compressor.io permite utilizar ficheros PNG, JPEG, GIF, SVG de hasta 10MB y dos tipos de compresión lossless (sin perder calidad) o lossy (perdiendo un poco de calidad).
El tamaño del archivo resultante en el caso de utilizar la compresión lossless será mayor pero la calidad será superior al resultado obtenido con lossy.
En el caso de la herramienta de escritorio podemos utilizar ImageOptim para OSX o Riot para Windows o ImageMagick para distribuciones Linux.
Como aquí en Supermundano somos usuarios de OSX os voy a explicar las bondades de ImageOptim, pero tanto Riot como ImageMagik os servirán igualmente si queréis probar la versión de escritorio.
ImageOptim es incluso más sencilla que Compressor.io, ya que simplemente hay que arrastrar la imagen que queremos optimizar a la ventana principal de la aplicación. Al instante os saldrá el porcentaje de compresión de la imagen y guardará la imagen optimizada sobreescribiendo la original.
Espero que os sirva de mucha utilidad y que podáis ahorrar tiempo de espera a los usuarios de vuestros blog utilizando alguna de estas herramientas para optimizar imágenes!!
¡Que tengáis un buen día!
¡Genial! Sabía que era necesario reducir el tamaño de las imágenes y siempre opto por PS pero con esto puedo hacer que tengan aún menos KB. ¡Muchas gracias!
Genial, me lo apunto todo porque es uno de los temas a mejorar tras realizar la auditoría del curso Hello Blogging Pro. ¡Muchísimas gracias por tus consejos y herramientas!