Optimización de PrestaShop: trabajar las imágenes de tus fichas de producto
[Actualización : publicado inicialmente el 16 de junio de 2020, este artículo se actualizó el 11 de septiembre de 2023]
La gestión de las imágenes en tus páginas juega un papel fundamental en el rendimiento global de tu tienda PrestaShop. Las imágenes de las fichas de producto, aunque varían en número y tamaño, requieren una atención especial para garantizar un resultado visual profesional sin comprometer la velocidad de carga de las páginas.
Es fundamental entender que las imágenes demasiado pesadas tienen un impacto directo en el tiempo de visualización de las páginas, lo que puede sobrecargar la infraestructura de hosting de tu sitio. Un tiempo de carga prolongado también aumenta el riesgo de que los visitantes abandonen la página antes de que termine de cargar por completo.
A menudo, reducir el peso de una imagen se asocia con una pérdida de calidad visual, sobre todo para los usuarios con poca experiencia en la gestión de imágenes. Sin embargo, es posible optimizar el peso de las imágenes conservando su calidad, aplicando buenas prácticas y utilizando los ajustes adecuados disponibles en el back office de PrestaShop.
Con esto en mente, vamos a repasar las características esenciales de las imágenes de tus productos, sin olvidar la importancia de una configuración adecuada en tu back office de PrestaShop para maximizar el impacto positivo de las imágenes en el rendimiento global de tu sitio.
La elección de las imágenes de producto
Si haces tú mismo tus fotografías, las imágenes que obtengas dependerán de la calidad de resolución de tu cámara. Hoy en día, muchas cámaras o teléfonos móviles ofrecen un resultado visual de alta calidad. Esto está muy bien en sí mismo, pero también es algo que hay que controlar. El tamaño y la resolución de las imágenes tomadas directamente con una cámara, sin procesar, suelen ser muchas veces demasiado grandes para un formato web o móvil.
Una vez hechas tus fotografías y cargadas en tu ordenador, comprueba las dimensiones y resoluciones de los archivos.
Las dimensiones (en píxeles), o tamaño, corresponden al número total de píxeles en el ancho y el alto de la imagen.
La resolución (en ppp o dpi) expresa el nivel de detalle de una imagen. Cuanto mayor sea el número de dpi, mayor será la resolución.
En cualquier caso, una imagen con grandes dimensiones y una alta resolución tendrá un peso muy elevado, especialmente para la web.
Por ejemplo, una imagen de 2000 píxeles de ancho con una resolución de 300 dpi alcanzará fácilmente un peso de varios MB, lo que puede provocar un tiempo de carga innecesariamente largo.
Si las imágenes de tus productos provienen directamente de tus proveedores, es probable que ya estén tratadas para la web. Aun así, tómate el tiempo de comprobar su tamaño y peso antes de incorporarlas a tu catálogo.
Retoca tus imágenes
Existen numerosos programas disponibles para trabajar el tamaño y el peso de las imágenes. El objetivo es reducir el peso de una imagen manteniendo unas dimensiones adecuadas para destacar tus productos y conservando una resolución que garantice un resultado nítido.
Si dispones de Photoshop, uno de los programas de retoque de imágenes más populares, ya sabes que ofrece funciones para realizar estos ajustes al guardar las imágenes. Sin embargo, no necesitas ser un experto en retoque de imágenes para llevar a cabo esta tarea. Existen soluciones más económicas, incluso gratuitas, igualmente eficaces para estas operaciones, como XnView, PhotoFiltre, GIMP, Pixlr X, etc.
Además, es posible configurar transformaciones por lotes para procesar varias imágenes al mismo tiempo, lo que permite ahorrar tiempo en el proceso.
La dimensión adecuada
Cuando añades tu imagen a un producto, subes una sola imagen y PrestaShop se encarga de generar los distintos formatos de miniatura.
De media, las imágenes visibles para presentar un artículo en la página de ficha de producto miden entre 350 y 450 píxeles de ancho.
Para lograr un buen efecto visual, debes subir una imagen con una dimensión igual o superior al tamaño más grande que se muestra en tu sitio. Si no es así, el resultado visual de tu imagen no será de buena calidad.
En tu sitio PrestaShop, las zonas de imagen suelen definirse en forma cuadrada.
Si tus imágenes de producto no son cuadradas, se integrarán de forma proporcional en la zona de visualización.
La imagen del producto sobre fondo azul es de tipo paisaje, con un ancho y alto iniciales de 1000 px por 600 px. Al integrarla, estos valores se recalculan automáticamente para mostrar la imagen correctamente dentro del cuadrado sobre fondo blanco.
Para un resultado armonioso, lo ideal es disponer de imágenes que mantengan siempre las mismas proporciones, ya sea en formato cuadrado, retrato o paisaje, con fondos idealmente homogéneos.
El formato de imagen adecuado
Existe un gran número de formatos de imagen. No todos serán aceptados en tu back office, según las versiones y temas que utilices en PrestaShop.
En tu panel de control, se te propondrá el uso de los formatos PNG o Jpeg.
El PNG se usa a menudo cuando necesitas transparencia en tu imagen (un logotipo, por ejemplo).
El Jpeg tiene una muy buena tasa de compresión, pero a menudo revela los defectos visuales de las imágenes.
El PNG es menos eficiente en compresión, pero su resultado será de mayor calidad.
Ten en cuenta también que puedes cargar varias imágenes en una ficha de producto y que cada imagen se suma al peso total de la página. Cuanto más te esfuerces en reducir el peso de cada imagen en unos pocos KB, más garantizarás un tiempo de carga correcto para tu página de producto.
 [Actualización : El formato WEBP]
El formato WebP es una tecnología de imagen desarrollada por Google, diseñada para reducir el tamaño de los archivos de imagen conservando la calidad visual. Estas son sus características clave:
Aunque WebP no es compatible de forma nativa con PrestaShop, existen módulos que te permiten utilizarlo. Sin embargo, es importante tener en cuenta que deben cumplirse ciertas condiciones, en particular disponer de una versión de PHP igual o superior a 5.6. |
Los ajustes del panel de PrestaShop
En tu panel de control (Menú Preferencias > imágenes), puedes gestionar las preferencias de tamaño de las imágenes.
Aquí tienes una vista general de todos los tipos de imagen y los tamaños que PrestaShop gestiona automáticamente: 
Para las imágenes de producto, existen 5 tipos de imagen por defecto:
Small: en el carrito
Medium: en la ficha de producto, en la zona de novedades y vistos recientemente
Home: detalle de una categoría, productos destacados en la primera página de la tienda, o búsqueda de un producto
Large: visualización grande del producto en la ficha
Thickbox: visualización detallada del producto, el zoom.
Los valores por defecto pueden variar según la versión de PrestaShop o el tema que utilices.
Si el valor de redimensionamiento automático asignado a las imágenes que se muestran en las páginas de producto no te conviene, puedes modificarlo.
Y una vez modificado, deberás regenerar las miniaturas yendo al último apartado del menú Preferencias > Imágenes.
Se recomienda elegir cuidadosamente el formato que se va a regenerar, empezando por seleccionar la categoría de imagen (en este caso, «Productos») y precisando después el formato específico (por ejemplo, «large_default» como se muestra en la captura de pantalla anterior).
Es importante tener en cuenta que esta operación puede volverse compleja según el volumen de imágenes a procesar, lo que puede generar una carga significativa en el servidor. Por eso te recomendamos ponerte en contacto con tu agencia o tu proveedor para realizar esta operación de forma controlada y eficaz.
Gestionar las opciones de generación de imágenes
Además de los distintos tipos de imagen y la posibilidad de regenerar las miniaturas, dispones de opciones adicionales que puedes configurar.
Es aquí, en particular, donde te recomendamos seleccionar la opción «Usar PNG solo si la imagen base está en formato PNG.»
Esto permite limitar las posibles pérdidas de calidad provocadas por un cambio de formato.
Para mantener una resolución satisfactoria, se recomienda seleccionar una compresión JPEG superior a 80 y una compresión PNG igual o inferior a 7.
Es fundamental encontrar un equilibrio entre un resultado visual estéticamente atractivo y un peso de imagen razonable, para evitar sobrecargar la página. Te animamos a hacer pruebas con distintos tamaños y formatos de imagen para evaluar las diferencias y comprobar cómo se mostrarán estas imágenes en tu sitio. Este enfoque te ayudará a conseguir el mejor equilibrio entre calidad visual y rendimiento de carga.
Usa un CDN (Content Delivery Network)
Más allá del tratamiento de tus imágenes, piensa en aprovechar otras posibilidades para optimizar el rendimiento de tu tienda online.
En tu panel de PrestaShop, esto se llama el servidor de medios y requiere activar previamente los CCC, es decir, la concatenación, la compresión y el almacenamiento en caché.
Menú: Parámetros avanzados > Rendimiento > Servidores de medios
El objetivo aquí es optimizar la carga de los archivos, incluidas las imágenes, permitiendo que tu navegador las distribuya de forma eficiente entre 3 subdominios del mismo servidor, o utilizando servidores CDN externos. En teoría, este enfoque debería traducirse en una mejora notable del rendimiento de carga de las páginas.
Sin embargo, es importante tener en cuenta que la implementación de un CDN puede ser más compleja que otros ajustes en PrestaShop. Por ello, te recomendamos recurrir a nuestros equipos para llevar a cabo este tipo de intervención.
Si quieres saber más o tienes alguna pregunta, no dudes en CONTACTARNOS. Nuestro equipo estará encantado de ayudarte.
¡Contáctanos!