Cómo optimizar las imágenes de tu e-commerce para tener una web más rápida que el viento

¿Sabías que uno de los aspectos que más valoran los usuarios en una tienda online es la velocidad de carga? Para ello, optimiza tus imágenes!
No hay nada más desesperante que hacer clic en un sitio y ver que tarda muchísimo en cargar. De hecho, si pasa más de un segundo, lo más normal es que el cliente se vaya hacia la competencia).
¿Cómo podemos mejorar nuestra velocidad de forma sencilla?
Empezando a optimizar las imágenes de todo nuestro e-commerce.
Las fotografías son uno de los archivos que más “pesan” y que más le cuesta al servidor manejar. Por eso, cuando más ligeras sean las imágenes… mejor para la velocidad, los clientes y las ventas. 😉
Prepárate que hoy vamos a meter una “tijera virtual” a todas tus fotografías para que tu e-commerce cargue a la velocidad del rayo.
3, 2, 1… ¡Tiempo!

Por qué es importante optimizar las imágenes de tu tienda online

En este post ya te hablamos de la importancia de sacar unas fotos de calidad a tus productos. Y es que no olvides que muchas veces son estas imágenes las que hacen que una persona compre o no.
Pero aquí surge un problema.
Subir a nuestra web muchas fotos de calidad, supone saturar nuestro servidor y que cargue más lento. De ahí la importancia de optimizar todas las fotos que subamos a nuestra tienda.
Pero veamos todos los beneficios uno por uno:

• Velocidad de carga: la rapidez con la que tu e-commerce cargue tiene un impacto brutal en la experiencia de usuario, y por tanto, en las ventas. Fíjate si influye que Amazon afirma que por cada décima de segundo que mejora la velocidad de su web, sus ingresos aumentan un 1%.
• Posicionamiento web: si te preocupa el SEO de tu e-commerce (y lo debería hacer), debes optimizar las imágenes porque, como vimos antes, afectan de forma directa a la velocidad de carga (uno de los criterios que valora el algoritmo de Google).
• Optimización del consumo recursos: imágenes más ligeras es menos espacio que ocupas en tu hosting.
• Más conversión: un usuario satisfecho compra más, obvio, ¿verdad? (acuérdate de ese 1% de Amazon).

Como ves, los beneficios de cuidar tus imágenes son muchos. Ahora solo nos falta ver cómo lo hacemos.

Cómo optimizar una imagen en Photoshop antes de subirla a tu tienda online

El primer paso para optimizar una imagen es ajustarlas a su tamaño ideal. No te preocupes que el proceso es muy sencillo.

1. Medidas

Lo primero que tenemos que hacer es saber las medidas exactas que tienen en tu plantilla. Dentro de WooCommerce, vete a “Ajustes/Productos/Mostrar”.
Ahí verás las medidas por defecto de las imágenes. Si la imagen del producto es de 600×600 píxeles, subir una imagen mayor solo servirá para ocupar un espacio innecesario y ralentizar la web.

2. Cuál es el “peso ideal”

El objetivo es encontrar el equilibrio entre una foto de calidad y un peso razonable. Menos de 70 KB es ideal; pero si no es posible, con que no tengan más de 100 KB es suficiente.

3. El formato correcto

Para imágenes con transparencias o pantallazos usa el formato PNG; para todas las demás JPG.

4. Recortando y ajustando el tamaño en Photoshop

Para explicarte el proceso de manera más sencilla, te dejamos un vídeo donde verás cómo realizar los ajustes básicos en Photoshop. Por ejemplo, el cambiar tamaño de imagen (que no de lienzo) y el útil “guardar para web”.

Como alternativa a Photoshop puedes usar la herramienta online Pixlr (es una versión reducida de Photoshop). Otra opción es Gimp, un programa de código abierto de edición fotográfica.
Y si eres de Mac… tu herramienta es ImageOptim, una aplicación nativa de MacOS por si no quieres pelearte con un editor fotográfico.

 5. Redimensionar las imágenes en WordPress directamente

Si has subido una imagen demasiado grande, puedes cambiarle el tamaño en WordPress.
En “Multimedia/Biblioteca”, haces clic en la imagen y das editar. Aquí podrás escalar o recortar con la relación de aspecto que quieras (te aconsejamos cuadrada).
Es fácil y rápido pero tiene un inconveniente; lo que hace WordPress es crear una nueva imagen con las dimensiones que le hayas dicho. Eso implica que tendrás la imagen pesada y una copia más ligera.
Si no eliminas la primera, la velocidad de carga no mejorará.

Cómo optimizar todavía más las imágenes sin perder calidad

Existen muchas páginas para reducir el tamaño de las fotos sin perder calidad. Te dejamos varias:

1. Webresizer

No solo permite redimensionar imágenes online, sino realizar algunas ediciones básicas de color, luz, etc.
Dentro de unas mismas medidas, presumen de reducir el peso en un 68%.

2. TinyPNG

Uno de los programas para comprimir imágenes gratis más conocidos. Permite optimizar varias imágenes a la vez, 20 en total de hasta 5 Mb cada una.
Trabaja minimizando el número de colores necesarios para que el cambio sea inapreciable al ojo humano. Si tienes que trabajar con muchas imágenes a la vez, esta es tu herramienta.

3. Compressor.io

Aunque no permita optimizar masivamente, su límite es de 10 MB por foto. Otra función muy útil es que permite guardar el archivo optimizado directamente en Google Drive.
Estas herramientas online son muy útiles y rápidas, pero si tienes unos conocimientos mínimos de edición y retoque fotográfico, el resultado de hacerlo manualmente es más completo.

Plugins para optimizar las imágenes en WordPress y mejorar la velocidad de carga

Estos son los plugins que más nos gustan para optimizar las imágenes en un e-commerce y otros para mejorar la velocidad.

1. WPSmush

Plugin 100% gratuito para comprimir y redimensionar todas las imágenes de tu web.
Es fácil de usar y permite trabajar sobre todas las imágenes de WordPress, como de cualquier theme o plugin.

2. EWWW Image Optimizer

Otro plugin gratuito. Permite optimizar todas las imágenes a la vez y distingue entre optimización por formatos: JPG o PNG.

3. Lazy Load

La carga perezosa o lazy load consiste en que las imágenes no se cargan hasta que aparecen en pantalla.
Imagínate que tienes una página o un post con una foto muy pesada al final. Con este plugin solo se cargará si el usuario llega hasta ahí (así la página cargará de inicio más rápido).

4. Imsanity

La principal diferencia de plugin con los anteriores es que está especializado en optimización masiva.

5. Plugins de cache

Dos de los plugins gratuitos más conocidos son:

• W3 Total Cache.
• WP Super Cache.

Ya de pago, pero quizás el más recomendable, tienes WP Rocket.

Plugins para optimizar las imágenes en Prestashop

Una de las ventajas que tiene Prestashop es que permite activar la caché directamente. Desde “Parámetros avanzados/Rendimiento” tendrás acceso a la configuración Smarty para comprimir, compilar y cachear sin necesidad de módulos extra.
Además de esto, con esto plugins ganarás un extra de velocidad:

1. Resmush

Permite imágenes de hasta 5 Mb en JPG, PNG y GIF y en un par de clics tendrás todas las imágenes de tu tienda optimizadas.
Si te gusta esta herramienta pero usas WordPress, también existe un plugin para este CMS.

2. PrestaSpeed

Si quieres invertir en una herramienta un poco más completa, por menos de 50€ tienes PrestaSpeed.
Además de la optimización de imágenes, aligera la velocidad de carga limpiando la base de datos de información que ya no es útil. Por ejemplo, los viejos pedidos o los carritos abandonados.
Además, con este módulo (después de optimizar), podrás acceder a la imagen anterior o incluir un scroll infinito para mostrar solo lo necesario.

Cómo optimizar las imágenes en WordPress para el SEO

Cuando hablamos de optimizar imágenes, también se le pude dar un enfoque SEO. Y es que puedes modificar las fotografías para que también te den un empujón en el posicionamiento web.

1. Nombra tus fotos describiéndolas: un archivo que se llama IMG_1234 no da ninguna pista a Google del contenido de la imagen.
2. Utiliza la etiqueta “alt”: esta etiqueta se encuentra en las opciones de las imágenes y aparece como “texto alternativo”. No pongas todo el rato la misma keyword, ten en cuenta que estos textos ayudan a las personas que utilizan asistentes de lectura.

Solo con estas 2 acciones, conseguirás que tus fichas de producto (o de categoría) ganen posiciones en el buscador.

¿Quieres saber si las imágenes de tu e-commerce están suficientemente optimizadas?

Para salir de dudas utilizaremos una herramienta gratuita que el mismo Google ofrece, PageSpeed.
Solo tienes que introducir la url y obtendrás una nota de la velocidad de la web.
Pero no nos vamos a quedar ahí. Si te fijas un poco más, hay un apartado de “Optimizaciones posibles”. Si ahí te aparece “Optimizar imágenes” es que tienes trabajo por delante. 😉

Otra herramienta que te puede ser muy útil es el Speed Test de Pingdom.
Una vez aplicados los consejos de este artículo, mide la velocidad de carga y compárala con la obtenida antes de las optimizaciones.
¡Ponte ya a optimizar las imágenes de tu tienda online!
En este artículo, tienes todo lo que necesitas para empezar a reducir y optimizar tus imágenes para que tu tienda online cargue en el menor tiempo posible.
Así que ya solo te queda ponerte manos a la obra.
¿Te da pereza?
Seguro que recordar ese 1% más de ingresos por cada décima de segundo ahorrada que gana Amazon, te motiva a ponerte.
¡A por esas imágenes!