Hoy te traigo un artículo sobre una herramienta fantástica, totalmente gratuita, que te hará la vida más fácil cuando tengas que reducir el peso de tus imágenes al máximo posible sin mermar en la calidad de las mismas.

Dicha herramienta no es otra que TinyPNGel optimizador de imágenes por excelencia. Una vez la conozcas y la pruebes no te querrás deshacer jamás de ella. Te lo aseguro.

Introducción

TinyPNG se creó en principio para tratar sólo imágenes en formato PNG o Portable Network Graphics aunque en la actualidad te da también la opción de comprimir imágenes en formato JPEG o Joint Photographic Expert Group.

Las imágenes png son muy útiles en el ámbito del diseño web puesto que nos dan la opción de almacenar imágenes transparentes pero como contrapartida tenemos un peso notoriamente mayor que las jpeg. El resultado es un aumento en el tiempo de carga de nuestras imágenes repercutiendo negativamente en la experiencia de nuestros lectores.

Recuerda que según los expertos los usuarios esperan como máximo unos 3 segundos a que la web cargue. Si ese tiempo se excede llegarán a la conclusión que dicha web no es lo suficiente profesional y terminarán por encontrar otra que satisfaga sus necesidades. Y esto NO es lo que queremos en absoluto, ¿verdad?

Por si esto fuera poco Google tiene muy en cuenta la velocidad de carga de una web por lo que si mejoramos este factor lo hará también nuestro posicionamiento web.

En mi caso en particular gracias a el control de diversos parámetros, entre los cuales está por su puesto la optimización de imágenes con herramientas como TinyPNG, obtengo unas velocidades de cargas excelentes.

Para comprobar dicha velocidad utilizo Pingdom, una herramienta muy sencilla: sólo tienes que introducir tu URL y presionar el botón de comenzar el test para iniciar el análisis.

Ahora échale un vistazo a la captura de pantalla que acabo de tomar por tí:

Velocidad de carga de mi web

Mi web tarda en cargar 633ms siendo un 95%  más rápida que el resto de las webs analizadas 🙂

Esto es lo ideal y no me cansaré de repetirlo: siempre, siempre, siempre tenemos que intentar mejorar la velocidad de carga lo máximo posible.

Proceso de compresión

Vale, una vez explicado la importancia del proceso de optimización nos centraremos en TinyPNG.

Según su equipo de programadores la compresión de imágenes png están basados en la técnica que ellos llaman “quantización” con lo que consiguen reducir los 24 bits que una imagen tiene por defecto hasta 8 bits, así como optimizar los metadatos que no aportan información relevante.

Aunque a simple vista pueda parecer poco este ratio 24/8 implica que toda imagen en formato png verá reducido su peso en 3 veces. Y eso es mucho.

En el caso de los archivos en formato jpeg el proceso es relativamente similar buscando siempre obtener un nuevo producto de gran calidad y bajo peso.

El resultado son imágenes con un peso relativo al menos 70% menor que sus originales y sin problemas de soporte y visibilidad en los principales buscadores y dispositivos móviles que hoy en día encontramos en el mercado.

Para mí esto roza la perfección ya que actualmente no he encontrado herramienta tan sencilla y potente que nos ofrezcan la calidad que TinyPNG nos da.

Funcionamiento

El método de funcionamiento no podría ser más sencillo. Para ello sólo tienes que arrastrar la imagen que necesitas comprimir hacia la caja donde se lee “Drop your .jpg or .png files here!” o hacer clic sobre ella y elegir tu imagen desde tu ordenador:

Prueba TinyPNG

Posteriormente se iniciará el proceso de compresión el cuál durará unos segundos.

Tras finalizar el mismo podremos comprobar como nuestra nueva imagen está lista. ¡En mi caso he obtenido una optimización del 80% lo cual no está nada mal! 🙂

Ahora sólo tienes que pulsar “download” y obtendrás tu imagen comprimida. Así de fácil y útil al mismo tiempo:

Comprimido TinyPNG

Photoshop

Si eres usuario habitual de Adobe Photoshop TinyPNG te lo pone aún más fácil puesto que te permite instalar su plugin por un precio de 50$. Compatible tanto para aquellos que usen Mac como para los que se han decidido por Windows.

Una vez instalado tendrás la opción de exportar las imágenes con las que estás trabajando comprimiéndolas antes de que sean descargadas. Así te ahorrarás tiempo y el estar todo el tiempo pendiente comprobando si las imágenes tienen un tamaño óptimo así como si fueron previamente comprimidas.

Si estás interesado y necesitas más información puedes verla aquí.

CMS: WordPress & Magento

Aquí es donde la cosa se pone aún más interesante puesto que TinyPNG cuenta con un plugin de compresión automática de imágenes para WordPress y Magento.

Obviamente yo me centro en WordPress puesto que es mi plataforma web favorita la cual llevo usando desde hace mucho tiempo y me ha dado innumerables resultados positivos.

Su instalación es bien fácil. Como todo plugin para WordPress podrás instalarlo mediante 3 vías:

Repositorio oficial de WordPress: para ello sólo tenemos que entrar en nuestro WordPress > Plugins > Añadir nuevo. Una vez allí utilizaremos el buscador e introduciremos TinyPNG para que nos busque el plugin alojado en el repositorio de WordPress. Le daremos a “instalar ahora” y luego a “activar”. Yo en mi caso ya lo tengo instalado y activo:

Plugin nuevo

Dashboard TinyPNG

Vía Plugins: iremos a la web de TinyPNG de WordPress y descargaremos el plugin. Una vez hecho esto vamos a nuestro WordPress > Plugins > Añadir nuevo. Subiremos el archivo zip descargado y lo activaremos. Es el método más habitual para los plugins premium:

Subir plugin

Vía FTP:  básicamente consistiría en acceder a la carpeta de tu hosting donde se encuentran todos tus plugins (normalmente es la ruta: wp-content/plugins) de WordPress y y añadir el plugin previamente descomprimido. Para ello tendrás que utilizar un programa como Filezilla e introducir tus datos, previamente adquiridos en tu hosting habitual:

FTP Filezilla

De todas estas vías recomiendo siempre que puedas hacer uso de la primera puesto que es la más fácil y que menos problemas te dará a la larga.

Si necesitas más información sobre los plugins y su instalación puedes ver mi artículo: Plugins en WordPress. Qué son y cómo instalarlos.

¡Una vez tienes TinyPNG instalado no tienes que hacer nada más! Siempre que subas alguna nueva imagen el programa la detectará y la comprimirá de forma rápida y automática para que te consuma el mínimo de recursos posibles.

Nota: si te decantas por instalar el plugin TinyPNG en tu sistema de gestión de contenidos tendrás un límite mensual de compresión automática de hasta 500 imágenes. Una vez alcanzado ese número tendrás que pagar unos 0,009 $ por imagen o bien esperarte al mes siguiente.

Ojo, esto sólo se aplica si instalas el plugin en tu WordPress. Siempre podrás visitar la página oficial y comprimir tantas imágenes gratuitas como quieras. De todas formas con ese margen de 500 imágenes pienso que tienes más que suficiente.

API para desarrolladores

Si eres de los que te gusta el código también puedes aplicarlo en tu proyecto. TinyPNG te permite conectar su herramienta a tu servidor de tal manera que tus imágenes sean comprimidas mientras las cargas.

Para ello sólo tienes que obtener tu API Key y seguir las instrucciones que muestra aquí.

Es una opción muy válida si tu flujo de imágenes es elevado y trabajas directamente con tu servido, como yo solía hacerlo anteriormente. Pero personalmente pienso que para más del 90% de los usuarios la opción de compresión mediante la propia página y/o con el plugin es más que suficiente.

Conclusión

La optimización de imágenes es una técnica que hoy en día implica un bajo coste tanto económico como de tiempo. Su repercusión tanto en la experiencia de usuario como en el posicionamiento (SEO) es decisiva por lo que debemos estar siempre muy atentos para que dichos parámetros no se vuelvan en tu contra.

La elección de una herramienta como TinyPNG cumple con creces los requisitos esperados y estoy segurísimo que si empiezas a usarla como parte de tu proyecto web no querrás abandonarla en mucho tiempo.

¿Te ha parecido interesante? ¿Qué opinas al respecto?