El zoom en las imágenes de producto es una de las pocas funciones cuya ausencia se nota de inmediato. Un cliente que quiere comprobar una textura, un acabado o una inscripción y no puede ampliar considera que se le oculta algo.
La resolución de origen, condición previa
Ninguna función de zoom puede crear detalle que no existe en el archivo. Es la primera comprobación, y a menudo descarta el proyecto antes de empezar.
La regla: su imagen de origen debe medir dos o tres veces el tamaño máximo de visualización. Si su galería muestra la imagen a 600 píxeles de ancho, la fuente debe medir entre 1200 y 1800 píxeles. Para un zoom cómodo sobre el detalle, apunte a 2000 píxeles en el lado largo.
Un control rápido: abra una imagen de producto en una pestaña nueva y mire su tamaño real. En muchas tiendas los visuales se redimensionaron al importar y se quedan en 800 píxeles, lo que impide cualquier zoom útil.
Punto importante: ampliar una imagen de 800 píxeles mediante un tratamiento informático no restituye ningún detalle. El resultado parece borroso y produce el efecto contrario al buscado. Si sus fuentes son insuficientes, el trabajo empieza por la foto, no por el módulo.
Los tres comportamientos
La lupa al pasar el ratón. Un cuadro de zoom sigue el cursor y la ampliación aparece al lado o encima. Comportamiento clásico en escritorio, eficaz para inspeccionar rápidamente una zona.
La pantalla completa al hacer clic. La imagen se abre en superposición, con navegación entre visuales y posibilidad de ampliar más. Es el comportamiento más completo y más universal.
El pellizco en móvil. El gesto natural en pantalla táctil. Debe funcionar dentro de la vista a pantalla completa, nunca en la página entera.
La combinación que funciona: lupa al pasar el ratón en escritorio, apertura a pantalla completa al hacer clic en ambos formatos, pellizco disponible dentro de la pantalla completa.
Galería de Producto PrestaShop — Zoom HD, Pantalla Completa y VariantesGalería de producto de nueva generación: zoom HD, miniaturas verticales, pantalla completa móvil con pellizco y filtrado de imágenes por combinación.€69,00
El punto crítico en móvil
Es el error de implementación más frecuente y más penalizante.
Si el componente de zoom capta los gestos táctiles sobre la galería mostrada en el flujo de la página, entra en conflicto con el desplazamiento: el visitante que quiere desplazar la página se queda bloqueado sobre la imagen.
El comportamiento correcto: en el flujo de la página, la galería se recorre con deslizamiento horizontal y el desplazamiento vertical queda libre. El zoom solo se activa tras la apertura explícita de la pantalla completa, con un toque en la imagen o en un icono dedicado.
Segundo punto: el cierre de la pantalla completa debe ser evidente, con una cruz visible y el gesto de deslizar hacia abajo, que se ha convertido en un estándar.
La carga diferida de la alta definición
Cargar una imagen de 2000 píxeles en cada ficha de producto para un visitante que nunca hará zoom es un desperdicio de ancho de banda y degrada sus indicadores de rendimiento.
La buena arquitectura se basa en dos archivos por visual. Una versión de visualización, dimensionada para la galería, cargada de inmediato. Y una versión en alta definición, cargada solo al activar el zoom.
Dos precauciones de ejecución. Prevea un indicador de carga mientras se descarga la versión en alta definición: en una conexión lenta, dos segundos sin respuesta visual dan la impresión de que no pasa nada. Y precargue la imagen siguiente cuando el visitante está a pantalla completa, para que la navegación entre visuales siga siendo fluida.
El peso y el formato
Una imagen de 2000 píxeles en JPEG de calidad máxima puede pesar varios megabytes. Tres palancas para devolverla a un tamaño razonable.
Los formatos modernos, WebP y AVIF, reducen el peso entre un 30 y un 50 % con calidad percibida equivalente. Prevea un repliegue a JPEG para navegadores antiguos.
La calidad de compresión, en torno al 80 u 85 %, donde la diferencia visual se vuelve imperceptible mientras el peso cae claramente.
El redimensionado en origen: una foto de 6000 píxeles salida de una cámara profesional no aporta nada en línea. Limite a 2000 o 2500 píxeles en el momento de importar.
Lo que no hay que hacer
El zoom sobre una imagen demasiado pequeña. Es mejor no ofrecer zoom que abrir una versión pixelada. Prevea una detección: si la resolución es insuficiente, el zoom no se activa.
El zoom que tapa el botón de compra. En escritorio, una lupa que se muestra a la derecha de la imagen suele cubrir la columna de precio y de añadir al carrito. El zoom debe quedarse en la zona de imagen o en superposición modal.
El clic derecho desactivado. Algunos módulos bloquean el clic derecho para proteger las imágenes. No impide a nadie recuperarlas, molesta usos legítimos y degrada la accesibilidad.
El caso de las fotos de detalle
En algunos catálogos el zoom no basta y una foto dedicada es más eficaz.
Un primer plano de la costura de una prenda, de la conectividad de un aparato o del grano de un material aporta más que la ampliación de una foto de conjunto, porque se encuadró e iluminó para mostrar ese detalle.
La señal: si sus clientes plantean con regularidad la misma pregunta sobre un detalle, añada una foto en lugar de esperar que el zoom responda.
El módulo Galería de Producto para PrestaShop gestiona esta cadena en PrestaShop 8 y 9: zoom en alta definición con carga diferida de la versión ampliada, comportamiento a pantalla completa adaptado al táctil sin conflicto con el desplazamiento, y desactivación automática del zoom cuando la resolución de origen es insuficiente.