WooCommerce – Modelo de formato de imagem para produtos

Neste post explico uma maneira de como padronizar o formato de imagem do seu produto.

Regras para padronizar o formato da imagem

Veja abaixo o padrão que eu criei. Você pode criar seu próprio padrão, o que estou sugerindo não é regra, é uma ideia:

  • O arquivo de imagem final deve ser quadrado. Ou seja, a largura em pixels deve ser igual à altura em pixels;
  • A foto do produto não deve ficar colada nas arestas/bordas da figura completa;
  • Deve existir uma margem/espaço entre a foto do produto e as arestas/bordas da figura completa. A margem de cima deve ser igual a debaixo. As margens da esquerda e direita também devem ser iguais, pois ao final o produto ficará centralizado;
  • O tamanho total final do seu arquivo de imagem não precisa ultrapassar 1500 (largura) x 1500 (altura) pixels. Além disso, não é legal que fique menor do que 600 (largura) x 600 (altura) pixels. Sempre que possível procure seguir um “meio termo” dando preferência para tamanhos maiores;
  • Veja o resultado ilustrado abaixo.

Tamanho total em pixels da imagem: 644 x 747
Antes (errado).
Tamanho total em pixels da imagem: 644 x 747.


Tamanho total em pixels da imagem: 900 x 900
Depois (certo).
Tamanho total em pixels da imagem: 900 x 900.


Tamanho total em pixels da imagem: 176 x 800
Antes (errado).
Tamanho total em pixels da imagem: 176 x 800.


Tamanho total em pixels da imagem: 900 x 900
Depois (certo).
Tamanho total em pixels da imagem: 900 x 900.

Por que padronizar?

  • Padronizando o tamanho de suas imagens você evita ter que cortar a imagem para que elas tenham a mesma altura no catálogo;
  • Formatando a imagem antes de fazer o upload para o servidor você garante o alinhamento dos produtos dentro da sua loja virtual. Seu e-commerce fica mais organizado e não será preciso nenhuma linha de código para deixar as alturas, das imagens dos produtos, iguais.
Comentários