El uso de imágenes y fotos en los blogs y páginas web es cada vez más frecuente debido a que el contenido audiovisual genera un mayor engagement entre los usuarios que un simple texto.
Lo mismo ocurre en las redes sociales, que la misma publicación en formato texto, respecto a la misma acompañada de una imagen, tiene mayor alcance esta segunda.
Por este motivo, quiero explicarte en este artículo cómo tienes que reducir el tamaño de cada imagen para que tu site esté mejor optimizado en este aspecto. A continuación te explico las razones por las que es importarte reducir el peso de las imágenes, las herramientas gratuitas online que puedes utilizar para hacerlo y los beneficios que vas a obtener.
De entrada, quiero comentarte cómo influye el tamaño y el peso de las imágenes en la velocidad de carga de una web.
La velocidad de carga o WPO como factor SEO
La velocidad de carga de un sitio web, también denominado WPO (Web Performance Optimization) implica una serie de factores que tienen relevancia en el tiempo que tarda en cargar una página web. Por citar algunos, serían el javascript, que habría que cargarlo al final siempre que se pudiera, minimzar los CSS, utilizar recursos asíncronos, cachear el contenido y varios más.
Pero uno de esos factores que son relevantes en la velocidad de carga es la optimización de las imágenes, algo que todos podemos hacer de una forma muy sencilla sin necesidad de tener conocimientos avanzados en programación como sería el caso de los anteriores factores que he citado (los cuales yo no sé optimizar, también te lo digo).
Por eso, este artículo gira en torno a cómo tenemos que optimizar el tamaño y peso de las imágenes que subamos a una web o sobre todo a nuestro blog, que con todas las entradas que realizamos, el número de imágenes e infografías puede ser importante, y sin duda alguna, nos están comiendo una gran cantidad de recursos y ralentizando nuestra web.
El tamaño de las imágenes como factor clave en el WPO
El tamaño de las imágenes afecta directamente al page speed o velocidad de carga de cualquier web o blog.
Ya no sólo es un factor que afecta al SEO, sino que afecta directamente a la experiencia de usuario, el cual no está dispuesto a quedarse esperando ante una web lenta. Los usuarios cada vez queremos páginas que carguen más rápidas y que no se demore el contenido que están buscando.
Por otro lado, el incluir un gran cantidad de imágenes que no están correctamente optimizadas, hace que se consuman muchos más recursos de nuestro servidor, a la vez que ocupan más espacio en el hosting, llegando incluso a quedarnos sin espacio y necesitando contratar más almacenamiento.
Por tanto, aunque el WPO es un factor clave en el posicionamiento web, piensa primero en la experiencia de usuario, y después ya vamos ajustando otros factores para maximizar el posicionamiento de cara a Google.
Los formatos de imágenes más comunes
Una vez que ya sabes cuál es la importancia que tiene el comprimir fotos de cara al “User Experience” y de cara al SEO, voy a indicarte cuáles son los formatos de imágenes más comunes y utilizados en las páginas webs y blogs:
1.- JPG: Es el formato más utilizado en imágenes (exceptuando las vectoriales)
2.- PNG: Se utiliza para crear imágenes e infografías vectoriales
3.- GIF: Un gif es un formato de imagen que une uno o varios fotogramas creando movimiento y con una duración de unos 3 segundos de media que se repite constantemente.
4.- SVG: Este formato es el menos empleado de todos, aunque su uso está aumentando
Seguramente, vas a trabajar con imágenes que tienen una extensión .JPG o .PNG, por lo que las herramientas que te muestro a continuación te van a ser de gran ayuda para reducir el tamaño de las mismas.
Cómo comprimir fotos sin perder calidad
Bien, en este apartado te voy a explicar cómo tienes que comprimir fotos sin perder calidad para reducir su tamaño y mejorar la velocidad.
Para ello, he seleccionado 3 herramientas que son las que a mí más me gustan para comprimir imágenes. Hay muchas más, pero en el día a día la verdad es que no las utilizamos todas, sino que vamos a aquellas que son más prácticas o funcionan mejor.
3 herramientas gratuitas para comprimir imágenes sin perder calidad
Esta es mi selección:
- TinyPNG
- Web Resizer
- CompressJPEG
TinyPNG
La herramienta que yo utilizo siempre para comprimir fotos sin perder calidad en las mismas es TinyPNG. Es la que más me gusta y la que mejor resultado me ofrece, tanto a nivel de calidad y nitidez de las propias imágenes tratadas como a la hora de mejorar la velocidad de carga del site.
TinyPNG utiliza una técnica de comprensión inteligente que hace que disminuya de forma selectiva el número de colores empleado en cada imagen, requiriendo de esta forma muchos menos bytes por foto, pero sin perder calidad ya que a nivel visual, el cambio generalmente es invisible.
Generalmente el tamaño de una imagen es excesivamente elevado para cualquier sitio web, repercutiendo negativamente en varios aspectos que ya he citado en apartados anteriores, por lo que casi siempre vamos a necesitar de una herramienta como esta.
Cómo utilizar TinyPNG
Muy fácil. Tienes dos opciones para subir a la herramienta tus fotos.
O bien clickas sobre esta imagen, o bien arrastras las fotos que quieras hacia aquí también.
(Esta misma imagen que era una captura de pantalla y cortada con una herramienta, ha pasado de pesar 218.8 Kb a 85.5 Kb, un 61% menos al pasarla por TinyPNG)
Esta herramienta permite subir de golpe hasta 20 imágenes con un tamaño máximo de 5 Mb por cada una.
Una vez que se ha reducido el tamaño de las fotos de forma automática, TinyPNG nos permite descargar todas las imágenes ya optimizadas en una sola vez o hacerlo de una en una, pudiendo guardarlas en nuestra carpeta en Dropbox o en nuestro PC.
Además, tiene un plugin propio para utilizar en la plataforma WordPress (WordPress.org), con versión gratuita para optimizar directamente unas 100 imágenes al mes aproximadamente.
Como conclusión hacia esta herramienta voy a citar en forma de lista sus ventajas y sus desventajas para que quede totalmente claro:
Ventajas de TinyPNG
- Herramienta Online y gratuita
- Optimización de hasta 20 imágenes a la vez
- Calidad de las imágenes tras la compresión muy buena
- Conserva las transparencias una vez realizada la compresión.
Desventajas de TinyPNG
- Tamaño máximo de cada imagen de 5 Mb
- No tiene una pre visualización de cómo queda la imagen optimizada, por lo que hasta que no la descarguemos, no podemos saber si el resultado nos interesa o no.
- No permite realizar ningún tipo de ajuste en el nivel de la compresión.
Web Resizer
La segunda herramienta que te quiero mostrar para reducir el tamaño de las imágenes es Web Resizer.
Al igual que la herramienta anterior, Web Resizer también es una herramienta de optimización de imágenes gratuita y online que permite reducir el peso de las imágenes.
Una vez de las ventajas es que permite optimizar imágenes de hasta 10 Mb, pero también nos ofrece otras funcionalidades como rotar las fotos, cortarlas, ajustar el nivel de conversión de color y de optimización.
CompressJPEG
Por último, te quiero hablar de CompressJPEG, otra herramienta online y gratuita para reducir el tamaño de las imágenes.
Las ventajas de esta herramienta es que permite subir hasta un máximo de 20 imágenes en formato .jpg, .jpeg y .png, de una forma muy sencilla, o arrastrándolas hacia el centro de la caja o clickando en el botón de Subir y obteniendo una calidad bastante buena.
También permite ver una pre visualización de cómo queda la imagen optimizada y compararla con la imagen original y según nos interese, ajustar la calidad de la optimización mediante la barra lateral derecha, modificando los parámetros de compresión.
Como ejemplo, esta imagen se ha optimizado en un 84%, pasando de tener un tamaño de 71 Kb a tan solo 11.5 Kb.
Como conclusión final, ya hemos visto la importancia que tiene el optimizar y reducir el tamaño de cada imagen que subamos a nuestro blog o página web con el fin de mejorar la velocidad de carga del sitio y no ocupar todo el tamaño del disco.
Aquí te he hablado de tres herramientas online gratuitas que sirven para esto, así que ponte manos a la obra y si todavía no optimizabas tus fotos, ya puedes ponerte a hacerlo.
INFOGRAFIA sobre las Herramientas para comprimir imágenes