Mejorar la carga de imágenes en Magento

Muchas veces os habrá pasado que al visitar una página web veis que faltan muchos huecos por rellenar. La web aparece toda descuadrada, y se van cargando los elementos que faltan a medida que pasa el tiempo.

Esto ocurre sobre todo si es una tienda online donde hay una galería bastante grande y a continuación una o más listas de productos. Como por ejemplo, los más destacados, novedades, los más vendidos, ofertas, etc. Es decir webs que contienen muchas imágenes y estas tienen que tener una buena calidad.

Habréis notado también que cuando se cargan las imágenes, estas se cargan de arriba a abajo, línea a línea. Todo esto hace que la primera visión de la web de vuestro cliente sea un desastre. El cliente tiene que esperar a que la página cargue por completo para seguir navegando. Haciendo la espera de vuestro cliente mucho más interminable.

Sin embargo también habréis visto otras páginas web dónde las imágenes cargan de golpe, con una visualización borrosa y a medida que transcurre el tiempo se van poniendo más nítidas hasta que la imagen carga completamente. Algunos ejemplos los podéis encontrar en Google Images, si buscáis alguna foto, los resultados aparecen de esta forma.

Carga de imágenes Baseline y Progressive

Estas dos formas de cargar las imágenes, sólo ocurre con las jpeg. Por defecto cuando se crea un archivo jpeg o jpg, se crea en modo baseline. En este modo, al visualizarse en una web, la imagen se carga empezando por el extremo superior izquierdo y terminando por el inferior derecho, dando la sensación de que carga línea a línea de píxeles.
Por el contrario cuando vemos que una imágen primero se visualiza borrosa y poco a poco se ve más nítida es por que se ha creado en modo progressive. En este modo la imagen se carga por capas, la primera es una imágen muy borrosa y poco a poco se va haciendo más nítida.

Ventajas de progressive vs baseline

La ventaja principal del formato JPEG progressive es que cuando la conexión a Internet sea lenta, el usuario podrá ver al menos una imagen borrosa y tendrá una idea acerca de la imagen de carga. Este comportamiento es una clara ventaja que se puede notar mucho en dispositivos móviles.
Otra ventaja es que el usuario tendrá la sensación de que la web carga a una velocidad mucho mayor de la que realmente tiene.
Por último, como mencionábamos al principio, la web no aparecerá descuadrada en la primera visualización. Esto mejorará la experiencia del visitante y la calidad de la web.

¿Cómo podemos pasar las imágenes baseline a progressive?

Obviamente no vamos a generar todas las imágenes de nuestro catálogo otra vez para que estén en modo progressive. Existen varias herramientas para esta tarea, la más utilizada es un programa en modo línea de comando llamado jpegtran. Este programa nos permite además de cambiar el módo de nuestras imágenes jpeg, reducir el peso de estas sin perder calidad.

Opt In Image
Suscríbete al boletín
Convierte tu tienda online en un negocio rentable.

Si te ha gustado lo que has leído suscríbete y recibirás en tu correo más trucos e ideas para sacarle el máximo provecho a tu tienda online.

Author:

CTO de Magestio Ecommerce