Como vimos en el artículo de 4 técnicas simples para mejorar el posicionamiento de tu web, el tamaño y peso de las imágenes impactará mucho en la velocidad de carga de tu página.

Una velocidad de carga lenta hará que la gente se vaya más rápido de tu página, lo que impactará directamente en tus ventas y le indicará a Google que la experiencia de uso no es muy amigable.

Si la página de la que estamos hablando, es una de producto el impacto puede ser inmediato. Amazon hizo un estudio donde calculó que aproximadamente “por cada 3 segundos de más que cada una de sus páginas tardaba en cargarse, perdían entre 5% y 7% de ventas anuales” (Fuente: Fast Company)

En un segundo de más en la carga de la página podían perder 16 billones anuales. Sólo en un segundo.

Hablemos de la importancia de la velocidad de carga.

Está bien… ya sé, no estamos hablando de esos números en nuestros negocios, pero un 5% o 7% de impacto anual es muy grande por algo simple de mejorar.

Por eso hoy te quiero mostrar paso a paso como cambiar el tamaño y peso de una imagen antes de subirla a tu Web.

Porque algo que parece tan simple, puede tener un impacto gigante.

Esto aplica para TODAS las imágenes que tengas. Sea en tu Home, las fotos de cada uno de tus productos o cada una de las fotos en los artículos si tienes un Blog.

Imaginemos que sacas una foto de un producto nuevo que quieres subir a tu tienda online. Bajas la foto de tu cámara y la guardas en tu computadora.

Imaginemos que vendes bolsos y carteras y es esta foto:

Cuando la bajes de tu cámara, la imagen tendrá una medida y un peso determinado.

Para saber cuáles son vas a “Obtener Información”:

En este caso la imagen pesa 977 KB y mide 2304 x 1536 pixels.

Ahora imaginemos que esta es tu tienda online y así se ve una página típica de tus productos:

La imagen en este caso es cuadrada por ejemplo. Con lo cual para mantener la consistencia de todos tus productos deberíamos subirla en esas mismas dimensiones.

En el administrador de tu tienda verás cuál es ese tamaño exacto dependiendo el template que estés usando, pero imaginemos que es 1000 x 1000 pixels.

1000 x 1000 pixels significa que esta imagen tendrá 1,000,000 pixels de información para procesar. Con lo cual tardará más en cargarse que una imagen de 800 x 800 pixels, pero menos que una de 1500 x 1500 pixels.

Como vimos al principio nuestra foto original la tenemos en 2304 x 1536 pixels., con lo cual lo primero que vamos a hacer es ajustar esas medidas para llevarla a 1000 x 1000 y luego le vamos a disminuir el peso.

PRIMER PASO: ¿Cómo cambiar el tamaño de la imagen?

Si sabes usar Photoshop lo puedes hacer ahí, pero lo voy a mostrar usando https://www.canva.com/ que es gratis y para mi mucho más simple de usar.

1 – Haces clic en “usar dimensiones customizadas”

2 – Completas con el tamaño que quieres, siguiendo este ejemplo 1000 x 1000, elijes pixels y haces clic en “Design”:

3 – En la próxima pantalla te va a aparecer el cuadrado blanco de 1000 x 1000 en el que vas a poner la imagen de tu producto:

4 – Luego haces clic en “Upload your own image” y subes la foto original que tienes en tu computadora:

5 – Una vez que tienes la foto ahí cargada, la arrastras dentro del cuadrado blanco:

6 – En este ejemplo como la imagen es rectangular, me queda mucho espacio arriba y abajo en blanco, así que el último paso es con el mouse ir agrandando la imagen hasta que ocupe todo el espacio:

7 – Una vez que la imagen está como te gusta, entonces haces clic en “Download” y la bajas y la guardas en tu computadora:

¡Primer paso listo, tu foto ya tiene el tamaño que quieres!

SEGUNDO PASO: ¿Cómo cambiar el peso de una imagen?

Este paso es mucho más rápido porque tenemos programas gratis que felizmente nos ayudan a hacerlo sin perder calidad de la imagen. Va a pesar mucho menos, pero se va a seguir viendo perfecto en tu Web.

Cuanto menos pese más rápido va a cargar tu página y más gente se va a quedar navegándola.

Hay varios programas que sirven para esto, el que yo uso es: https://tinypng.com/

1 – Simplemente arrastras la imagen o imágenes a las que le querés bajar el peso hasta el recuadro que aparece ahí:

2 – Automáticamente se va a empezar a comprimir y te va a decir exacto qué % de reducción de peso hizo:

En este caso la bajó de 677 KB a 102 KB, un 85% menos de peso!!! 🙂

3 – Haces clic en “download” o “download all” si subiste varias imágenes y la guardas en tu computadora.

¡Listo! Ahora tienes tu imagen en el tamaño correcto y con un peso mucho menor.

Si quisieras seguir reduciendo aún más el peso, podrías volver a subir esta imagen, pero andá chequeando que no la reduzcas tanto que se termine perdiendo la calidad.

¡Ahora que sabes cómo cambiar el tamaño y peso de una imagen, puedes aplicar este mismo proceso para todas las imágenes de tu Web!

De esta manera las páginas cargarán mucho más rápido y además tendrá una consistencia visual ya que todos los productos estarán cargados con las mismas dimensiones.

Espero que te haya servido este pequeño tutorial de como cambiar el tamaño y peso de una imagen y cualquier duda que tengas con alguno de los pasos me avisas 🙂