Cómo optimizar las imágenes para tu web

Las imágenes son una parte fundamental de un sitio web. Elegir las adecuadas para mantener la estética y captar la atención de los visitantes es una actividad que requiere tiempo y dedicación.

Sin embargo encontrar un balance entre calidad y tamaño de las imágenes elegidas no es siempre tan fácil y es algo que repercute directamente en el rendimiento del sitio. En este artículo vamos a desentrañar una forma sencilla y gratuita para optimizar las imágenes de tu sitio web.

¿Por qué optimizar las imágenes?

Es muy importante hacerlo ya que permitirá mejorar la performance, disminuyendo el tiempo de carga de tu página web. La velocidad es uno de los factores SEO más importantes hoy en día.

Según el experto en SEO Bryan Dean, Google no premia a una página por cargar más rápido pero si penaliza a aquellas que son lentas dejándolas al final de los resultados de búsqueda. Esto tiene mucho sentido ya que uno de los pilares de Google es ofrecer a sus usuarios los mejores resultados y una buena experiencia de navegación.

Asi que para lograr un sitio más rápido vamos a ponernos manos a la obra:

En general una web utiliza imágenes en formato png o jpg. El primero se utiliza más que nada en logos o iconos que requieren un fondo transparente. El segundo es el más utilizado para fotografías e imágenes con muchos colores.

Para optimizar imágenes con estos dos formatos utilizaremos la aplicación online TinyPNG.com.

Es una herramienta muy sencilla que permite comprimir imágenes sin perder calidad y en unos pocos pasos:

Paso 1: Ir al sitio de la herramienta TinyPNG.com

Podés ingresar al sitio web desde aquí

Paso 2: Subir las imágenes a optimizar

Arrastra y suelta tu imagen en el recuadro «Drop your .png or .jpg files here!». Otra forma de subir las imágenes es haciendo click en ese mismo recuadro y luego elegir la imagen a optimizar desde tu computadora.

 

 

Paso 3: Proceso de compresión

Comenzará el proceso de carga y compresión, que sólo demorará unos pocos segundos. Dependerá también si has subido una o varias imágenes, ya que se pueden cargar simultáneamente hasta 20 imágenes.

 

 

Paso 4: Descargar o guardar la imagen ya optimizada

Una vez finalizado el proceso de compresión (Me encanta la expresión del panda festejando!), podrás descargar la o las imágenes a tu computadora o guardarla en Dropbox. Además te mostrará el porcentaje de compresión, que en este caso de ejemplo la reducción ha sido de un 67%, lo cual es genial.

 

 

Aquí te muestro la imagen sin optimizar y ya optimizada, verás que no hay una diferencia significativa entre ambas a simple vista,pero la diferencia de peso en Kb entre una imagen y otra sí lo es.

 

 

TinyPNG para WordPress

Si usás WordPress como plataforma para tu sitio web podrás utilizar esta herramienta en forma de plugin.

Para instalarla debés ir al Escritorio de WordPress >> Plugins >>Añadir nuevo

Luego buscarlo por su nombre:

 

 

Seleccionar «Instalar ahora» y luego «Activar».

Para que funcione deberás ingresar en la configuración del plugin, agregar tu dirección de correo electrónico y te enviarán un enlace para poder realizar la conexión de la herramienta con tu sistema WordPress a través de una API Key.

¿Cómo funciona?

Cada vez que subas una imagen desde la biblioteca multimedia, el plugin la detectará y realizará la compresión en el servidor de TinyPNG. Luego la imagen será enviada nuevamente a tu sitio WordPress y reemplazará la imagen original por la imagen ya optimizada.

Se puede utilizar este servicio en forma gratuita optimizando 500 imágenes por mes. Si superas este limite deberás pagar por cada imagen extra, o esperar hasta el mes siguiente…..

TinyPNG para Photoshop

Si utilizás Photoshop para crear o editar las imágenes de tu web, te puede ser muy útil instalar este plugin para optimizar directamente desde el programa.

 

En este caso no es gratuito: cuesta 50 dólares y está disponible para usuarios de Windows y de Mac.

 

---

 

 

Optimizar tus imágenes no es algo optativo si querés mantener tu sitio atractivo y a la vez mantener una rápida velocidad de carga, ya sea en celulares o computadoras de escritorio. Recordá que esta velocidad impacta en la experiencia del usuario que visita tu web. Por suerte existen herramientas simples y gratuitas como TinyPNG que nos facilitan la tarea de encontrar ese equilibrio entre calidad y velocidad.

Si ya la usaste ¿Que te pareció TinyPNG?