Como otimizar imagens do meu e-commerce sem perder qualidade?

As imagens são responsáveis por uma grande fatia do sucesso de uma loja virtual. Isso porque são elas que criam o elo entre o produto e o desejo de compra.

Num e-commerce, não há uma pessoa mostrando o produto. O único meio do seu potencial cliente saber mais do que você é através das informações e fotos que você publicou.

Mais que levar segurança ao seu cliente, uma imagem de qualidade faz que ele sonhe com a pessoa que ele vai ser quando adquirir o seu produto. É o que evoca o desejo da compra!

Na maioria das vezes, a etapa de publicar fotos com boa qualidade é negligenciada. Por consequência, a loja virtual perde um ranqueamento importante nos buscadores.

Se você quer ter sucesso com sua loja virtual, deve saber como otimizar imagens para e-commerce. Para isso preparamos esse conteúdo com algumas dicas de como usar de maneira correta o Photoshop e extrair o máximo de qualidade. Vamos lá!

Conhecendo o recurso “Salvar para web”

O “Salvar para Web” (“Save for Web”) te ajuda a enviar suas imagens para a web sem dor de cabeça. O recurso permite mudar o tamanho da imagem e escolher o formato de arquivo mais adequado (GIF, JPEG, PNG e WMP) sem perda significativa de qualidade. Com ela, é possível obter os melhores resultados para todos os métodos de compressão.

Ela permite ainda comparar os resultados das imagens em preview. Assim, caso o formato GIF seja escolhido, por exemplo, é possível ver no preview o que a opção traria em relação à qualidade da imagem.

Passo 1.

Abra a imagem que será trabalhada em “Arquivo” > “Abrir” (“File” > “Open”). Você pode também optar pelo atalho de teclado Ctrl+O. Agora, vá em “Arquivo” > “Salvar para Web” (“File” > “Save for Web”);

Passo 2.

Agora vamos conhecer a caixa em seus detalhes e o que podemos fazer com ela;

Passo 3.

No canto esquerdo da caixa estão dispostas algumas ferramentas. Vamos a elas:

. Ferramenta Mão (“Hand Tool”): permite clicar e arrastar a imagem dentro do preview que temos ao lado;
. Ferrameta Fatiar (“Slice Tool”): permite selecionar os slices, caso você tenha fatiado sua imagem anteriormente;
. Ferramenta Zoom (“Zoom Tool”): permite aproximar ou distanciar sua imagem dentro da caixa de preview;
. Ferramenta Conta Gotas (“Eyedropper Tool”): permite pegar uma amostra de cor da imagem no preview;
. Cor do Conta Gotas (“Eyedropper Color”): informa a cor selecionada pela ferramenta Conta Gotas;
. Alternar visibilidade das fatias (“Toggle Slices Visibilty”): alterna o modo de visibilidade dos slices caso sua imagem tenha sido fatiada no Photoshop.

Passo 4.

Ao lado, temos as abas com opções de visualização que podem ajudar bastante na hora de otimizar o arquivo. A primeira opção é a “Original”, na qual vemos a imagem sem nenhuma alteração, com as informações como nome e tamanho (em MB) na parte inferior da janela;

Passo 5. A próxima aba se chama “Optimized” e mostra o arquivo otimizado de acordo com os ajustes feitos. No rodapé temos as informações da imagem como nome, tamanho (em MB), tempo de carregamento em velocidades de conexão que podemos definir, formato e qualidade do arquivo;

Passo 6.

A próxima aba, chamada “2-Up”, divide a tela de preview em duas, mostrando a imagem original e a imagem otimizada com todas as informações citadas anteriormente;

Passo 7.

A última aba se chama “4-Up”, e divide a tela de preview em quatro partes. A primeira mostra a imagem original, e as demais mostram a imagem otimizada em diferentes tipos de compressão e qualidade, dependendo do formato que você escolher;

Passo 8. Na parte inferior da caixa, encontramos as opções de “Zoom”, informações de cor e a opção de preview em diferentes navegadores;

Passo 9.

No canto direito da caixa de “Salvar para Web” você encontra as opções de formatos para exportação. É possível salvar a imagem como GIF, JPEG, PNG e WMP, cada formato com suas características e opções de configuração próprias que influenciarão no tamanho final do arquivo;

Passo 10.

Logo abaixo temos a Tabela de Cores (“Color Table”). Dependendo do formato de imagens escolhido para exportar sua imagem, a tabela mostrará a paleta de cores utilizada. Abaixo, estão disponíveis informações como tamanho, porcentagem e qualidade. É possível também alterar o tamanho e qualidade do redimensionamento para a exportação;

Passo 11.

Na parte inferior temos as opções de Animação (“Animation”), que ficarão disponíveis caso a imagem seja exportada como GIF animado (e contenha frames). Ali, você pode definir se a animação rodará apenas uma vez ou em sequência, e dar o preview pelos botões de controle. Logo abaixo, temos as opções de alvar o arquivo otimizado, cancelar e apenas confirmar as mudanças sem salvar o arquivo.

​

Esperamos que tenha gostado dessa nossa sugestão… Continuamos por aqui caso precise de nossas soluções!  Até a próxima 🙂