WooCommerce – Modelo de formato de imagem para produtos

🖼️ Qual o formato ideal para as imagens de produtos? Deixe o e-commerce mais organizado, fazendo com que os produtos do catálogo fiquem sempre alinhados.

Atualizado em 25/05/2015
Compartilhe

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

O formato final da foto, mostrado aqui, pode ser adquirido usando qualquer editor de imagens como, por exemplo, Paint, Photoshop, Illustrator.
A imagem, ao final de toda edição, deve obedecer uma dimensão padrão. Aqui, a título de exemplo, está sendo usado 900 pixels de largura por 900 pixels de altura (900×900).

Regras para padronizar o formato da imagem do produto

Veja abaixo um exemplo de padrão. Você pode criar seu próprio padrão, o que está sendo 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.
Antes (errado).
Tamanho total, em pixels, da imagem: 644×747.
Depois (certo).
Tamanho total, em pixels, da imagem: 900×900.
Antes (errado).
Tamanho total, em pixels, da imagem: 176×800.
Depois (certo).
Tamanho total, em pixels, da imagem: 900×900.

Por que ter um padrão para suas imagens?

  • 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.

Imagens: photography.tutsplus.com

Por <a href='https://dpw.ninja/author/filipe/' rel='dofollow' class='dim-on-hover'>Filipe Seabra</a>
Por Filipe Seabra
Full Stack Web Developer.

Comentários