Otimização de imagem: 8 dicas para o seu site (2026)

Num mundo em que os clientes esperam gratificação imediata, um site de e-commerce que carregue depressa é essencial. As imagens responsivas podem ajudar a melhorar os tempos de carregamento e as conversões.

Embora a qualidade da imagem seja importante para garantir taxas de conversão elevadas, a otimização de imagem é decisiva para a experiência do utilizador e para o SEO da loja online. Aprender a otimizar imagens pode trazer ganhos significativos, desde reforçar a marca até atrair compradores que pesquisam no Google Imagens.

O que é a otimização de imagens?

Otimizar imagens significa garantir que têm um aspeto impecável em computador e em dispositivos móveis, sem prejudicar o desempenho do site. Na prática, envolve ajustar o formato, as dimensões e a resolução da imagem ao dispositivo, mantendo a qualidade.

Há três elementos principais em jogo:

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

Porque é importante otimizar imagens?

As imagens são fundamentais para uma boa experiência de compra online. Os clientes dificilmente compram um produto que não conseguem ver bem. Dados do HTTP Archive mostram que, em média, as imagens não otimizadas representam pouco menos de 38 % do peso total de uma página web em dispositivos móveis.

A otimização de imagem reduz o peso da página e é um princípio central de um bom web design para e-commerce, trazendo benefícios como os seguintes:

Equilíbrio entre velocidade e qualidade

A otimização de imagem para web e mobile existe para equilibrar velocidade e qualidade. No e-commerce, servir imagens com boa apresentação é indispensável, pois cria uma experiência de navegação melhor para quem visita a loja.

O Google já indicou que a velocidade do site é um dos sinais usados pelo algoritmo para classificar páginas. Uma página lenta faz com que os motores de busca rastreiem menos páginas dentro do orçamento de rastreio disponível, o que pode afetar negativamente a indexação.

Melhor desempenho na pesquisa

As imagens otimizadas ajudam tanto os leitores como os motores de busca a compreender melhor o site e a dar visibilidade ao conteúdo online. Dados recentes mostram que as imagens surgem em 36,7 % das pesquisas no Google.

A otimização de imagem pode ajudar a posicionar melhor as imagens na pesquisa de imagens do Google, o que pode gerar mais tráfego para o site e fortalecer a marca.

Como otimizar imagens para a web

1. Usar nomes de imagem curtos e diretos
2. Otimizar cuidadosamente os atributos alt
3. Escolher bem as dimensões das imagens e os ângulos do produto
4. Redimensionar as imagens
5. Escolher o formato de imagem certo
6. Usar sitemaps de imagens
7. Usar uma boa rede de distribuição de conteúdos (CDN)
8. Testar as imagens

1. Usar nomes de imagem curtos e diretos 

É muito fácil carregar imagens para o site e manter os nomes de ficheiro predefinidos atribuídos pela câmara. No entanto, no que toca a SEO de imagens, convém usar palavras-chave relevantes para ajudar a página a posicionar-se melhor nos motores de busca.

Criar nomes de ficheiro descritivos e ricos em palavras-chave é essencial para a otimização de imagem. Os motores de busca analisam não só o texto da página, mas também os nomes dos ficheiros de imagem.

Veja-se esta imagem, por exemplo:

Poder-se-ia usar o nome genérico atribuído pela câmara à imagem (por exemplo, DCMIMAGE10.jpg). Ainda assim, seria muito melhor dar ao ficheiro o nome 2012-Ford-Mustang-LX-Vermelho.jpg.

Convém pensar na forma como os clientes pesquisam produtos no site. Que padrões de nomenclatura usam nas pesquisas? No exemplo acima, quem procura automóveis pode pesquisar termos como:

• Ford Mustang LX vermelho 2012
• Mustang LX Ford vermelho 2012
• Ford Mustang vermelho LX 2012

Consultar a análise do site permite perceber que palavras-chave os clientes usam para encontrar o negócio. Identificar os padrões de nomenclatura mais comuns e aplicar essa lógica ao processo de nomear os ficheiros de imagem é uma boa prática.

Se não quiser ir tão longe na análise de dados, o mínimo recomendável é usar palavras-chave relevantes e úteis ao nomear as imagens, ou seja, ser descritivo.

Consulte esta pergunta e resposta da Moz (artigo disponível apenas em inglês) para perceber a importância de nomear estrategicamente os ficheiros de imagem do site. Isso pode melhorar claramente o SEO on-page e ajudar as páginas e imagens a subir nas páginas de resultados dos motores de busca (SERP).

2. Otimizar cuidadosamente os atributos alt 

Os atributos alt são a alternativa em texto às imagens quando o navegador não as consegue apresentar corretamente. Também desempenham um papel importante na acessibilidade web. Mesmo quando a imagem é apresentada, ao passar o cursor sobre ela poderá ver-se o texto do atributo alt, dependendo das definições do navegador.

O atributo alt também acrescenta valor de SEO ao site. Adicionar atributos alt adequados, com palavras-chave relevantes, às imagens do site pode ajudar a melhorar o posicionamento nos motores de busca. É bem possível que os atributos alt sejam uma das melhores formas de fazer os produtos de e-commerce aparecerem na pesquisa web e de imagens do Google. 

Vejamos o código-fonte de um atributo alt:

A prioridade número um, quando se fala de otimização de imagem, é preencher o atributo alt de cada imagem de produto no site.

Aqui tem algumas regras simples para os atributos alt:

• Descrever as imagens em linguagem simples, tal como se fez com os nomes dos ficheiros.
• Se os produtos incluem números de modelo ou números de série, devem ser incluídos nos atributos alt.
• Não encher os atributos alt com palavras-chave (por exemplo: alt="ford mustang muscle car comprar agora barato melhor preço promoção").
• Não usar atributos alt em imagens decorativas. Os motores de busca podem penalizar o excesso de otimização.

Por fim, vale a pena fazer uma verificação ocasional. Ver o código-fonte das páginas e confirmar se os atributos alt continuam lá e se ainda fazem sentido pode revelar falhas que facilmente escapam quando o negócio anda a grande velocidade.

3. Escolher bem as dimensões das imagens e os ângulos do produto 

É prática comum mostrar um produto a partir de vários ângulos. Voltando ao exemplo do Ford Mustang, não faria sentido mostrar apenas uma fotografia do carro, sobretudo se o objetivo for vendê-lo. O mais sensato seria incluir imagens de:

• Interior
• Traseira (especialmente o spoiler)
• Jantes
• Motor (afinal, é um Mustang)

A melhor forma de tirar partido destas fotografias adicionais é preencher os atributos alt. E isso faz-se criando atributos alt únicos para cada imagem do produto:

• 2012-Ford-Mustang-LX-Vermelho-Interior-Couro-Acabamentos.jpg → usando o atributo alt: alt="Ford Mustang LX vermelho 2012 interior em couro acabamentos"
• 2012-Ford-Mustang-LX-Vermelho-Vista-Traseira-Spoiler.jpg → usando o atributo alt: alt="Ford Mustang LX vermelho 2012 vista traseira spoiler"

A chave está em acrescentar descrições ao atributo alt base para que potenciais compradores cheguem ao site.

4. Redimensionar as imagens 

Convém gerir as imagens do site de forma a garantir que têm bom aspeto em todos os dispositivos, sobretudo em mobile e em ecrãs de alta resolução.

Para acomodar ecrãs de maior densidade, que concentram mais píxeis no mesmo espaço físico do que os ecrãs tradicionais, é necessária pelo menos uma imagem 2x para garantir nitidez e evitar um aspeto granulado. Em termos práticos, se o site tiver um espaço de imagem com 200 píxeis por 200 píxeis, será necessária uma imagem com 400 píxeis por 400 píxeis para manter a definição num ecrã de alta resolução. Hoje, quase todos os telemóveis têm resoluções de ecrã 2x ou superiores.

A forma mais simples de o conseguir é usar uma rede de distribuição de conteúdos, ou CDN. Uma CDN trata do redimensionamento das imagens e entrega o melhor formato para o dispositivo do utilizador. 

Além disso, melhora a velocidade de carregamento do próprio ficheiro de imagem, porque dispõe de servidores mais próximos do utilizador final.

Nota: ao vender na Shopify, o tema Shopify utiliza a CDN de imagens da plataforma. Para programadores de temas, é possível consultar documentação sobre como escrever código de imagem responsiva em Liquid (artigo disponível apenas em inglês).

5. Escolher o formato de imagem certo 

O formato da imagem é um dos aspetos mais importantes a acertar num site. Alguns formatos oferecem mais qualidade do que outros. Outros ocupam mais espaço, o que afeta o tempo de carregamento.

Para começar, há dois grandes tipos de formatos de imagem: raster e vetorial.

As imagens vetoriais baseiam-se em fórmulas matemáticas. Sempre que for necessário usar gráficos que possam ser ampliados ou reduzidos sem perder qualidade, os gráficos vetoriais são a melhor opção. O formato vetorial mais comum é o ficheiro Scalable Vector Graphics (SVG). É uma escolha ideal para logótipos, ícones e outros gráficos simples em que se precisa de clareza e nitidez, independentemente da escala.

As imagens raster são compostas por píxeis, que permitem formar imagens muito detalhadas, como fotografias. Quanto mais píxeis uma imagem tiver, maior será a resolução e dimensão do ficheiro.

Ao longo do tempo, surgiram codecs mais recentes e mais eficazes para imagens raster. Por exemplo, o GIF foi uma versão inicial de codec de imagem para a web, mas a qualidade era fraca porque a técnica de compressão fazia médias entre píxeis próximos. As técnicas mais recentes procuram codificar e comprimir de formas menos percetíveis ao olho humano.

Isto significa que hoje é possível servir imagens de maior qualidade com ficheiros mais leves quando se usam formatos mais modernos. Os formatos mais comuns na web atualmente são:

• JPG: Um formato muito usado para fotografias. Usa compressão com perdas para reduzir o tamanho do ficheiro, sacrificando alguma qualidade.
• PNG: Um formato popular entre web designers porque lida bem com gráficos com fundo transparente. Este tipo de ficheiro mantém todos os dados originais quando comprimido, o que o torna adequado para gráficos e tabelas num site.
• WEBP: Um formato moderno criado para a web. Suporta compressão com e sem perdas, oferecendo ficheiros mais pequenos do que JPG e PNG, com qualidade semelhante ou superior.
• AVIF: O formato de imagem mais recente, o AVIF comprime bem as imagens com menor degradação.

Nem todos os navegadores suportam todos os formatos. É aqui que uma CDN de imagens volta a ser útil, porque pode selecionar automaticamente o melhor formato para cada navegador e converter a imagem original. Caso não se use uma CDN com essa capacidade, será necessário recorrer à etiqueta picture no HTML.

Nota: a CDN da Shopify deteta automaticamente os formatos de ficheiro suportados pelo navegador e envia a melhor opção. Por exemplo, pode converter imagens para WebP ou AVIF, quando houver suporte, e enviar imagens PNG ou JPEG como alternativa para navegadores mais antigos.

6. Usar sitemaps de imagens 

Se o site usa galerias em JavaScript, pop-ups de imagens ou outras soluções mais vistosas para melhorar a experiência de compra, os sitemaps de imagens ajudam o Google a detetá-las.

Os crawlers não conseguem rastrear imagens que não estejam explicitamente referidas no código-fonte da página. Por isso, para informar os motores de busca sobre imagens que de outra forma passariam despercebidas, convém listar a respetiva localização num sitemap de imagens.

É possível inserir a seguinte linha no ficheiro robots.txt, indicando o caminho para o sitemap:

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

Também é possível submeter o sitemap ao Google através da Search Console. O Google tem várias diretrizes para publicação de imagens que podem ajudar o site a posicionar-se melhor nas SERP. Além disso, é possível usar os sitemaps do Google para fornecer mais informação sobre as imagens do site, o que pode ajudar o Google a encontrar mais imagens do que encontraria por si só.

Ao vender na Shopify, recebe-se automaticamente um sitemap gerado com as imagens dos produtos. Isto significa que as imagens das páginas de produto, bem como outras imagens importantes usadas no blogue ou nas coleções, ficam acessíveis aos motores de busca através do sitemap. Isso aumenta a probabilidade de as imagens aparecerem nos resultados de pesquisa e gerarem mais tráfego para o site.

A Shopify atualiza o sitemap automaticamente sempre que se adicionam novas páginas ou produtos, ou se removem os existentes. Assim, nunca é necessário criar ou atualizar manualmente o sitemap.

7. Usar uma boa rede de distribuição de conteúdos (CDN) 

As CDN especializadas em imagens oferecem funcionalidades de transformação de imagem, pelo que só é necessário carregar uma imagem de alta qualidade. Depois, redimensionam, reformatam e armazenam em cache essa imagem com base em cada pedido.

Com a CDN de imagens da Shopify, o tamanho do ficheiro é otimizado automaticamente quando se carrega a imagem. A alteração na qualidade não é percetível ao olho humano, mas melhora o tempo de carregamento da página. A CDN também deteta automaticamente os formatos suportados no lado do cliente e oferece edição dinâmica, permitindo cortar e transformar a imagem sem perder o ficheiro original.

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

8. Testar as imagens 

O objetivo de otimizar imagens é, no fim de contas, melhorar os resultados do negócio. Já se abordou a redução do tamanho dos ficheiros e a ajuda aos motores de busca para indexar as imagens, mas também importa testar que imagens convertem mais clientes.

• Convém testar o número de imagens de produto por página: Como os tempos de carregamento podem ser um problema em alguns sites de e-commerce não alojados, poderá verificar-se que reduzir o número de imagens numa página aumenta a taxa de cliques e as vendas. Também é possível que mostrar muitas imagens por página melhore a experiência do utilizador e leve a mais vendas. A única forma de saber é testar.
• Testar os ângulos preferidos pelos clientes também é importante: Pode notar-se um aumento da fidelização ao mostrar as perspetivas que os clientes realmente querem ver. Uma boa forma de descobrir isso é perguntar-lhes o que mais valorizaram ao ver as fotografias do produto. Ouvir os clientes é, de resto, um excelente hábito. Ainda assim, convém confirmar sempre com testes.
• Outro ponto a testar é quantos produtos devem ser mostrados nas páginas de categoria: Serão 10, 20 ou 100 produtos? Testar o número de produtos apresentados nas páginas de categoria permite perceber o que funciona melhor para os clientes.

Ferramentas de otimização de imagens

Agora que já se conhecem algumas boas práticas de otimização de imagem, vale a pena olhar para algumas ferramentas e plug-ins úteis.

É importante ter em conta que, ao usar a Shopify ou uma CDN de imagens especializada, estas ferramentas não são necessárias. A única exceção é o SVGOMG, pois a maioria das CDN de imagens não oferece otimização para ficheiros SVG.

Squoosh

O Squoosh é uma aplicação web simples de usar para compressão de imagens. Basta arrastar e largar a imagem na ferramenta e escolher entre formatos otimizados como JPEG XL, WEBP, PNG e outros.

TinyPNG

O TinyPNG é outra ferramenta popular de otimização de imagem na web. Usa técnicas inteligentes de compressão com perdas para reduzir o tamanho dos ficheiros WEBP, JPEG e PNG da página.

É possível reduzir imagens para aplicações ou lojas, bem como comprimir imagens animadas. A ferramenta não se limita à compressão de imagens: também oferece integração por API e ferramentas para programadores que queiram integrar o TinyPNG em soluções de software personalizadas.

A API do TinyPNG redimensiona automaticamente imagens para miniaturas, removendo partes desnecessárias e acrescentando mais fundo. Para sites que funcionam em WordPress, a ferramenta está disponível como plug-in.

SVGOMG

O SVGOMG é outra ferramenta simples de otimização de imagem. Oferece várias opções para limpar e minificar ficheiros SVG. Basta carregar o ficheiro ou copiar o código-fonte do SVG para começar. É possível ajustar os vários controlos e criar uma imagem idêntica, mas com menos peso do que a original.

Fotografias eficazes com a otimização de imagem

Otimizar imagens é essencial para gerir um negócio online com sucesso. Não só melhora a apresentação dos produtos, como também ajuda a criar uma experiência de compra fluida e a tornar a loja online mais fácil de encontrar.

Uma plataforma de e-commerce como a Shopify entrega automaticamente as imagens no melhor formato possível para cada utilizador, permitindo aumentar as vendas e fazer crescer o negócio online.