Como otimizar fotos de produto para loja virtual

Como otimizar fotos de produto para loja virtual
5 (100%) 2 votes

Fotos são um fator crucial na taxa de conversão de seu e-commerce. Mas não adianta elas serem lindas. Elas devem ser otimizadas para o Google e otimizadas para performance.

Como otimizar fotos para performance (tamanho do arquivo)

As fotos de uma loja virtual padrão podem ter o tamanho de 1000 pixels de largura e 1000 pixels de altura. Com esse tamanho se consegue tem um excelente zoom. A melhor forma de exportar essas imagens no Photoshop é Salvá-las para web com qualidade 70.

Passo 1: Salvar para web

Vá em File > Save for Web (inglês) ou Arquivo > Salvar para web (português)

Salvar foto otimizada para web

Irá abrir um caixa com as configurações.

Passo 2: Reduzir a imagem em tamanho 1000 pixels x 1000 pixels

  • Selecione o formato para JPG
  • Marque a opção Progressive
  • Na opção Quality, digite 70.
  • Na opção Image Size deixe o cadeado habilitado, para que a imagem seja reduzida de forma proporcional. NUNCA desabilite o cadeado
  • No opção Image Size digite 1000 ou no W ou no H se sua imagem for quadrada. Se sua imagem for retangular, digite 1000  na opção W ou H que for maior.
  • Clicar em SALVAR
  • OBS: Se sua imagem original for menor que 1000 pixels, você não deve alterar nada no Image Size.

 

Otimizando foto para loja virtual

Como otimizar as fotos para o Google (nome do arquivo)

Assim que clicar em SAVE (SALVAR), você deverá escolher um nome otimizado para o Google. Isso é muito importante para ajudar o Google a entender a sua imagem e consequentemente ranquear sua loja virtual melhor.

Sugestões para o nome otimizado da imagem do exemplo:

iphone-capa-hitcase-transparente,jpg ou capa-iphone-transparente.jpg ou capinha-de-iphone-6-transparente.jpg

NUNCA salve suas fotos com nome como DSC89912121.jpg ou Image881201921212.jp pois esses nomes não ajudam o Google a ranquear seu site.

Resumo da otimização de fotos para loja Virtual que fizemos

 Imagem originalImagem otimizada
NomeDSC910291212.jpgcapa-iphone-6-hitcase-transparente.jpg
Tamanho em pixels2000 px de X 2000 px2000 px de X 2000 px
Tamanho em Kb855 Kb113 Kb (redução de 86%)

Baixe a Imagem original

Baixe a Imagem otimizada

Gostou do conteúdo ou tem dúvidas? Comente abaixo.

Bruno Camargos é especialista em Usabilidade e Design Centrando no Usuário. Dedica-se a aumentar as taxas de conversão dos clientes da Multiweb.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *