Lo habrás leído muchas veces, es necesario optimizar el tamaño de las imágenes que subimos a  nuestros blogs. De hecho debería ser una de las cosas que más cuides cuando elabores tus artículos. Uno porque nos da imagen y dos porque aligeramos la carga de la página.

Con este artículo quiero completar la trilogía de posts sobre imágenes. Empecé con un artículo sobre las licencias creative commons y cómo usarlas en nuestras imágenes, y más tarde os enseñe 15 webs donde descargar imágenes gratis para ilustrar vuestros trabajos.

Por qué tenemos que reducir el tamaño de las imágenes

1. Posicionamiento web. Está claro que una carga de página lenta puede espantar a nuestros lectores. Por lo que reduciendo el tamaño de las imágenes, conseguimos una mejora en la velocidad de carga. Google lo sabe, y ha pasado a ser uno de los factores SEO a tener en cuenta para posicionar nuestras páginas.
2. Usabilidad web. Disminuir el tamaño de las imágenes sin que vaya en perjuicio de la calidad de la misma hace que la usabilidad mejore y la experiencia del usuario sea buena. Mejorando las tasas de rebote y de retorno del lector.

No te he descubierto nada nuevo, es de cajón. Además, piensa que en la época actual, cada vez hay más usuarios que se conectan a internet mediante sus dispositivos móviles. Si lo hacen con una red wifi no hay problema. Pero y ¿cuándo nuestros aparatejos tiran del 3G? Reduciendo el tamaño de las fotos conseguimos tiempos de carga mucho mejores.

Aunque no entra directamente en el apartado de reducción del tamaño de las imágenes. Hay que tener en cuenta otro factor. La elección de las imágenes. Tómate tu tiempo, encuentra la imagen adecuada y con la resolución óptima. Con eso conseguimos dar un plus a nuestra imagen general de marca.

Poner una imagen en un artículo no es simplemente ponerla. Tiene que acompañar al texto, estar bien alineada. Que no sea un estorbo ni una distracción para el lector. Si usas varias imágenes en un mismo artículo intenta que tengan, en la medida de lo posible, el mismo tamaño. Hace más agradable la lectura.

Cuando llegas a una web y las imágenes no se ven bien, ¿no te hace desconfiar un poco? Si no se ha tomado su tiempo con las imágenes, ¿se lo habrá tomado con el contenido?

Con que extensión guardar las imágenes optimizadas

Hay muchos tipos de archivos de imágenes. Aunque yo sinceramente me centraría en dos, ya que los archivos GIF han ido desapareciendo del mapa, quedando sólo para imágenes animadas. Los ganadores son jpg y png.

Y os preguntareis cuándo usar cada uno. La regla general es fácil, las imágenes con zonas amplias de colores planos, imágenes planas, logotipos y cosas de ese estilo png, además permite fondos transparentes. Para las fotografías con muchos colores jpg. Podría explicaros los algoritmos de compresión de cada uno, pero creo que os aburriría y no os servirían para nada. Así que quedaros con la regla.

Una cosa más, hay dos tipos de png, de 8 bits y de 24. El de 24 es un tipo de archivo de alta calidad. Y ya sabéis, la calidad va directamente relacionada con el aumento de tamaño de nuestro archivo.

Por eso no me complicaría. Mi consejo: utilizaría png8 para imágenes simples, con pocos colores y jpg para las fotografías.

Cómo optimizar las imágenes

Dos cosas a optimizar la dimensión de la imagen y el tamaño del archivo. Cuando me refiero a la dimensión de la imagen quiero decir al número de pixeles que tiene de altura y anchura.

Dimensión de la imagen

Si vas a necesitar una imagen de, por ejemplo, 300×300 pixeles no uses una de 500×500 y luego la escales en tu web.

Ya lo he dicho más veces, a más tamaño más peso y nos da como resultado más tiempo de carga de la web. Si necesitas una imagen de 300×300 pixeles, sube al servidor una imagen de ese tamaño. No malgastes espacio innecesario.

Tenemos varias herramientas para de optimizar las imágenes.

1. Photoshop

   El que yo utilizo para retocar mis fotografías. Tiene una opción para guardar para web donde podremos elegir el tamaño final de la imagen, el tipo de archivo resultante. Modificar el número de colores de la imagen final, seleccionar la calidad de la imagen.

2. Radical Image Optimization Tool

   Herramienta gratuita de escritorio que permite comprimir las imágenes y prepararlas para subirlas a la red. También tiene la opción de trabajo en lotes, con lo que automatizamos el trabajo si tenemos que modificar el tamaño de muchas imágenes. Lo siento para los usuarios de MAC, sólo está para Windows.

3. Image Optim

   Lo mismo que la anterior herramientas pero para los que utilizamos MAC. ES mucho más sencilla que RIOT.

4. Smush.it

   Quién no conoce este fabuloso plugin para wordpress. Y sino lo conoces, ya estás tardando en instálalo. Si no quieres complicarte con el tema de la reducción del peso del tamaño de las fotos que usas en tu blog. Instala este plugin que lo hace todo automáticamente. Subes la imagen y el sólo se encarga del resto.

5. Compressor.io

   Potente herramienta de compresión de imágenes online. Subes la imagen y él te la comprime hasta un 90% dependiendo del tipo de imagen.

6. Image Optimizer

   Herramienta para comprimir imágenes. Tienes versión online sin necesidad de descargarte ningún tipo de aplicación, o en versión escritorio, tú eliges.

7. Tiny PNG

   Tienes tres opciones: su herramienta online gratuita, si quieres (pagando) puedes descargarte un plugin para instalar en Photoshop y tenerlo integrado, o tiene plugin para wordpress para tenerlo integrado en tu CMS.

Como ves, tener las imágenes optimizadas para tu artículo no es complicado. Sólo hay que dedicarle unos minutos más para no perjudicar la carga de nuestras páginas. Grábatelo con sangre: reduce el tamaño de las imágenes que uses en tus artículos.

Bueno y para acabar, como digo siempre, ayúdame a difundirlo por las redes sociales. O te cuesta ni un minuto y a mí me haces feliz.