Imágenes de producto pesadas en PrestaShop: tamaños, miniaturas y carga diferida

Abres una categoría con cuarenta productos en el móvil y la página tarda en aparecer. En la mayoría de tiendas, el culpable no es el servidor ni el PHP: son las imágenes. Fotos subidas a la resolución de la cámara, miniaturas generadas con un tamaño que el tema ya no usa, formatos pesados y todas las imágenes descargándose a la vez aunque el cliente solo vea las cuatro primeras.

Este artículo va de cómo trata PrestaShop las imágenes de producto y qué puedes ajustar.

Cómo genera PrestaShop las imágenes

Cuando subes una foto a un producto, PrestaShop guarda la original y, a partir de ella, genera una copia por cada tamaño de imagen definido para productos: la miniatura del listado, la del carrito, la grande de la ficha, la de la galería, etc. El tema pide en cada sitio el tamaño que le corresponde.

Los tamaños se configuran en el back-office, en los ajustes de imágenes (en el menú de Diseño en las versiones recientes). Cada uno tiene nombre, anchura, altura y los tipos de contenido a los que se aplica: productos, categorías, marcas, proveedores o tiendas.

Esto tiene dos consecuencias:

• El peso que recibe el cliente depende del tamaño generado, no de la foto original. Una foto enorme no pesa en el listado si la miniatura es pequeña.
• Si un tamaño no coincide con el espacio que el tema le da en pantalla, el navegador descarga una imagen más grande de lo necesario y la reduce, o una más pequeña y la amplía (y se ve borrosa).

Tamaños que sobran y tamaños que faltan

Con los años, una tienda acumula tamaños de imagen de temas anteriores, de módulos que ya no están o de pruebas. Cada tamaño de más significa:

• Un fichero más por cada foto de producto, que ocupa disco y copias de seguridad.
• Más tiempo al subir una imagen y al regenerar.

Revisa qué tamaños usa realmente tu tema (sus plantillas y su fichero de configuración los nombran) y cuáles usan tus módulos. Los que no use nadie se pueden eliminar, pero compruébalo antes en una copia: un módulo que pide un tamaño que ya no existe muestra imágenes rotas.

Y al revés: si el tema muestra las miniaturas del listado a un tamaño mayor que el tamaño generado, por ejemplo tras un rediseño, las fotos se ven borrosas. Ajusta el tamaño al espacio real, teniendo en cuenta las pantallas de alta densidad.

Cuándo hay que regenerar las miniaturas

Las miniaturas existentes no cambian solas cuando modificas un tamaño. Hay que regenerarlas, desde la misma pantalla de ajustes de imágenes. Hace falta cuando:

• Cambias las dimensiones de un tamaño.
• Añades un tamaño nuevo (por ejemplo, al cambiar de tema).
• Cambias el formato de salida o la calidad de compresión.
• Restauras imágenes desde una copia y faltan miniaturas.

La foto original también importa

Aunque el cliente no descargue la original, sí afecta:

• Al disco y a las copias. Fotos de varios megas multiplicadas por miles de productos son gigas que se copian cada noche.
• Al tiempo de generación. Redimensionar una imagen enorme consume memoria y CPU; con fotos muy grandes, el proceso puede fallar por memoria.
• Al zoom de algunas fichas, que sí sirven la imagen grande.

Una buena práctica es subir las fotos ya reducidas a un tamaño razonable para el mayor uso que tenga la tienda (el zoom de la ficha), en lugar de directamente desde la cámara.

Formatos

• JPEG para fotografías. Con una calidad bien elegida, el ahorro frente a la máxima calidad es grande y la diferencia apenas se ve.
• PNG solo si necesitas transparencia o es un gráfico con colores planos. Para fotos de producto, pesa mucho más que un JPEG.
• WebP y otros formatos modernos ofrecen menos peso con la misma calidad, y las versiones recientes de PrestaShop pueden generarlos. Comprueba que tu tema y tus módulos los soportan antes de activarlos.

Cambiar de formato es otra razón para regenerar, con las mismas precauciones de antes.

Carga diferida

En una categoría larga, el cliente ve al principio unas pocas imágenes. Las demás están más abajo y quizá nunca llegue a verlas. La carga diferida (lazy loading) hace que el navegador solo descargue las imágenes cuando se acercan a la pantalla.

• Los navegadores modernos lo hacen solos con el atributo loading="lazy" en la etiqueta de la imagen. Muchos temas ya lo incluyen en los listados.
• No apliques carga diferida a la primera imagen visible: la foto principal de la ficha o las primeras miniaturas de la categoría. Retrasarlas empeora el tiempo en que se pinta lo más importante de la página.
• Indica en las imágenes su anchura y altura (o reserva el espacio con CSS), para que la página no salte cuando terminan de cargar.

Una revisión rápida

1. Abre una categoría y una ficha con las herramientas del navegador y mira cuánto pesan las imágenes frente al resto de la página.
2. Compara el tamaño en píxeles de las miniaturas descargadas con el que ocupan en pantalla.
3. Revisa la lista de tamaños de imagen y quita los que nadie usa (en una copia primero).
4. Comprueba que las imágenes fuera de pantalla llevan carga diferida y que la principal no.
5. Si cambias algo, regenera fuera de horas y revisa que no queden imágenes rotas.

Cómo resolverlo en PrestaShop

Las imágenes son una parte; el resto del peso de la página suele estar en el CSS y el JavaScript. RKR OptiMatters hace un inventario de los CSS y JS que carga cada tipo de página, con su peso y el módulo del que vienen, y te deja quitar los que sobran, aplicar defer o async, retrasar los scripts de terceros hasta la primera interacción y servir las Google Fonts desde tu servidor; tiene un modo de prueba para comparar la página con y sin optimizar. All In One Cache incluye, dentro de su caché de página, un aligerado opcional con minificación de HTML, JS y CSS en línea y carga diferida de imágenes, además de la caché de página completa, la de consultas en Redis y la gestión de OPcache.