Cómo optimizar las imágenes de tu sitio web o tienda online

En este artículo vamos a hablar sobre un tema muy importante y que es una parte fundamental en las tareas de optimización web, la optimización y compresión de las imágenes de los sitios webs.

Cada vez más son muchas las personas, que con pocos conocimientos, deciden aprender a diseñar su sitio web o tienda online. Sin embargo, no caen en la cuenta de que antes de subir las imágenes al sitio web, es muy importante realizar una optimización para comprimir la imagen, reduciendo el tamaño y peso sin que la calidad de la imagen se vea comprometida a niveles visuales.

¿Por qué es importante realizar una optimización de las imágenes antes de subirlas a la plataforma web?

Una imagen, al igual que el resto de elementos de la web, ocupa un espacio y también forma parte de los elementos de la web, y por lo tanto influye en la velocidad de carga del sitio cuando se muestra en el navegador.

Cuando alguien intenta acceder a la web, el navegador realiza una solicitud al servidor y este procesa todos los elementos que contiene el sitio y los envía al navegador para que se muestren. Realmente no es solamente una solicitud, sino que es una solicitud por cada elemento que conforma la web, por lo que cuantos más elementos tenga el sitio web, tienen que realizarse más solicitudes al servidor para mostrar el sitio completamente.

Como ya os podéis imaginar, cuantas más solicitudes, mas tiempo tardará el servidor en procesar todos los datos y mayor será el tiempo que tardará el navegador en mostrar todos los elementos. Si la imagen que tiene que procesar el servidor, no está optimizada ni comprimida y ocupa mucho espacio, entonces el tiempo de respuesta  del servidor aumenta considerablemente.

¿Qué ocurre cuando las imágenes no están optimizadas?

Después de la explicación anterior, el hecho de que el servidor se tome más tiempo en procesar los elementos no optimizados, como son las imágenes, se traduce en una reducción de rendimiento y de velocidad de carga.

Esto se puede ver reflejado en malas puntuaciones en las herramientas de métricas web como Google Page Speed Insight o GTMetrix

Y lo más importante es que si tu sitio web obtiene mala puntuación por tener una velocidad de carga lenta y tarda en mostrar los elementos, esto será un factor muy importante que influirá negativamente en el SEO (Search Engine Optimization).

Cuánto mejor optimizado esté el sitio web, será mejor valorada por los motores de búsqueda y mejorará notablemente el SEO. Pero también hay que señalar que esto no es del todo determinante, sino que hay otras cosas que también influyen en el posicionamiento: elaboración de contenidos de calidad, buena estructura web mantenimiento las cabeceras (h1, h2, h3…) en lugares correctos y con el contenido idóneo, evitar las prácticas de spam, etc…

¿Cómo puedo realizar la optimización de las imágenes?

El proceso de optimizar las imágenes antes de subirlas al servidor web se puede realizar de varias maneras:

• Manualmente.
• Herramientas de optimización de imágenes
• A través de una API (Application Programming Interface o Interfaz de Programación de Aplicaciones)

Manualmente

Este procedimiento lo podemos realizar desde cualquier programa de edición de imágenes (Paint, Photoshop…) Si elegimos este método, solamente podremos modificar el tamaño de las imágenes y su formato (jpg, png, gif, etc…), y solamente en algunos programas como el Photoshop podremos controlar y modificar un poco más la calidad de la imagen para reducir su peso y comprimirla en determinados formatos de imagen. Sin embargo, no es un procedimiento demasiado efectivo y está supeditado a la capacidad y destreza de cada uno para conseguir mejores resultados.

IMPORTANTE: Debes saber que el formato de compresión JPG es un formato que ocupa menos tamaño que en formato PNG.

Herramientas de optimización de imágenes

Existen varias alternativas gratuitas que puedes descargar desde internet. Estos son programas que instalas en tu ordenador y lo que hacen es procesar las imágenes reduciendo su tamaño, peso del archivo y modificando los píxeles de las imagenes.

Los motores de estos programas están muy bien diseñados para realizar el trabajo de optimización de las imágenes sin empeorar la calidad de la imagen a la vista del ojo humano. Y es que realmente lo que hacen es reducir la calidad de la imagen pero apenas es perceptible por el ojo a no ser que se intente ampliar la imagen considerablemente.

Nosotros recomendamos el programa RIOT (Radical Image Optimization Tool). Es gratuito, de uso libre y se puede instalar en cualquier ordenador con unos requisitos mínimos.

A continuación, te mostramos un ejemplo de una imagen que hemos optimizado con esta herramienta. Puedes observar que la pérdida de calidad de la imagen optimizada es imperceptible, sin embargo se ha conseguido reducir el tamaño de la imagen de 352.76KB a 49.34KB (una reducción del 86%)

 

 

API de optimización de imágenes

Sobre este método existen varias alternativas que puedes encontrar por internet. Si eres programador, puedes desarrollar una herramienta o plugin que utilice algunas de estas API.

La característica principal de estos métodos de optimización de imágenes es que se realizan a través de plataformas webs, plugins de WordPress, módulos de Prestashop, etc… Por lo tanto, tienes que tener conexión a internet y en muchas ocasiones tienes que suscribirte a servicios de pago para poder hacer uso de estas utilidades.

En este caso recomendamos la siguiente API de optimización de imágenes:

KRAKEN.IO

Destaca por sus planes de suscripción que son bastante económicos y su motor de optimización que realiza el proceso obteniendo unos resultados muy buenos en las imágenes optimizadas.

Características

• Fácil uso.
• Excelente motor de optimización de imágenes sin pérdida excesiva de calidad.
• Planes de servicio bastante económicos.
• Posibilidad de optimizar imágenes de forma masiva.
• La optimización de las imágenes se hace de forma internar desde el servidor de la aplicación.
• Renovación de la suscripción automática.
• Posibilidad de desarrollar un módulo o plugin para usar su API.

Existen otras API para optimizar las imágenes como resmush.it, smush.it, optimizilla

¿Cómo puedo optimizar las imágenes que ya había subido al sitio web con anterioridad?

Tanto en el caso del método manual como el de hacer uso de una herramienta de optimización de imágenes web, solamente sería posible para las imágenes que quieres optimizar antes de subirlas a tu servidor web. Sin embargo, te puedes encontrar con la situación de que ya habías creado tu sitio web y ahora te das cuenta de que no has optimizado las imágenes.

En ese caso, no te preocupes, entonces el método adecuado será hacer uso de alguna de las API diseñadas para optimizar imágenes a través de un módulo o plugin desarrollado para la plataforma web que estás utilizando (WordPress, Prestashop, Magento, etc…). Estos addons permiten optimizar las imágenes que ya se encuentran subidas al servidor web, incluso te muestran los datos de optimización y el tamaño total reducido después de los trabajos.

 

En definitiva, la tarea de optimización de imágenes es una de las más importantes en el proceso de optimización web y tareas de mejora en el rendimiento del sitio y el SEO. Empieza ahora mismo a optimizar las imágenes de tu sitio web y comprobarás los buenos resultados que te indicamos.