¿Nunca te has preguntado por qué algunos sitios tardan mucho tiempo en cargar? La causa principal es tener gran cantidad de imágenes de grandes dimensiones y peso en el sitio Web. Por eso, es fundamental saber cómo optimizar imágenes sin perjudicar la calidad de nuestro contenido.

Aunque la conexión a Internet de alta velocidad esté presente en gran parte de los rincones del mundo, existen razones por las que debemos mantener nuestra web ligera, por ejemplo, para evitar que los usuarios reboten la página; facilitarle el trabajo a Google o permitir que la web cargue sin problema en todos los dispositivos.

¡Sigue leyendo y aprende a hacerlo de tu eCommerce!

¿Qué es la optimización de imágenes?

La optimización de imágenes es un proceso de compresión sin pérdida de calidad y que se consigue al disminuir el tamaño de las imágenes que serán utilizadas en la web con ayuda de un plugin, script o aplicando otras técnicas para mejorarlas como explicaremos más adelante.

Cuando una imagen es redimensionada, su peso disminuye, y la calidad puede verse afectada. Por otro lado, una página web con imágenes grandes tendrá un mayor tiempo de carga, perjudicando considerablemente la velocidad del sitio y, por ende, la experiencia del usuario.

¿Por qué necesitas optimizar las imágenes?

Si sabes qué es el SEO, entonces serás consciente de lo importarte que es optimizar los diversos aspectos de un sitio web. Por ello, existen técnicas de SEO on-page para optimizar imágenes y lograr que nuestra web funcione perfectamente. 

Entre las ventajas que nos puede ofrecer estas mejoras son las siguientes:

Reduce el tiempo de carga web

Es un hecho que entre menor sea el peso de las imágenes, mayor será la velocidad de carga de tu página web generando más visitas y conversiones.

Mantener una web rápida y ligera contribuye enormemente con la experiencia de los usuarios. Por eso, es fundamental aplicar las medidas necesarias para optimizar las fotos.

Ayuda al posicionamiento SEO

Google suele premiar a las páginas optimizadas con mejores puestos en su índice de resultados, aunque también debe ofrecer contenido útil y de calidad, si realmente desea posicionarse en los primeros lugares.

Ten en cuenta que toda medida que mejore la experiencia del usuario será considerada de buena manera por el buscador, así que una web que cargue rápido nos ayudará a escalar posiciones.

Consume menos espacio en tu hosting

Cuando logras optimizarlas, estarás ahorrando espacio en el servidor dónde se aloja tu web. Asimismo, reducirás recursos como bando de ancha, RAM y CPU.

Todo esto se traduce en un mejor rendimiento general.

Mejora el porcentaje de rebote

Si la página dura menos tiempo en cargar, es más probable que el usuario espere para ver el contenido. En cambio, si el tiempo de carga es excesivo, el porcentaje de rebote será mayor y, por lo tanto, será más probable que el usuario abandone la página antes de que terminen en cargarse todos los recursos.

Por ese motivo, toda medida que acelere nuestra web, nos ayudará a conservar visitantes.

La importancia de optimizar imágenes web

>> También te interesa leer:

 ¿Cuáles son los pasos para optimizar las imágenes de tu sitio web? 

Con los pasos que veremos a continuación podrás optimizar las fotografías hasta obtener los mejores resultados posibles sin necesidad de utilizar plugins, scripts u alguna otra herramienta para mejorar tu contenido visual Online:

1. Cambiar nombre de archivo

Comencemos colocándole un nombre a la imagen. Aunque no lo parezca, esta simple acción nos ayudará a posicionar.

El nombre utilizado en la imagen debe tener relación con el contenido en la misma, en otras palaras, tiene que hacer referencia a lo que aparece en la imagen, a su finalidad. El impacto en el SEO que tiene un archivo de imagen llamado “foto-catalogo-tienda.jpg” como fondo del catálogo de una web frente a “jr-MjklT15uy6RTi-unsplash.jpeg” es importante, porque siendo la misma imagen, una se entiende y tiene un fin, mientras que la otra, no.

Existen una serie de aspectos que tenemos que tener en cuenta cuando nombremos una imagen:

  • Al haber variedad de imágenes que lleven el mismo nombre, hay que enumerarlas. Por ejemplo: example-01.jpg, example-02.jpg, example-03.jpg.
  • No acentúes las palabras en el nombre del archivo de imagen. De no ser así, el navegador interpretará en la URL el nombre del archivo “ejemplos-de-superación” como “ejemplos-de-superaci%C3%B3n”.
  • No coloques ningún carácter especial, tampoco utilices “.” como separador de palabras porque este símbolo es utilizado solamente para indicar el formato del archivo.
  • No olvides utilizar “–“ o “_” en lugar de un espacio en blanco para separar las palabras. De lo contrario el navegador interpretará el nombre de la imagen mal, por ejemplo, un archivo llamado “foto de ejemplo.jpg” será interpretado como “foto%20de%20ejemplo”. Lo correcto sería colocar el nombre como “foto-de-ejemplo.jpg” o “foto_de_ejemplo.jpg”. 
  • Sustituye la letra Ñ por la letra N, por ejemplo, señal > senal.
  • Tanto las imágenes creadas por uno mismo como las que descarguemos, deben ser renombradas.

2. Ajustar el formato de imagen

Es momento de verificar el formato de nuestras imágenes porque dependiendo del uso que le daremos, conviene usar uno u otro formato. Entre los tipos de archivos tenemos:

  • Imágenes con movimiento: normalmente es utilizado el formato gif, apn o el webp. Estos últimos ofrecen menor peso de imagen y mejor calidad que el gif.
  • Imágenes sin fondo o con fondo transparente: generalmente es usado el formato webp o .png en este tipo de imágenes.
  • Fotografías: es posible usar formatos como el jpg xr, webp o el tradicional jpg.
  • Imágenes vectoriales o logotipos: siempre que sea posible hay que hacer uno del formato svp. Este tipo de formato permite el escalado con compresión sin pérdida de calidad.

3. Adaptar el tamaño de la imagen web

Optimizar las fotografías para que tengan el tamaño adecuado en pixeles para tu sitio web es esencial porque de nada sirve subir una imagen en tamaño 1350px x 950px, para colocarla en un espacio de 650px x 275px. 

Este tipo de errores conllevan a que WordPress redimensione la imagen malgastando recursos y perjudicando el tiempo de carga web.

Por otro lado, agrandar o reducir las imágenes dañará su calidad. Así debes redimensionarlas apropiadamente, asegurándote de no superar la anchura máxima de tu página. 

4. Reducir o comprimir el peso

Entre menor sea el peso de la imagen, mejor velocidad de carga obtendremos. En muchos casos lograr el equilibrio entre calidad y peso es una tarea difícil, pero lograrlo nos ayudará enormemente a disminuir el tiempo de carga de nuestra web.

5. Añadir Texto Alt

En la etiqueta de texto alternativo es obligatorio colocar una descripción relacionada al contenido de la imagen, con la finalidad de realizar una descripción de la misma en caso de que no esté disponible o simplemente para asegurar su accesibilidad.

En este apartado hay que escribir de forma natural porque va dirigido tanto para los usuarios como para Google para que pueda encontrarlas más fácilmente.

6. Comprobar si están optimizadas

¿Completaste todos los pasos anteriores? Es momento de verificar si las imágenes que subimos a nuestra página quedaron optimizadas. El primer paso será acceder a la siguiente página: Google PageSpeed e ingresar en la barra de búsqueda la URL de tu web.

Herramienta de Pagespeed

Hecho lo anterior, espera unos segundos para ver el diagnóstico de rendimiento de tu web.

Acá podrás ver el rendimiento general de la página y unas métricas que muestran variedad de factores de carga del sitio web, tales como el tiempo en pintar la imagen, la suma de las puntuaciones otorgadas a cada factor que modifica su tamaño o posición dentro de la página junto a otras métricas.

En la parte inferior de la página, veremos un informe sobre las oportunidades de mejora que pueden aplicarse al sitio web para disminuir su tiempo de carga.

Si la mayor parte de los factores aparece en verde, significa que las imágenes de la web están optimizadas correctamente.

Conclusión

Actualmente todo debe ser rápido, casi instantáneo para no ser descartado. Por ello, los sitios web pese a tener cada vez más elementos, deben encontrar la manera de funcionar correctamente en todos los dispositivos a través de una correcta optimización para ganarse un lugar en los primeros resultados de los motores de búsqueda.

Ahora que sabes cómo optimizar imágenes de forma manual, es momento de que empieces con tu sitio web para mejorar los tiempos de carga.

¿Aun necesitas ayuda para mejorarlas en tu página web? Si prefieres un servicio que haga estas labores por ti, tenemos el módulo de PrestaShop para optimizar imágenes. Con este módulo podrás incrementar su rendimiento fácilmente, además disminuirá el tiempo de carga de tu página, mejorará la experiencia de los visitantes logrando más conversiones.

Y tú, ¿Ya has optimizado tus imágenes de tu tienda Online? 

¡Estaremos encantados de escuchar tu experiencia!

Imagen de portada: Freepik

Vector de Sitio web creado por stories – www.freepik.es

Jehyson Bustamante
Jehyson Bustamante

Director ejecutivo de PresTeamShop. Experto y apasionado por el comercio electrónico en PrestaShop, con una experiencia de más de 8 años.