O zoom nas imagens de produto é uma das raras funções cuja ausência se nota de imediato. Um cliente que quer verificar uma textura, um acabamento ou uma inscrição e que não consegue ampliar acha que lhe estão a esconder alguma coisa.
A resolução de origem, condição prévia
Nenhuma função de zoom consegue criar detalhe que não existe no ficheiro. É a primeira verificação, e muitas vezes desqualifica o projeto antes de começar.
A regra: a sua imagem de origem deve ter duas a três vezes o tamanho máximo de apresentação. Se a sua galeria mostra a imagem a 600 pixels de largura, a origem deve ter entre 1200 e 1800 pixels. Para um zoom confortável ao pormenor, aponte a 2000 pixels no lado maior.
Um controlo rápido: abra uma imagem de produto num separador novo e veja o tamanho real. Em muitas lojas, os visuais foram redimensionados na importação e ficam pelos 800 pixels, o que impede qualquer zoom útil.
Ponto importante: ampliar uma imagem de 800 pixels por tratamento informático não restitui detalhe nenhum. O resultado parece desfocado e produz o efeito contrário ao pretendido. Se as suas origens são insuficientes, o trabalho começa pela fotografia, não pelo módulo.
Os três comportamentos
A lupa ao passar o rato. Um quadrado de zoom segue o cursor, a ampliação aparece ao lado ou por cima. Comportamento clássico em computador, eficaz para inspecionar rapidamente uma zona.
O ecrã inteiro ao clique. A imagem abre em sobreposição, com navegação entre os visuais e possibilidade de ampliar mais. É o comportamento mais completo e mais universal.
O gesto de beliscar em mobile. O gesto natural em ecrã tátil. Tem de funcionar dentro da vista em ecrã inteiro, nunca na página toda.
A combinação que funciona: lupa ao passar o rato em computador, abertura em ecrã inteiro ao clique nos dois formatos, gesto de beliscar disponível dentro do ecrã inteiro.
Galeria de Produto PrestaShop: Zoom HD, Ecrã Inteiro e Filtro de VariantesGaleria de produto de nova geração: zoom HD, miniaturas verticais, ecrã inteiro no telemóvel com pinça e filtragem das imagens por variante.69,00€
O ponto crítico em mobile
É o erro de implementação mais frequente e mais penalizante.
Se o componente de zoom captar os gestos táteis na galeria apresentada no fluxo da página, entra em conflito com o deslocamento: o visitante que quer percorrer a página fica preso na imagem.
O comportamento correto: no fluxo da página, a galeria percorre-se por deslize horizontal e o deslocamento vertical fica livre. O zoom só se ativa depois da abertura explícita do ecrã inteiro, por toque na imagem ou num ícone dedicado.
Segundo ponto: o fecho do ecrã inteiro tem de ser óbvio, com uma cruz visível e o gesto de deslize para baixo, que se tornou um padrão.
O carregamento diferido da alta definição
Carregar uma imagem de 2000 pixels em cada ficha de produto para um visitante que nunca vai usar o zoom é um desperdício de largura de banda, e degrada os seus indicadores de desempenho.
A boa arquitetura assenta em dois ficheiros por visual. Uma versão de apresentação, dimensionada para a galeria, carregada de imediato. E uma versão de alta definição, carregada só quando o zoom é acionado.
Duas precauções de execução. Preveja um indicador de carregamento durante a transferência da versão de alta definição: numa ligação lenta, dois segundos sem retorno visual dão a impressão de que nada acontece. E pré-carregue a imagem seguinte quando o visitante está em ecrã inteiro, para que a navegação entre visuais continue fluida.
O peso e o formato
Uma imagem de 2000 pixels em JPEG de qualidade máxima pode pesar vários megabytes. Três alavancas para a trazer a um tamanho razoável.
Os formatos modernos, WebP e AVIF, reduzem o peso em 30 a 50 % com qualidade percebida equivalente. Preveja um recuo para JPEG nos navegadores antigos.
A qualidade de compressão, à volta de 80 a 85 %, onde a diferença visual se torna impercetível enquanto o peso cai nitidamente.
O redimensionamento na origem: uma foto de 6000 pixels saída de uma máquina profissional não tem interesse nenhum online. Limite a 2000 ou 2500 pixels no momento da importação.
O que não se deve fazer
O zoom numa imagem demasiado pequena. Mais vale não oferecer zoom do que abrir uma versão pixelizada. Preveja uma deteção: se a resolução for insuficiente, o zoom não se ativa.
O zoom que tapa o botão de compra. Em computador, uma lupa que aparece à direita da imagem tapa muitas vezes a coluna de preço e de adição ao carrinho. O zoom deve ficar na zona da imagem ou em sobreposição modal.
O clique direito desativado. Alguns módulos bloqueiam o clique direito para proteger as imagens. Isso não impede ninguém de as obter, incomoda os usos legítimos e degrada a acessibilidade.
O caso das fotos de pormenor
Nalguns catálogos, o zoom não chega e uma foto dedicada é mais eficaz.
Um grande plano da costura numa peça de roupa, das ligações num aparelho ou do grão num material traz mais do que uma ampliação de uma foto de conjunto, porque foi enquadrado e iluminado para mostrar esse pormenor.
A referência: se os seus clientes fazem regularmente a mesma pergunta sobre um pormenor, acrescente uma foto em vez de esperar que o zoom responda.
O módulo Galeria de Produto para PrestaShop gere esta cadeia no PrestaShop 8 e 9: zoom de alta definição com carregamento diferido da versão ampliada, comportamento em ecrã inteiro adaptado ao tátil sem conflito com o deslocamento, e desativação automática do zoom quando a resolução de origem é insuficiente.
