optimizar las imágenes web. Reducir tamaño imágenes, Aumentar rendimiento web. Optimizar web. Tutoriales

Optimizar las imágenes de la web

En este artículo vamos a hablar sobre un tema muy importante, sobre la optimizació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 reducir el tamaño y peso sin influir demasiado en la calidad de la imagen.

¿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, también forma parte de los elementos de la web, y por lo tanto influye en la velocidad de carga del sitio web cuando se muestra en el navegador.

Cuando alguien intenta acceder al sitio 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 este lo muestre. 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. Y si la imagen que tiene que procesar el servidor, no está optimizada y ocupa muchos 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á 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 hacer 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 procedimiento, solamente podremos modificar el tamaño de las imágenes y su formato (jpg, png, gif…), y solamente en algunos programas como el Photoshop podremos controlar un poco más la calidad de la imagen para reducir su peso. 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 fomato 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 que les envíes reduciendo no solo su tamaño, sino el peso del archivo, modificando los píxeles de las imagen.

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.

Nosotros recomendamos el programa RIOT (Radical Image Optimization Tool). Es gratuito, de uso libre y se puede instalar en el ordenador.

RIOT. Radical Image Optimization Tool. Optimizador de imágenes. Herramienta optimización de imágenes web. Optimizar imágenes

API de optimización de imágenes

En este caso, también 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 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 Optimizador 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.

¿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.

No te preocupes, entonces el método adecuado será el 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…).

A continuación te mostramos algunos desarrollos con API para optimizar imágenes en las diferentes plataformas webs:

WordPress

Plugin Kraken.io Image Optimizer

reSmush.it Image Optimizer

Smush – Compress, Optimize and Lazy Load Images

Prestashop

Módulo Kraken Image Optimizer

Módulo PrestaSpeed – Image / site / database optimization

Módulo Compresor de Imágen con IMAGIFY

Módulo ReSmush Image Compression for large catalogs

Servicio de optimización de imágenes

En Liewebs te ofrecemos un servicio de optimización de imágenes a un precio muy reducido y utilizando las mejores herramientas de optimización. Optimizamos todas las imágenes de tu sitio web y te garantizamos el incremento en el rendimiento y de la velocidad de la web. Para que no tengas que preocuparte de nada, nosotros haremos el trabajo para ahorrarte tiempo y dinero.

Artículos relacionados

Este sitio web utiliza cookies propias y de terceros para medir las visitas y las fuentes de tráfico web. La base legal es el consentimiento del usuario, excepto en el caso de las cookies básicas, que son esenciales para navegar por este sitio web.
¿Necesitas ayuda? Chatea con nosotros
Por favor, acepta nuestra Política de Privacidad de datos y Cookies antes de comenzar con la conversación.