El exceso de tamaño y peso de las imágenes o fotos online que contenga una página web, es uno de los principales causantes de que la misma tarde mucho tiempo en cargar.
Y por si no lo sabías, el tiempo de carga es uno de los tantos factores que tiene en cuenta Google al posicionar tu web.
Además, esta mala velocidad de carga, por el gran tamaño de tus fotos online, también perjudica mucho la experiencia del usuario.
Beneficios de comprimir y reducir el tamaño de las imágenes
Reducir o comprimir el tamaño de las fotos es, a veces, una de las acciones a las que no damos mucha importancia a la hora de preparar nuestros artículos en el blog… pero que puede aportarnos muchos beneficios.
“Optimizar el peso de las imágenes mejora los tiempos de carga de nuestra web o blog y ayuda para mejorar su posicionamiento”
El mayor y principal beneficio que conseguimos al comprimir el tamaño de una fotografía es que aumentamos la velocidad de carga de nuestra web.
Piensa que si tenemos muchas imágenes en nuestro artículo, cada una de ellas supone sumar unos milisegundos a los tiempos de carga.
Es entonces que si no tenemos reducido el peso de nuestras fotos online y cuidamos el tamaño de las imágenes, estos tiempos de carga se pueden disparar.
Tener un blog con unos tiempos de carga bajos, mejora la experiencia del usuario y nos ayuda a reducir el porcentaje de rebote de la página.
Cuanto más tarda en cargar una página, más posibilidades tienes de que el lector cierre tu web y se vaya en busca de otra.
Pero no solo es por el usuario final. Google también se fija en los tiempos de carga de tu blog.
Y, como te explicaba anteriormente, es un factor que tiene en cuenta para posicionar una web por encima de otra.
Si no me crees, entra en el Google Analytics y verás cómo controla lo que tarda tu web en cargar.
En el menú lateral en el apartado de comportamiento verás cómo analiza la velocidad del sitio.
Si todavía no te he convencido, haz un test de velocidad a tu web. Yo te recomiendo usar la herramienta PageSpeed Insights de Google.
Una de las recomendaciones que dan todos los test de velocidad es la optimización de las imágenes reduciendo su tamaño.
El otro beneficio que obtenemos al reducir el peso de las fotos online es que también reducimos el consumo de transferencia de datos.
El cual nos puede condicionar el correcto funcionamiento de nuestro hosting.
Al final del artículo te mostraré una lista de herramientas o editores de fotos online gratuitos para que puedas reducir el peso de tus fotografías antes de subirlas a la web.
Pero antes me gustaría darte unos consejos a la hora se usar las imágenes.
Como diseñador grafico que soy, me gustaría darte un consejo:
Usar una imagen en un artículo, no es simplemente poner la primera foto online que tienes y ya está.
Esta imagen tiene que acompañar armónicamente al texto y debe tener un por qué en el artículo.
Y sobre todo, ¡no tiene que distraer al lector!
¿Cómo usar y optimizar una imagen para tu web?
1.- Tamaño de la imagen
Por tamaño de la imagen me refiero a las dimensiones en pixeles de la fotografía.
Si para el artículo necesitas una imagen de 300x300 px, no uses una fotografía de mayor tamaño para luego reducir su tamaño en el mismo artículo.
Mejor súbela a la web ya optimizada en ese tamaño ideal.
Porque, más píxeles nos dan por resultado archivos más pesados y eso es lo que queremos evitar.
Una recomendación que te hago es, que si en el mismo artículo usas muchas imágenes, intenta en la medida de lo posible que todas tengan un tamaño parecido.
Eso ayuda a dar coherencia y equilibrio a toda la estructura del post y lo hace más agradable visualmente.
2.- Formato de la imagen
Seguro que alguna vez te has preguntado qué son los formatos de imagen.
Hay muchos formatos bajo los que guardar nuestras fotos.
Y muchos de estos ya llevan una compresión de tamaño en su algoritmo.
Aunque yo sólo me centraría en dos a la hora de preparar nuestras imágenes: jpeg y png.
Cómo usar cada formato de compresión de imágenes es muy sencillo.
Guardaremos las fotografías complejas, con muchos colores y degradados, con la extensión jpg.
Ya que su algoritmo da unos resultados de compresión de imágenes mejores.
Para imágenes planas o con transparencias, como dibujos vectoriales, logotipos o fotografías con zonas de colores planos amplias, la extensión png.
Antes este tipo de imágenes se guardaban con extensión gif, pero ha ido perdiendo terreno a favor de la extensión png.
3.- Nombre del archivo
Sí, el nombre también es importante.
Ayuda a posicionarte en el buscador de imágenes de Google.
No es lo mismo tener una foto con el nombre ciudad-1354.jpg que barcelona-noche.jpg.
Ya sólo con ver el nombre, una te está contando más que la otra.
4.- Atributo alt de las imágenes
Una vez que has subido tu imagen al blog, acuérdate siempre de rellenar el atributo alt.
Es simplemente un título alternativo que nos sirve por un lado para ayudarnos en el posicionamiento web, y por otro si una imagen no se ha podido cargar nos mostrará ese texto.
Llegados a este punto, ya tenemos nuestra imagen bien optimizada y preparada para subir.
Seguro que ahora te estarás preguntando:
Pero, ¿cómo comprimir una imagen sin perder calidad?
7 Editores de fotos online gratuitos para optimizar el peso, reducir de tamaño o comprimir fotografías sin perder calidad
1.- Smush.it
Si no te quieres complicar, es la opción más sencilla si usas WordPress.
Es un plugin que se instala en el gestor de contenidos, y actúa automáticamente cada vez que subes una imagen reduciendo su tamaño.
Te permite:
- Optimizar las imágenes sin perder calidad.
- Trabajar con archivos jpg, png y gif.
- Si no quieres que actúe automáticamente, puedes decirle tú que imágenes comprimir.
- Al final muestra la tasa de compresión conseguida al reducir el tamaño de la fotografía.
2.- Compressor.io
Este programa para achicar fotos, te permite reducir el tamaño de las imágenes hasta un 90% de su peso original.
Es muy sencillo de utilizar, y te permite subir hasta fotografías de 10 Mb y elegir el tipo de compresión.
Puedes reducir el tamaño de la foto sin pérdida de calidad de imagen (menor compresión) o con perdida (mayor compresión).
Yo siempre recomiendo empezar con la de mayor compresión, y si ves que los resultados no son óptimos, pases a la reducción sin pérdida de calidad.
3.- Tiny PNG
Es un programa para reducir tamaño de las imágenes online que te permite subir hasta 20 imágenes a la vez con un máximo de 5 Mb cada una.
Es una buena opción si manejas una galería de imágenes grande.
Puedes elegir como usar este compresor de imágenes dependiendo de tu forma de trabajo, desde su propia web (gratis), descargándote el plugin para Photoshop (de pago) o bajándote el plugin para WordPress o magento y disfrutar de él desde tu gestor de contenidos y disminuir el tamaño de una foto.
4.- Web Resizer
Lo bueno que tiene esta herramienta online para optimizar las imágenes que usamos en nuestras webs o emails, es que además te permite realizar otra serie de operaciones como:
- Cambiar el tamaño de una foto online.
- Recortar fotos.
- Reducir las dimensiones de la fotografía.
- Rotar.
- Ajustar valores como el contraste y el brillo.
- Convertir imagines a Blanco y negro.
5.- Image Optimizer
Lo que destaca de este compresor de imágenes es la rapidez y sencillez de su funcionamiento.
Sólo tienes que subir la foto, indicarle el tamaño final de la imagen y el hace el resto.
No te tienes que preocupar de nada más para reducir o comprimir el tamaño de las imágenes que usas en tu web sin perder calidad.
6.- Optimizilla
Es una herramienta para comprimir el tamaño de las imágenes muy sencilla.
Sólo tienes que subir las fotos que quieres comprimir, hasta un máximo de 20 a la vez.
Y en unas miniaturas te muestra el porcentaje de reducción del tamaño del archivo que ha conseguido.
También te deja ajustar manualmente la compresión a realizar en la imagen ajustando el número de colores.
7.- Kraken.io
Con la versión gratuita de esta aplicación puedes reducir el tamaño de una foto de hasta 16 Mb.
Con la versión de PRO puedes modificar el tamaño de la imagen.
Conclusión
¿Has visto lo sencillo que es reducir el peso de las fotos que usas en tu web?
Ya sabes, si quieres mejorar los tiempos de carga de tu página web reduce el tamaño de las fotos online.
Comprimiendo el peso de las imágenes consigues mejorar el rendimiento y la velocidad de tu blog y, como te expliqué al principio del artículo, eso nos ayuda a posicionar mejor nuestras webs en los buscadores.
Ahora te toca a ti buscar la imagen que hará destacar tu artículo.
Sólo un último consejo, acuérdate siempre de comprobar las licencias de las imágenes que usas en tus artículos.
Aunque uses imágenes con licencias Creative Commons,cita siempre la fuente.
Comprimir el tamaño y reducir fotos hasta su correcto tamaño, es una práctica que debemos realizar cada vez que subamos una fotografía a la web.
Con el listado de editores de fotos online gratuitos (o herramientas para comprimir fotografías en internet) que tienes en este post, no te costará ni dos minutos dejar el tamaño perfecto para cada imagen que subas a tu web sin perder calidad.