Seu carrinho está vazio
Se você possui uma loja online, a otimização e redimensionamento de imagens é uma arte que deve ser dominada. Desde atrair clientes através do uso de imagens do Google até reduzir o tempo de carregamento do site, a otimização de imagens pode ser parte importante na construção de um e-commerce de sucesso.
Você já passou a noite acordado pensando nisto:
Neste post, responderei essas e outras questões. Prepare-se para conferir detalhes sobre 10 dicas essenciais de otimização e redimensionamento de imagens.
É muito fácil tirar centenas de fotos de produtos e preservar o nome de arquivo padrão que sua câmera cria para cada uma delas. Porém, antes manter esse hábito, vamos analisar por que ele não é uma boa ideia.
Quando falamos de SEO, é importante utilizar palavras-chave adequadas para ajudar sua página web a ficar bem classificada nos motores de busca. Criar nomes descritivos e ricos em palavras-chave é absolutamente fundamental para a otimização de imagens. Os motores de busca não apenas vasculham o texto da sua página, como também buscam por palavras-chave dentro dos nomes dos seus arquivos de imagens.
Vamos utilizar esta imagem como exemplo:
Você poderia utilizar o nome genérico que sua câmera criou para a imagem, como DCMIMAGE10.jpg. Entretanto, seria muito melhor renomear o arquivo:2012-Ford-Mustang-LX-Vermelho.jpg.
Pense ainda em como seus clientes costumam pesquisar por produtos no seu site. Quais padrões de nomes eles utilizam durante as buscas? No exemplo acima, os compradores de carros podem fazer suas buscas utilizando os seguintes termos:
Um bom hábito a ser adquirido é observar os dados analíticos do seu site para conferir quais padrões de frases seus clientes utilizam para realizar buscas. Determine os padrões de nomes mais comuns utilizados por eles e aplique essa fórmula ao processo de criação de nomes para suas imagens.
Se você não pretende entrar nesse nível de detalhamento, apenas certifique-se de utilizar boas palavras-chaves ao renomear suas imagens (e tente ser descritivo!).
As alt tags são uma alternativa de textoàsimagens, sempre que um navegador não consegue renderizá-las adequadamente. Mesmo quando uma imagem é renderizada, caso passe o cursor sobre ela, você poderá visualizar o texto da alt tag criada para essa imagem (dependendo das configurações do seu navegador).
O atributo alt também agrega valor de SEO ao seu site. Incluir alt tags apropriadas às imagens do seu site pode ajudar a melhorar a classificação dele nos motores de busca, através da associação de palavras-chave com imagens. Na verdade, o uso de alt tags é provavelmente a melhor forma para que os produtos do seu e-commerce sejam exibidos tanto nas buscas tradicionais quanto nas pesquisas de imagens do Google.
Vamos analisar o código-fonte de uma alt tag:
Quando o assunto é otimização de imagens, a prioridade #1 deve ser preencher cada alt tag de cada imagem de produto no seu site.
Por fim, sempre faça um controle de conformidade periódico no seu site. Analise o código-fonte das suas páginas web e confira se suas alt tags estão preenchidas.
Uma tendência comum atual é apresentar múltiplos ângulos do seu produto. Voltando para o exemplo do Ford Mustang, você não iria querer exibir apenas uma foto do carro, principalmente se estivesse tentando vendê-lo. Seria do seu interesse apresentar fotos do seguinte:
E a melhor forma de capitalizar sobre essas fotos adicionais é preencher suas alt tags. A forma de se fazer isso é através da criação de alt tags exclusivas para cada foto do produto:
A chave aqui é incluir descrições às suas alt tags básicas, para que os potenciais usuários que estiverem realizando buscas acabem acessando seu site. Caso faça esse trabalho extra, você será recompensado pelo Google com muitos buscadores famintos.
Você talvez deseje exibir imagens maiores aos seus visitantes, o que consiste em uma ótima melhoria na experiência do usuário. Mas tenha cuidado!
O que quer que você faça, não insira a maior imagem na sua página web e simplesmente redimensione a imagem ao reduzir as dimensões dela através do código-fonte. Isso aumentará o tempo de carregamento da sua página, devido ao tamanho maior do arquivo associado à imagem grande.
Ao invés disso, mantenha uma imagem menor e ofereça a opção de visualização da imagem ampliada em uma janela pop-up ou em uma página separada.
Considere isto:
Caso possua imagens que "escorrem" vagarosamente pela tela e demoram mais de 15 segundos para carregadar, bem, você pode se despedir daquele cliente em potencial!
Quando um cliente acessa seu site, carregá-lo poderá levar algum tempo, dependendo do tamanho dos seus arquivos. Especificamente com imagens, quanto maior o tamanho do arquivo, mais tempo a página leva para ser carregada. *Os lojistas da Shopify devem estar cientes de que nós comprimimos automaticamente as imagens, ou seja, isso não será problema para vocês.
Se você puder redimensionar a imagem para diminuir o tamanho dos arquivos de imagens na sua página web e aumentar a velocidade de carregamento da página, menos visitantes do seu site seguirão para outras páginas.
Uma forma de reduzir o tamanho dos arquivos de imagens é através do uso do comando "Salvar para a Web" no Adobe Photoshop. Ao utilizá-lo, ajuste para o menor tamanho de arquivo aceitável, prestando atenção à qualidade de imagem.
Mesmo que você não tenha o Adobe Photoshop, existem diversas ferramentas online que podem ser utilizadas para editar imagens. A própria Adobe possui um aplicativo online de edição de imagens no link photoshop.com. Essa ferramenta online não inclui todos os recursos da versão desktop do Adobe Photoshop, mas garante o básico da edição de imagens e não tem um custo alto.
Outras ótimas ferramentas online de edição de imagens são:
Finalmente, sempre há o GIMP. O GIMP é um programa de edição de imagens gratuito e de código aberto que pode ser executado no Windows, Mac ou Linux. Ele é capaz de fazer tudo o que o Photoshop faz, mas tende a ser um pouco mais estranho. Porém, tratando-se de uma aplicação gratuita de edição de imagens, nada é capaz de superá-lo.
Uma boa regra geral para imagens de e-commerce é tentar manter o tamanho dos seus arquivos de imagem abaixo de 70 kb. Isso pode ser difícil algumas vezes, principalmente com imagens maiores, mas chegarei nesse assunto em breve.
Existem três tipos comuns de arquivos utilizados para publicar imagens. São eles JPEG, GIF e PNG.
Vamos conferir os três tipos de arquivos e a forma como eles influenciam a mesma imagem:
Imagens JPEG (ou .jpg) são um tipo de arquivo relativamente antigo que de fato se tornou o tipo padrão de imagem da internet. As imagens JPEG podem ser comprimidas consideravelmente, o que resulta em imagens de qualidade com tamanho pequeno. Na imagem acima, o formato JPEG proporciona boa qualidade e tamanho reduzido.
Os GIFs (.gif) são imagens de menor qualidade em comparação aos JPEGs, utilizados para imagens mais simples, como ícones e imagens decorativas. Os GIFs também suportam animação. Quanto à otimização de imagens, vale a pena utilizar GIFs para imagens simples em uma página web (aquelas com apenas algumas cores). Porém, para imagens e fotos complexas, os GIFs nem sempre são tão atraentes – isso é principalmente verdadeiro com imagens maiores e mais impactantes.
O GIF do MacBook acima é um caso no qual é possível aproveitar o GIF. Isso se deve pelo fato de que a foto é suficiente pequena, situação na qual o GIF funciona bem.
As imagens PNG estão se tornando mais populares como alternativa aos GIFs. Os PNGs suportam muito mais cores do que os GIFs, além de não perder qualidade com novos salvamentos ao longo do tempo, como ocorre com os JPEGs. Embora o arquivo PNG esteja começando a ser mais utilizado, os arquivos podem possuir um tamanho muito maior do que seria possível encontrar nas imagens JPEG.
Perceba como a imagem PNG-24 possui um tamanho de arquivo mais de três vezes maior em relação à versão PNG-8. É por isso que você deve tomar muito cuidado com os PNGs.
Veja um exemplo extremo, no qual o tamanho da imagem foi mantido constante (24 kb) nos três formatos de arquivos:
Como você pode ver, o JPEG é claramente o vencedor aqui. GIFs e PNGs devem perder qualidade para poder manter tamanhos reduzidos.
Veja algumas dicas para se lembrar ao escolher entre formatos de arquivos:
A maioria dos programas de edição de imagens pode salvar imagens em qualquer um dos tipos de arquivos discutidos acima.
Muitos sites de e-commerce ainda utilizam imagens em miniatura. Elas proporcionam uma ótima maneira de se visualizar rapidamente as páginas de categorias, sem tomar muito espaço.
Miniaturas são ótimas, mas tome cuidado – elas podem ser um assassino silencioso do tempo de carregamento das suas páginas.
Elas são geralmente exibidas durante um estágio essencial do processo de compra, e, caso estejam atrapalhando o carregamento das suas páginas de categorias, bem, outro cliente poderá ser perdido. Note que os lojistas da Shopify não precisam se preocupar com a otimização de miniaturas, pois tomamos conta disso.
Caso seu site utilize galerias em JavaScript, pop-ups de imagens ou outras formas “chamativas” para incrementar a experiência geral de compra, os sitemaps de imagem do Google ajudarão você a fazer com que suas imagens sejam notadas pelo Google.
Os web crawlers não conseguem rastrear imagens que não estejam sendo requisitadas no código-fonte da página web. Portanto, para fazer com que eles fiquem a par dessas imagens, você deverá relacionar a localização delas em um sitemap de imagem.
O Google possui diversas diretrizes de publicação de imagens para ajudar seu site a ficar mais bem classificado nos motores de busca. Além disso, você pode utilizar a extensão de imagens nos sitemaps do Google para oferecer a este mais informações sobre as imagens do seu site. Fazer isso pode ajudar o Google a encontrar mais imagens do que aquelas que seriam tradicionalmente encontradas através do motor de busca deles.
Embora o uso dos sitemaps não garanta que suas imagens serão indexadas pelo Google, você pode aumentar plenamente a otimização do seu site e, principalmente, das imagens através do uso dos sitemaps. O Google Webmaster Tools possui diversas sugestões para formatar corretamente seu sitemap e as imagens para seu sitemap.
Nos sitemaps do Google, é importante que você adicione tags específicas para todas as imagens. Você também pode criar sitemaps separados para listar imagens. O importante é adicionar todas as informações necessárias, junto ao uso de tags específicas, para quaisquer sitemaps que você possua ou venha a criar. Siga estas diretrizes sugeridas pelo Google durante a criação de um sitemap com informações sobre imagens.
Os sites geralmente incluem uma gama de imagens decorativas, como planos de fundo, botões e bordas. Tudo aquilo que não for relacionado aos produtos pode ser considerado como imagem decorativa.
Embora as imagens decorativas possam proporcionar grande apelo estético a uma página web, elas também frequentemente podem resultar na combinação entre arquivos de grande tamanho e demora no tempo de carregamento. Por isso, você deve considerar a análise detalhada das suas imagens decorativas, para certificar-se de que elas não atrapalhem a capacidade do seu site de converter visitantes em clientes.
Primeiramente, analise o tamanho dos arquivos de todas as imagens decorativas nas suas páginas web e utilize um modelo capaz de reduzir o tamanho de todas as páginas do seu site – ou da maioria delas.
Veja algumas dicas para reduzir o tamanho dos arquivos ao redimensionar suas imagens decorativas:
Um truque que você pode utilizar para redimensionar o tamanho da imagem de fundo é cortar a parte central e transformá-la em uma cor simples ou transparente. Essa medida pode reduzir o tamanho do arquivo substancialmente.
Os lojistas da Shopify realmente não precisam se preocupar com isso, pois a Shopify é uma solução hospedada, mas os outros leitores devem prestar atenção. As redes de fornecimento de conteúdo (CDNs) estão rapidamente se tornando o local mais procurado para hospedar imagens e outros arquivos de mídia. Elas são capazes de melhorar o tempo de carregamento da sua página, além de ajudar a resolver problemas de banda.
A única desvantagem surge quando falamos sobre backlinks. Como deve ser do seu conhecimento, os backlinks são essenciais para SEO. E, quanto mais backlinks você tiver, melhor será o desempenho do seu website nos motores de busca.
Ao inserir suas imagens em uma rede de fornecimento de conteúdo, você estará removendo-as do seu domínio e adicionando-as ao domínio da rede de fornecimento. Portanto, quando alguém fizer um link para suas imagens, na verdade, ele estará fazendo o link para o site dessa rede de fornecimento de conteúdo.
Portanto, a melhor regra geral é:
Existem soluções para os problemas de SEO associados às CDNs, mas, antes, certifique-se de obter ajuda profissional na montagem de sua estratégia.
O objetivo essencial da otimização e redimensionamento das suas imagens é ajudá-lo a aprimorar seus resultados. Nós falamos sobre a redução do tamanho dos arquivos e a respeito de fazer com que os motores de busca sejam capazes de indexá-los. Porém, que tal testar as imagens e analisar aquelas que podem converter em mais negócios?
Suas fotografias de produtos estão deixando a desejar e fazendo com que você perca vendas? Confira nosso guia sobre Como criar fotos incríveis de produtos para aumentar as vendas.
Escreva um e-mail para a nossa equipe de atendimento em português!
