Imagens de produto pesadas no PrestaShop: tamanhos, miniaturas e carregamento diferido

Abre no telemóvel uma categoria com quarenta produtos e a página demora a aparecer. Na maioria das lojas, o culpado não é o servidor nem o PHP: são as imagens. Fotos carregadas com a resolução da câmara, miniaturas geradas num tamanho que o tema já não usa, formatos pesados e todas as imagens a descarregar ao mesmo tempo, embora o cliente só veja as quatro primeiras.

Este artigo trata de como o PrestaShop gere as imagens de produto e do que pode ajustar.

Como o PrestaShop gera as imagens

Quando carrega uma foto num produto, o PrestaShop guarda a original e, a partir dela, gera uma cópia para cada tamanho de imagem definido para produtos: a miniatura da listagem, a do carrinho, a grande da página de produto, a da galeria, etc. O tema pede em cada sítio o tamanho que lhe corresponde.

Os tamanhos configuram-se no back-office, nas definições de imagens (no menu Design nas versões recentes). Cada um tem nome, largura, altura e os tipos de conteúdo a que se aplica: produtos, categorias, marcas, fornecedores ou lojas.

Isto tem duas consequências:

• O peso que o cliente recebe depende do tamanho gerado, não da foto original. Uma foto enorme não pesa na listagem se a miniatura for pequena.
• Se um tamanho não coincidir com o espaço que o tema lhe dá no ecrã, o navegador descarrega uma imagem maior do que o necessário e reduz-a, ou uma mais pequena e amplia-a (e fica desfocada).

Tamanhos que sobram e tamanhos que faltam

Com os anos, uma loja acumula tamanhos de imagem de temas anteriores, de módulos que já não existem ou de testes. Cada tamanho a mais significa:

• Mais um ficheiro por cada foto de produto, que ocupa disco e cópias de segurança.
• Mais tempo a carregar uma imagem e a regenerar.

Reveja que tamanhos o seu tema usa realmente (os seus templates e o seu ficheiro de configuração indicam-nos) e quais usam os seus módulos. Os que ninguém usa podem ser eliminados, mas confirme antes numa cópia: um módulo que pede um tamanho que já não existe mostra imagens partidas.

E ao contrário: se o tema mostrar as miniaturas da listagem num tamanho maior do que o gerado, por exemplo depois de um redesenho, as fotos ficam desfocadas. Ajuste o tamanho ao espaço real, tendo em conta os ecrãs de alta densidade.

Quando é preciso regenerar as miniaturas

As miniaturas existentes não mudam sozinhas quando altera um tamanho. É preciso regenerá-las, no mesmo ecrã das definições de imagens. É necessário quando:

• Muda as dimensões de um tamanho.
• Acrescenta um tamanho novo (por exemplo, ao mudar de tema).
• Muda o formato de saída ou a qualidade de compressão.
• Restaura imagens a partir de uma cópia e faltam miniaturas.

A foto original também importa

Embora o cliente não descarregue a original, ela afeta:

• O disco e as cópias. Fotos de vários megas multiplicadas por milhares de produtos são gigas copiados todas as noites.
• O tempo de geração. Redimensionar uma imagem enorme consome memória e CPU; com fotos muito grandes, o processo pode falhar por falta de memória.
• O zoom de algumas páginas de produto, que servem de facto a imagem grande.

Uma boa prática é carregar as fotos já reduzidas a um tamanho razoável para o maior uso que a loja tenha (o zoom da página de produto), em vez de diretamente da câmara.

Formatos

• JPEG para fotografias. Com uma qualidade bem escolhida, a poupança face à qualidade máxima é grande e a diferença mal se nota.
• PNG só se precisar de transparência ou se for um gráfico com cores planas. Para fotos de produto, pesa muito mais do que um JPEG.
• WebP e outros formatos modernos oferecem menos peso com a mesma qualidade, e as versões recentes do PrestaShop podem gerá-los. Confirme que o seu tema e os seus módulos os suportam antes de os ativar.

Mudar de formato é outra razão para regenerar, com as mesmas precauções de antes.

Carregamento diferido

Numa categoria longa, o cliente vê ao início poucas imagens. As restantes estão mais abaixo e talvez nunca chegue a vê-las. O carregamento diferido (lazy loading) faz com que o navegador só descarregue as imagens quando se aproximam do ecrã.

• Os navegadores modernos fazem-no sozinhos com o atributo loading="lazy" na etiqueta da imagem. Muitos temas já o incluem nas listagens.
• Não aplique carregamento diferido à primeira imagem visível: a foto principal da página de produto ou as primeiras miniaturas da categoria. Atrasá-las piora o tempo em que se desenha o mais importante da página.
• Indique nas imagens a largura e a altura (ou reserve o espaço com CSS), para que a página não salte quando acabam de carregar.

Uma revisão rápida

1. Abra uma categoria e uma página de produto com as ferramentas do navegador e veja quanto pesam as imagens face ao resto da página.
2. Compare o tamanho em píxeis das miniaturas descarregadas com o que ocupam no ecrã.
3. Reveja a lista de tamanhos de imagem e retire os que ninguém usa (primeiro numa cópia).
4. Confirme que as imagens fora do ecrã têm carregamento diferido e que a principal não tem.
5. Se mudar alguma coisa, regenere fora de horas e verifique que não ficam imagens partidas.

Como resolver no PrestaShop

As imagens são uma parte; o resto do peso da página costuma estar no CSS e no JavaScript. O RKR OptiMatters faz um inventário dos CSS e JS que cada tipo de página carrega, com o seu peso e o módulo de onde vêm, e permite-lhe retirar os que sobram, aplicar defer ou async, atrasar os scripts de terceiros até à primeira interação e servir as Google Fonts a partir do seu servidor; tem um modo de teste para comparar a página com e sem otimização. O All In One Cache inclui, dentro da sua cache de página, um aligeiramento opcional com minificação de HTML, JS e CSS em linha e carregamento diferido de imagens, além da cache de página completa, da cache de consultas em Redis e da gestão do OPcache.