O que é otimização de imagem: 10 dicas essenciais para o seu e-commerce

Em um mundo onde os clientes esperam gratificação instantânea, um e-commerce que carrega rapidamente é de extrema importância. Imagens responsivas podem ajudar com tempos de carregamento e conversões.

Se você possui uma loja online, a otimização e redimensionamento de imagens é uma arte que deve ser dominada. Embora a qualidade da imagem seja importante para garantir altas taxas de conversão, a otimização de imagens é fundamental para a experiência do usuário e SEO da sua loja online. 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:

• Por que meus produtos nunca aparecem durante buscas de imagens no Google?
• Será que preciso adicionar "alt tags" às minhas imagens?
• Qual a diferença entre JPEG, GIF e PNG – devo escolher uma opção específica?

Neste post, você verá a resposta para essas e outras questões. Prepare-se para conferir detalhes sobre dicas essenciais de otimização e redimensionamento de imagens.

O que é otimização de imagem?

A otimização de imagem significa garantir que suas imagens tenham a aparência perfeita no desktop e mobile e não prejudiquem o desempenho da web. Ela envolve modificar o formato, dimensão e resolução da imagem para um dispositivo, mantendo a qualidade.

Três elementos principais desempenham um papel aqui:

1. Formato do arquivo de imagem
2. Dimensões da imagem (altura e largura)
3. Resolução da tela

Por que otimizar imagens?

As imagens são importantes para uma boa experiência de compra online. Os clientes não comprarão seus produtos se não conseguirem vê-los. Dados do HTTP Archive (em inglês) revelam que, em média, imagens não otimizadas representam pouco menos de 38% do peso total de uma página web no mobile.

A otimização de imagens ajuda a reduzir o peso da sua página web e é um princípio fundamental do bom design de sites de e-commerce, resultando nos seguintes benefícios:

Equilíbrio entre velocidade e qualidade

A otimização de imagens para web e mobile existe para equilibrar velocidade e qualidade. Servir imagens que ficam bonitas é importante no e-commerce, pois elas criam uma melhor experiência de navegação para os compradores.

O Google sugeriu que a velocidade do site é um dos sinais usados por seu algoritmo para classificar páginas. Uma página lenta significa que os mecanismos de busca rastreiam menos páginas com seu orçamento de rastreamento, o que pode afetar negativamente sua indexação.

Melhor desempenho de busca

Imagens otimizadas ajudam tanto leitores quanto mecanismos de busca a entender melhor seu site e fazer com que seu conteúdo seja visto online. Dados recentes mostram que imagens aparecem para 21,3% das consultas de busca no Google.

A otimização de imagens pode ajudar a classificar suas imagens na busca de imagens do Google, o que pode trazer mais tráfego para seu site e construir sua marca.

Como otimizar imagens para a web

1. Nomeie suas imagens de modo descritivo e em português simples

É 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 de manter esse hábito, vamos analisar por que ele não é uma boa ideia.

Quando se fala de SEO, é importante utilizar palavras-chave adequadas para ajudar sua página web a ficar bem classificada nos mecanismos 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.

Veja 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:

• 2012 Vermelho Ford Mustang LX
• Ford Mustang LX Vermelho 2012
• Vermelho Ford Mustang LX 2012

Analise os dados analíticos do seu site para conferir quais palavras-chave seus clientes utilizam para encontrá-lo. 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 se certifique de utilizar palavras-chave relevantes e úteis ao renomear suas imagens (e tente ser descritivo!).

Confira este Q&A do Moz para entender a importância de nomear estrategicamente os arquivos de imagem do seu site. Isso pode definitivamente melhorar seu SEO on-page. Também pode ajudar suas páginas e imagens a ter uma classificação mais alta nas páginas de resultados dos mecanismos de busca (SERPs).

2. Otimize suas alt tags com inteligência

As alt tags são uma alternativa de texto às imagens, sempre que um navegador não consegue renderizá-las adequadamente. Elas também são usadas para acessibilidade web. 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 com palavras-chave relevantes à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.

Analise o código-fonte de uma alt tag:

Quando o assunto é otimização de imagens, a prioridade nº 1 deve ser preencher o atributo alt para cada imagem de produto no seu site.

Veja algumas regras básicas a respeito das alt tags:

• Descreva suas imagens em português simples, assim como você faz com os nomes dos arquivos das imagens.
• Caso você venda produtos com números de modelos ou números de série, inclua-os à sua alt tag.
• Não faça "keyword stuffing" com suas alt tags (por exemplo: alt="ford mustang carro esportivo compre agora barato melhor preço promoção").
• Não utilize alt tags com imagens decorativas. Os motores de busca poderão penalizar você por excesso de otimização.

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 e ainda relevantes. Você ficará surpreso com o que perde quando está na correria do empreendedorismo.

3. Trace uma estratégia para redimensionar as imagens e ângulos dos produtos

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:

• Interior do carro.
• Traseira do veículo, principalmente daquele aerofólio.
• Close-up das calotas das rodas.
• Toda a parte abaixo do capô — trata-se de um Mustang, no fim das contas.

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:

• 2012-Ford-Mustang-LX-Acabamento-Interior-Couro-Vermelho.jpg -> utilizando esta alt tag: alt = " 2012 Ford Mustang LX Acabamento Interior Couro Vermelho "
• 2012-Ford-Mustang-LX-Retrovisor-Vermelho-Aerofólio.jpg -> utilizando esta alta tag: alt = " 2012 Ford Mustang LX Retrovisor Vermelho Aerofólio "

O segredo aqui é incluir descrições às suas alt tags básicas, para que os potenciais usuários que estiverem realizando buscas acabem acessando seu site.

4. Redimensione suas imagens

Você quer ter certeza de que as imagens do seu site tenham boa aparência em todos os dispositivos, especialmente em mobile e telas de alta resolução.

Para acomodar displays de maior densidade, que empacotam mais pixels no mesmo espaço físico que os tradicionais, você precisa de pelo menos uma imagem 2x para fazer as imagens parecerem nítidas e não granuladas. No contexto, se seu site tem um espaço de imagem de 200 pixels x 200 pixels, você precisaria de uma imagem de 400 pixels x 400 pixels para manter a nitidez em um display de alta resolução. Quase todos os smartphones agora têm resolução de tela de 2x ou superior.

A maneira mais fácil de conseguir isso é usando uma rede de distribuição de conteúdo, ou CDN. Uma CDN ajuda com o trabalho de redimensionar imagens e entrega o melhor formato de imagem para o dispositivo do usuário. Ela também melhora a velocidade de carregamento do próprio arquivo de imagem, pois têm localizações de servidor mais próximas ao usuário final.

💡Nota: se você é um comerciante da Shopify, seu tema Shopify usa a CDN de imagens da plataforma. Curioso sobre como funciona? Faça upload da sua própria imagem e experimente a CDN da Shopify. Se você é um desenvolvedor de temas, aprenda a como escrever o código de imagens responsivas em Liquid.

Advertência sobre a exibição de imagens maiores

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 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:

• A maioria dos consumidores aguarda cerca de 3 segundos pelo carregamento de um website no PC ou laptop.
• ...e aproximadamente 5 segundos nos seus dispositivos móveis.
• A Amazon descobriu que, caso o carregamento das suas páginas demore 1 segundo a mais, a empresa perde US$ 1,6 bilhão por ano.
• O Google utiliza o tempo de carregamento de página como um dos fatores em seu algoritmo de classificação.

Caso possua imagens que "escorrem" vagarosamente pela tela e demoram mais de 15 segundos para carregar, bem, você pode se despedir daquele potencial cliente!

O que você deve fazer?

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 a plataforma comprime 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 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.

E se eu não tiver Photoshop?

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:

• PicMonkey – descrito por especialistas como uma "ferramenta de edição de fotos surpreendentemente excelente".
• Pixlr – altamente intuitivo, ainda inclui um app 100% grátis para seu smartphone, possibilitando edições em qualquer lugar.
• FotoFlexer- outro editor de imagens online razoavelmente avançado. O FotoFlexer até mesmo permite que você trabalhe com camadas!

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 um programa gratuito de edição de imagens, nada é capaz de superá-lo.

Qual deve ser o tamanho dos meus arquivos de imagem?

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. Continue lendo para ver a solução para isso.

5. Saiba qual tipo de arquivo de imagem utilizar nas situações certas

O formato da imagem é uma das coisas mais importantes para acertar no seu site. Alguns formatos de arquivo têm qualidade superior a outros. Alguns ocupam mais espaço que outros, o que impacta o tempo de carregamento do seu site.

Para começar, existem dois tipos principais de formatos de imagem: raster e vetor.

Imagens vetoriais são construídas com base em fórmulas matemáticas. Sempre que você precisar de gráficos que possam ser dimensionados para diferentes tamanhos sem sacrificar a qualidade, use gráficos vetoriais. A imagem vetorial mais comum é o arquivo Scalable Vector Graphics (SVG), e ele é a escolha ideal para logotipos, ícones e outros gráficos simples onde você precisa de clareza e nitidez, independentemente do dimensionamento.

Imagens raster são compostas de pixels que podem formar imagens altamente detalhadas, como fotografias. Quanto mais pixels uma imagem contém, maior e de maior resolução ela será.

Com o tempo, codecs mais novos e aprimorados foram escritos para imagens raster. Por exemplo, GIF foi uma versão inicial de um codec de imagem para a web, mas a qualidade era ruim porque a técnica de compressão fazia a média de pixels próximos. Técnicas mais novas buscam codificar e comprimir de maneiras que são mais difíceis para o olho humano detectar.

Isso significa que você pode oferecer imagens de maior qualidade com tamanhos de arquivo menores, basta usar formatos de imagem mais novos. Os seguintes formatos são os mais usados na web hoje:

• JPG: Um formato de imagem amplamente usado para fotos. Usa compressão com perda para reduzir o tamanho do arquivo, mas sacrifica alguma qualidade.
• PNG: Um formato popular para web designers porque lida com gráficos com fundos transparentes. O tipo de arquivo retém todos os seus dados originais quando comprimido, o que o torna bom para gráficos em um site.
• strong>WEBP: Um formato moderno construído para a web. Suporta compressão com e sem perda, oferecendo tamanhos de arquivo menores que JPG e PNG, mantendo qualidade similar ou melhor.
• AVIF: O formato de imagem mais novo, AVIF comprime imagens com menos degradação.

Nem todos os navegadores suportam todas as versões. É aqui que uma CDN de imagem pode ser útil novamente, pois pode selecionar automaticamente o melhor formato para um navegador específico e converter sua imagem original. Se você não usar uma CDN com essa capacidade, então precisará usar a tag <picture> no seu HTML.

💡Nota: a CDN da Shopify detecta automaticamente quais formatos de arquivo são suportados por um navegador e envia a melhor opção. Por exemplo, ela pode converter imagens para WebP ou AVIF, onde suportado, e enviar imagens PNG ou JPEG como fallback para navegadores mais antigos.

Confira 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 acontece 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 é pequena o suficiente, 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:

• Na maioria das situações de e-commerce, os JPEGs serão sua melhor aposta. Eles oferecem a melhor qualidade e o menor tamanho de arquivo.
• Jamais utilize GIFs para imagens grandes de produtos. O tamanho do arquivo será muito grande, e não há nenhuma forma boa de reduzi-lo. Utilize GIFs para miniaturas e imagens decorativas.
• PNGs podem ser uma boa alternativa a JPEGs e GIFS. Se você puder apenas obter fotos de produtos no formato PNG, experimente utilizar o PNG-8 em vez do PNG-24. PNGs são excelentes para imagens decorativas simples, devido ao seu tamanho extremamente reduzido.

A maioria dos programas de edição de imagens pode salvar imagens em qualquer um dos tipos de arquivos discutidos acima.

6. Utilize sitemaps de imagem

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 não identificadas, você deverá relacionar a localização delas em um sitemap de imagem.

Você pode inserir a seguinte linha no seu arquivo robots.txt, mostrando o caminho para seu sitemap:

Sitemap: http://example.com/sitemap_location.xml

Ou você pode enviar o sitemap para o Google usando o Search Console. 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 ele 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 mecanismo de busca deles.

Como comerciante da Shopify, você obterá um sitemap gerado automaticamente que inclui suas imagens de produtos. Isso significa que imagens nas suas páginas de produtos, e quaisquer outras imagens importantes usadas no seu blog ou coleções, são agora “notadas” pelos mecanismos de busca através do seu sitemap. Isso melhora as chances de suas imagens aparecerem nos resultados de busca e direcionarem mais tráfego para seu site.

A Shopify atualiza o sitemap automaticamente sempre que novas páginas ou produtos são adicionados, ou os existentes são removidos. Então você nunca precisa criar ou atualizar manualmente seu sitemap.

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 Search Central 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.

7. Saiba como lidar com suas miniaturas

Muitos sites de e-commerce ainda utilizam imagens em miniatura. Elas proporcionam uma ótima maneira de visualizar rapidamente as páginas de categorias, sem tomar muito espaço.

Miniaturas são ótimas, mas tome cuidado, elas podem prejudicar o tempo de carregamento das suas páginas — sem que você perceba.

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 a plataforma toma conta disso.

• Reduza ao máximo o tamanho do arquivo redimensionando suas miniaturas. Poderá valer a pena priorizar um tamanho menor em detrimento da qualidade. Lembre-se: o efeito cumulativo das suas miniaturas influenciará amplamente o tempo de carregamento da sua página.
• Varie o texto das suas alt tags para evitar duplicar o conteúdo utilizado nas versões maiores da mesma imagem. Na verdade, deixe seu alt text totalmente diferente. A última coisa que você quer é fazer com que a miniatura seja indexada, ao invés da imagem maior. Se necessário, remova completamente o alt text.

8. Use uma boa rede de distribuição de conteúdo (CDN) de imagens

CDNs de imagem especializadas fornecem recursos de transformação de imagem para que você só precise fazer upload de uma imagem de alta qualidade, e elas redimensionarão, reformatarão e armazenarão em cache com base em cada solicitação.

Com a CDN de imagens da Shopify, o tamanho do arquivo é automaticamente otimizado quando você faz upload da sua imagem. A mudança na qualidade do arquivo não é perceptível ao olho humano, mas melhorará o tempo de carregamento da página. A CDN também detecta automaticamente quais formatos de arquivo são suportados pelo cliente e oferece edição dinâmica, que permite cortar e transformar sua imagem sem perder o arquivo original.

💡Os comerciantes da Shopify têm acesso a uma equipe de serviços profissionais para ajudar a melhorar a velocidade do seu site, bem como a taxa de conversão e otimização para mecanismos de busca.

Os lojistas da Shopify realmente não precisam se preocupar com isso, pois a Shopify é uma solução hospedada. Contudo, 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 é:

• Apenas porque algo está "na moda", não o siga como uma ovelha. Primeiramente, defina se essa é a melhor estratégia para o seu negócio.
• Caso seu site esteja tendo milhares de acessos todos os meses, então, a rede de fornecimento será uma boa ideia, pois poderá ajudar a resolver problemas de banda.
• Caso seu site receba menos visitantes por dia, é provável que sua situação atual de hospedagem seja capaz de lidar com essa carga recebida.

Existem soluções para os problemas de SEO associados às CDNs, mas, antes, certifique-se de obter ajuda profissional ao elaborar sua estratégia.

9. Tome cuidado com suas imagens decorativas

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 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:

• Para imagens que componham bordas ou padrões simples, transforme-as em PNG-8 ou GIFs. Você pode criar belas imagens com apenas algumas centenas de bytes!
• Caso possível, utilize CSS para criar áreas coloridas, ao invés de imagens. Faça o máximo uso possível da estilização em CSS para substituir imagens decorativas.
• Analise detalhadamente aquela enorme imagem de fundo com estilo de papel de parede. Esses arquivos podem ser imensos. Reduza-os o máximo que puder, sem prejudicar a qualidade da imagem.

Um truque que você pode utilizar para redimensionar a 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.

10. Teste suas imagens!

O objetivo essencial da otimização e redimensionamento das suas imagens é ajudá-lo a aprimorar seus resultados. Muito já foi falado 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?

• Teste o número de imagens de produtos por página: Como o tempo de carregamento consiste em um problema para alguns e-commerces não hospedados, você pode descobrir que reduzir o número de imagens em uma página acaba aumentando as taxas de cliques e vendas. Porém, também é possível que a apresentação de diversas imagens por página (como diferentes ângulos) possa melhorar a experiência do usuário e gerar mais vendas. A única forma de descobrir isso é fazendo testes.
• Teste quais ângulos seus clientes preferem: Você poderá descobrir que oferecer os ângulos desejados pelos seus clientes poderá ampliar a fidelidade em geral. Uma ótima forma de descobrir isso é fazer uma pesquisa com seus clientes e perguntar o que eles mais gostam ao visualizar fotos de produtos. Entrevistar seus clientes, de maneira geral, é sempre um ótimo hábito a ser adotado. Ainda assim, verifique testando.
• Teste quantos anúncios de produtos você deve manter nas páginas de categorias: 10, 20, 100 produtos? Teste o número de produtos listados nas páginas de categorias para ver o que funciona melhor aos seus clientes.

Ferramentas de otimização de imagens

Agora que você conhece algumas das melhores práticas de otimização de imagens, veja algumas ferramentas e plug-ins de otimização de imagens que você pode usar para seu site.

Note que, se você está na Shopify ou usa uma CDN de imagem especializada, você não precisa usar essas ferramentas. A única exceção é o SVGOMG — a maioria das CDNs de imagem não oferece otimizações para SVGs.

Squoosh

Squoosh é um aplicativo web fácil de usar para compressão de imagens. Simplesmente arraste e solte sua imagem na ferramenta e escolha entre formatos de imagem otimizados como JPEG XL, WEBP, PNG e mais.

TinyPNG

TinyPNG é outra ferramenta popular de otimização de imagens na web. Ele usa técnicas inteligentes de compressão com perda para reduzir o tamanho do arquivo de imagem para sua página web (WEBP), arquivos JPEG e PNG.

Você pode reduzir imagens para seus aplicativos ou loja, além de imagens animadas. O programa foca não apenas na compressão de imagem, mas também oferece integração de API e ferramentas de desenvolvedor para integrar o TinyPNG em soluções de software personalizadas.

A API do TinyPNG redimensiona imagens para miniaturas automaticamente, removendo quaisquer partes desnecessárias e adicionando mais fundo. Se você executa seu site no WordPress, ele está disponível como um plug-in.

SVGOMG

SVGOMG é outra ferramenta simples de otimização de imagens. Ele oferece várias opções para limpar e “minificar” seus arquivos SVG. Simplesmente faça upload ou copie o código-fonte do seu SVG para começar. Você pode brincar com os vários controles e criar uma imagem idêntica, mas com menos peso que a original.

Mantenha as fotos funcionais com a otimização de imagem

Otimizar suas imagens é essencial para administrar um negócio online de sucesso. Isto não apenas melhora a aparência dos seus produtos, mas também ajuda a criar uma experiência de compra eficiente e fazer com que você seja encontrado online.

Uma plataforma de e-commerce como a Shopify entrega automaticamente suas imagens no melhor formato possível para os visitantes, para que você possa aumentar as vendas e fazer seu negócio online crescer.

🚀 Suas fotografias de produtos estão deixando a desejar e fazendo com que você perca vendas? Confira o guia completo de fotografia para e-commerce.