¿Quieres aprender las diferencias que existen entre tamaño, resolución y formato de imagen? ¿Has oído en algún sitio que una imagen pesada hace que nuestra página web sea más lenta? ¿Quieres poder optimizar tus imágenes pero sin que sufran ninguna pérdida de calidad? Si en algún momento te han surgido estas, u otro tipo de dudas
relacionadas, no dudes en quedarte y seguir leyendo porque este artículo te será de mucha utilidad.
La importancia de optimizar las imágenes de nuestra tienda
Está claro, y es algo que todos tenemos siempre presente, que una tienda online vive de mostrar los productos de la forma más real posible. Una buena imagen con una calidad y definición alta es muy importante a la hora de generar confianza en el cliente, ya que ayudan a describir y visualizar el producto de la forma más fidedigna posible. Esto es clave para evitar clientes insatisfechos o enfadados porque el producto comprado no se parece al que se veía en las imágenes, lo que podría provocar que se marchen a la competencia.
Cuantas más imágenes colguemos en nuestra tienda online añadimos más MB a la hora de cargar la página, lo que podría ocasionar, en caso de no estar bien optimizadas en cuanto a resolución y tamaño, una reducción en la velocidad de carga y provocar que nuestra web vaya más lenta.
Si te preguntas si esto es realmente importante, te podemos contestar en sólo una palabra: Sí. Ponte por un segundo en la piel de un comprador online que está esperando durante minutos a que la tienda online cargue para poder realizar su pedido. Es más que probable que desista y se vaya a otra tienda que funcione más rápido y no le haga perder su tiempo. Este problema producido por una velocidad lenta de carga es el culpable del aumento en el
porcentaje de rebote.
Por otro lado, Google también valora la velocidad de las páginas web por lo que si tu ecommerce tiene una velocidad de carga lenta, o muy lenta, tu reputación podría verse afectada lo que repercutirá en tu posicionamiento SEO.
Si todavía no sabes cómo mejorar el rendimiento de tu Prestashop lee cómo acelerar y optimizar el rendimiento de Prestashop.
Explicación de formato, resolución y tamaño de imagen
Como ya te hemos avanzado previamente, el conocimiento y el uso adecuado del formato de imágenes, así como el de su correcta resolución y tamaño, es muy importante para que nuestro ecommerce cargue rápido y esté bien optimizado. Por eso, te vamos a explicar de forma breve y sencilla qué significa cada término y los usos más adecuados que te puedes encontrar.
Formato
Existen diferentes tipos de formatos de imagen , aunque los más conocidos y habituales son: JPG, PNG y GIF. Cada uno de ellos aportarán diferencias en cuanto al nivel de calidad que tenga finalmente la imagen y, obviamente, esto también repercutirá en el peso final.
JPG . Este formato es el más usado y extendido a la hora de guardar imágenes. Su principal característica es que puede comprimir mucho el peso de una imagen sin perder ni el tono ni los colores originales de la imagen, aunque sí desecha ciertos detalles para poder crear un archivo más pequeño y manejable. Por poner un ejemplo, se puede guardar una imagen JPG con calidad entre 0 y 100, repercutiendo considerablemente en el peso ya que si la guardamos en 80 de calidad supondría un 20% menos de peso que guardando la misma imagen al 100 de calidad.
PNG . Si lo que queremos guardar es una imagen con algún tipo de transparencia, logos o imágenes con colores planos, la mejor opción es el PNG. No pierde apenas calidad en la compresión, y podemos elegir entre dos tipos dependiendo de nuestras necesidades: PNG-8 para iconos gráficos pequeños o imágenes simples y PNG-24
para fotografías o imágenes complejas.
GIF . Este formato de imagen no consigue comprimir a buena calidad puesto que está limitado a 256 colores, por lo que habitualmente sólo es usado si la imagen en cuestión tiene algún tipo de animación.
Resolución
Este apartado hace referencia al grado de detalle o calidad que tiene una imagen digital o impresa. Expresamos este valor mediante píxeles por pulgada (ppp), consiguiendo más calidad de imagen cuantos más píxeles por pulgada tenga la propia imagen.
Un punto a tener en cuenta, es el destino que va a tener nuestra imagen ya que no es lo mismo una imagen que va a ser utilizada de forma únicamente digital que una imagen que va a ser impresa, en cuyo caso se requiere de una mayor resolución para que la imagen mantenga la calidad. El soporte digital necesitará de una resolución de 72 ppp mientras que si el destino va a ser impreso la resolución ha de ser de 300 ppp.
Tamaño
Un error habitual es subir las imágenes con su tamaño por defecto a nuestra tienda e incluso, aumentar el mismo con la intención que de esa forma se vean mejor. Recuerda, que como ya te hemos mencionado, la calidad de imagen viene determinada por la resolución que tenga la misma o incluso el formato escogido. Sin embargo, a mayor tamaño
de imagen mayor peso.
Te proponemos que optimices tus imágenes al tamaño en que van a ser visualizadas en tu tienda online. De esta forma, disminuyes el peso lo máximo posible sin perder calidad. Y, por supuesto, nunca, y queremos decir nunca, aumentes el tamaño de una imagen; no sólo porque aumentarías el peso de la misma sino porque la volverías borrosa y pixelada.
Comprobar si necesitamos optimizar nuestras imágenes
Si has llegado hasta aquí, suponemos que tienes ya una noción muy clara de lo importante que es tener las imágenes de nuestra tienda online muy optimizadas para que la carga de la página sea lo más rápida posible. Por ello, te proponemos que uses la herramienta gratuita de Google, PageSpeed.
Esta herramienta te ayudará a comprobar la velocidad de carga de tu ecommerce simplemente introduciendo la url.
De esta forma, podrás ver un resumen junto con algunas sugerencias a mejorar o corregir, tanto para móvil como ordenador. En la opción “Elementos que debes corregir”, y dentro del apartado de optimizar imágenes, podrás ver qué imágenes sugiere Google que cambies el tamaño para corregir ese error.
Módulos para optimizar imágenes en Prestashop
Además de la opción de analizar nuestra imágenes con PageSpeed, tenemos a nuestra disposición herramientas que nos facilitarán la tarea de tener que optimizar nuestras imágenes. Algunos módulos que podemos encontrar entre el catálogo de Prestashop son los siguientes:
TinyPNG
Este módulo se encarga de reducir el tamaño de imágenes en formato PNG y JPG sin perder calidad y mejorando la velocidad de carga de nuestra página. Aunque el módulo es de pago, también tiene la opción de versión gratuita aunque con algunas limitaciones. Esta versión gratuita sólo da opción a comprimir 500 imágenes al mes, lo que será más que suficiente si tu tienda online dispone de pocos productos. Por su parte, la versión de pago, incluye además la opción de poder comprimir imágenes sin necesitar una clave API.
ImageOptim
Este módulo dispone de varios planes con distintos precios cada uno. Entre algunas de sus características encontramos la posibilidad de eliminar metadatos que no son necesarios pero que vienen con las cámaras digitales, así como eliminar también comentarios o imágenes embebidas. Además, comprime las imágenes sin perder calidad.
Herramientas externas a Prestashop
Computación en la nube y servidores proxy
Además de las herramientas que podemos utilizar desde Prestashop hay soluciones externas que permiten automatizar estos procesos con independencia del CMS que utilicemos. Por ejemplo, Cloudflare ofrece entre sus planes de subscripción (Optimización de imágenes con Polish™) la posibilidad de usar su sistema proxy para optimizar todas las imágenes de nuestro servidor de forma cómoda sin necesidad de dedicar tiempo a estas
labores.
Uso de scripts y librerías en el servidor
Si tenemos conocimientos avanzados y experiencia con lenguajes de programación como PHP, podemos instalar y ejecutar scripts periódicos que compriman nuestras imágenes como ImageMagick.
Conclusión final
Como hemos visto, la optimización de imágenes es un proceso habitual en todos los comercios electrónicos y un paso que se puede menospreciar acarreando importantes consecuencias. Utiliza alguna de las técnicas anteriores con las imágenes de tu tienda online y reduce así el tiempo de carga aumentando la velocidad de tu tienda.