Saiba como utilizar a otimização de imagens para melhorar o desempenho do seu site e aumentar a satisfação dos seus clientes
Otimizar as imagens do seu site é essencial para aumentar o engajamento dos usuários, melhorar o ranqueamento da sua página nos mecanismos de busca e reduzir custos. Afinal de contas, elementos não otimizados (de códigos CSS e JavaScript às imagens nos servidores) ocupam mais espaço e diminuem a velocidade de carregamento do site.
Como resultado, a performance piora e pode levar a problemas como o abandono das páginas pelos usuários. Segundo um estudo da Digital.com, 53% dos usuários de internet esperam que as páginas carreguem em no máximo 3 segundos. Demorou muito? O cliente vai embora, simples assim.
Por isso, otimizar imagens é uma medida fundamental para o sucesso do seu site.
O que é otimização de imagens?
Em primeiro lugar, precisamos explicar o que é otimizar imagem no mundo digital. Trata-se de diminuir o tamanho e a resolução das imagens para que elas tenham a qualidade necessária para uma boa visualização – mas não mais do que isso.
Assim, otimizar imagens para web depende de entender como os usuários vão acessar seu site e a qualidade que seu site apresentará no desktop e nos smartphones.
Reduzir o tamanho do arquivo sem perder a qualidade faz seu site consumir menos recursos, carregar mais rápido e ganhar pontos com os mecanismos de busca. Com tudo isso, o site tende a subir no ranqueamento do SEO, ter mais acessos e entregar uma melhor experiência para os usuários.
No processo de otimizar imagens, os arquivos do site têm seu tamanho diminuído, mas mantendo o formato, dimensão e resolução adequados.
A importância das imagens na web
Otimizar imagens para web traz uma série de benefícios para um site. Entre os principais, estão:
Melhor uso dos recursos
Imagens de tamanho grande consomem mais espaço de armazenamento e necessitam de mais largura de banda para serem transferidos para os computadores ou celulares dos usuários. Aproveitar ao máximo o espaço em disco é importante, pois esse é um dos parâmetros mais importantes na hora de definir a hospedagem do seu site.
Otimizar as imagens diminui o espaço ocupado pelas fotos em seu site, reduz a quantidade de largura de banda necessária para exibi-las no dispositivo do usuário e melhora o desempenho do site como um todo. Além disso, o uso de arquivos menores torna os backups mais rápidos, o que facilita a gestão do site.
Melhor ranqueamento nos mecanismos de busca
Estar bem ranqueado nos mecanismos de busca (especialmente no Google) é essencial para qualquer site que pretenda gerar volumes significativos de acessos e vendas. Para o Google, a velocidade da página é um dos itens fundamentais de seu algoritmo de classificação: sites que carregam rapidamente são favorecidos.
A essa altura, já deve ter ficado claro para você: otimizar imagens para a web aumenta as chances de que seu site esteja nas primeiras posições nas pesquisas. Se você quer saber como está a velocidade de carregamento do seu site (e entender o quanto pode vir a ganhar ao otimizar as imagens), use ferramentas gratuitas de teste, como o PageSpeed Insights do Google.
Melhor experiência do usuário
Com melhor velocidade de carregamento, sites que têm imagens otimizadas melhoram a experiência do usuário. O site fica “mais leve”, carrega mais rápido, se torna mais fluido e tende a fazer com que os visitantes passem mais tempo, naveguem em mais páginas e façam mais pesquisas.
Uma dica importante para melhorar a experiência do usuário é estar atento aos core web vitals: métricas desenvolvidas pelo Google para avaliar a eficiência e velocidade dos sites. Quanto mais positiva a nota do site nessas métricas, melhor será o resultado junto aos clientes.
Como otimizar imagens para melhorar a velocidade e responsividade da página
Para melhorar a otimização das imagens do seu site, é importante levar em conta diversos fatores, como o formato da imagem, o tamanho do arquivo, sua resolução e muito mais. Por isso, esteja atento a estes fatores:
1) Escolha o formato do arquivo
Na otimização da imagem, o primeiro aspecto a avaliar é o formato da imagem. Entrando um pouco em aspectos técnicos, as imagens podem ser divididas em dois tipos: vetoriais e raster.
As imagens vetoriais costumam funcionar bem com combinações de linhas, pontos e cores. Uma das principais vantagens das imagens vetoriais é que elas não perdem qualidade mesmo quando o tamanho é alterado.
Bons exemplos de imagens vetoriais são logotipos e ícones, que costumam estar disponíveis em formatos como SVG, PDF, EPS e AI.
As imagens raster, por outro lado, são baseadas em pixels – e, com isso, são dependentes da resolução. Imagens rasterizadas que são redimensionadas podem ficar borradas ou pixelizadas e, por isso, é preciso tomar mais cuidado com o tamanho dessas imagens no site, para não prejudicarem a experiência do cliente.
Entre os formatos de imagem raster mais conhecidos estão JPG, PNG, GIF e RAW.
A maioria dos softwares de edição de imagem aceita todos esses formatos de arquivo. Assim, o uso de um otimizador de imagem online pode ajudar você na escolha do formato correto de arquivo para cada caso.
2) Otimize suas imagens
Para compactar seus arquivos de imagem, tenha em mente a seguinte regra: arquivos menores geralmente resultam em menor qualidade de imagem (e, por isso, admitem tamanhos menores na tela do computador ou smartphone).
Otimizar as imagens diminui o tamanho dos arquivos, mas é preciso avaliar o conteúdo da imagem, as cores e a complexidade dos detalhes para que sua qualidade não seja perdida.
O processo de otimizar imagens web pode ser feito a partir da compactação com ou sem perdas. Quando é usada a compactação com perdas, são removidos dados da imagem para diminuir seu tamanho.
Já a compactação sem perdas não influencia a qualidade ou clareza da imagem, pois remove apenas dados não essenciais. Por outro lado, o arquivo fica mais pesado: utilize essa opção somente para as fotos de alta qualidade que sejam necessárias.
3) Use as dimensões adequadas
Aqui vale explicar a diferença entre tamanho e dimensão. O tamanho da imagem é o quanto de espaço uma imagem ocupa em seu site, medido em kilobytes (KB) ou megabytes (MB). A dimensão da imagem, por sua vez, é a largura e altura da imagem em pixels.
Usar imagens de dimensões incorretas, grandes demais, diminui a velocidade do site. Isso acontece porque o site precisa reconfigurar a imagem de acordo com a dimensão da tela em que o site está sendo exibido. Por isso, evite esse erro a todo custo e utilize!
E qual é a melhor forma de evitar esse erro? Exibindo imagens em escala e utilizando um otimizador de imagem. Quando isso acontece, as imagens se ajustam às dimensões exigidas pelo site.
É possível otimizar imagens WordPress (na biblioteca de mídia) ou a partir de ferramentas integradas ao seu site, mas fazer os ajustes antes do envio para o site é uma prática mais adequada: dessa forma, é usado menos espaço em disco e existirão menos versões da imagem original no seu servidor.
Se o seu site trabalha com hospedagem WordPress, converse com seu fornecedor de hosting para entender as melhores práticas que podem ser usadas para melhorar a performance das suas páginas. Você ficará surpreso com os detalhes que está deixando passar não apenas nas imagens, mas em muitos outros aspectos da gestão do seu site.
4) Use uma CDN para distribuir imagens
O uso de uma rede de distribuição de conteúdo (CDN) para o conteúdo estático é uma forma de melhorar significativamente o desempenho do seu site. Uma CDN armazena o conteúdo solicitado em seu cache e entrega a partir do servidor mais próximo do visitante do site.
Com isso, os dados levam menos tempo para chegar ao destino e o carregamento das páginas acontece mais rapidamente.
Também é possível usar uma CDN de imagem, que faz o mesmo trabalho de distribuição de conteúdo – para seus arquivos de imagem. Como as CDNs de imagem diminuem as imagens automaticamente, convertendo o formato de acordo com o dispositivo do usuário e o conteúdo da imagem, essa é uma forma poderosa de melhorar a velocidade de carregamento.
Para lojas virtuais ou para sites que fazem upload de novas imagens com frequência, essa é uma boa opção.
Otimize imagens para acessibilidade e impulsione o SEO
Como já dissemos, o uso de imagens otimizadas melhora a chance de que seu site tenha um melhor ranqueamento nos mecanismos de pesquisa. Por isso, usar a combinação adequada de formato, descrição de imagem (alt text) e títulos contribui para melhorar seu SEO.
O melhor é que a otimização de imagens para SEO envolve algumas etapas simples, que não dependem de conhecimentos técnicos aprofundados. Confira:
1) Dê os nomes adequados para suas imagens
A descrição dos arquivos ajuda os mecanismos de busca a localizar as imagens mais rapidamente. Arquivos com nomes adequados dão mais contexto para as imagens e melhoram o ranqueamento das páginas.
Um exemplo: o Google não consegue entender muito bem a relevância de um arquivo chamado “vestido1”, mas entende o que é “vestido-rosa-longo-brilho-marcaX” (“marcaX”, aqui, é o nome do fornecedor do vestido). Usar traços em vez de sublinhados também é uma prática que ajuda os mecanismos de busca.
Uma dica importante: use o Google Search Console para revisar as métricas do seu site e as consultas que envolvem os seus produtos. Essa é uma forma de obter insights relevantes para seu site.
2) Capriche nos textos alternativos
Outra técnica importante para otimizar imagens e impulsionar seu SEO é usar textos alternativos (alt text). Essa é uma descrição do contexto e do conteúdo das imagens – e que será apresentada se uma imagem não puder ser carregada.
Como muita gente não dá a devida atenção aos alt texts, essa é uma vantagem competitiva para quem utiliza essa técnica. Essa é uma forma certeira de aumentar a acessibilidade do site e impulsionar seu SEO.
Um bom alt text é:
Bastante específico
Quanto mais específica for a descrição, melhor. Inclua a mensagem da imagem, seu contexto e outras informações relevantes – mas não se preocupe em alt texts para imagens usadas somente como decoração em seu site.
Um texto curto
Ao mesmo tempo em que é específico, o alt text precisa ser curto, tendo o máximo de 125 caracteres. Esse limite ajuda você a evitar expressões óbvias, como “imagem de” (já está claro que aquela é uma foto, afinal de contas).
Rico em palavras-chave
Bons alt texts incluem pelo menos uma palavra-chave da página, o que, para o SEO, indica que aquela imagem está dentro do contexto e valoriza o ranqueamento.
3) Use dados estruturados nas imagens
Em sites WordPress, é possível aumentar o impacto do SEO utilizando dados estruturados. Essa é uma estratégia que oferece informações claras sobre a página, facilitando o trabalho dos mecanismos de busca, a indexação do site e a identificação de seus componentes.
Dados estruturados trazem informações adicionais sobre as imagens, o que ajuda o Google a relacionar cada conteúdo a consultas específicas, como detalhes de produtos ou preços. Uma dica importante é usar o site Schema.org para estruturar os dados e melhorar o desempenho do SEO das suas páginas.
4) Cuidado com os direitos autorais
As imagens existentes em seu site devem ser livres de direitos autorais, para evitar o risco de ações judiciais que prejudicam sua reputação online. Sempre que possível, use imagens licenciadas gratuitamente. E, de preferência, desde a hora de criar um site, desenvolva imagens originais e exclusivas para ele, trazendo um aspecto extra de exclusividade para suas páginas.
7 ferramentas para otimizar imagens
Agora que você já entendeu a importância da otimização de imagens para seu site e conhece as principais técnicas para trazer mais resultados, é hora de conhecer alguns dos principais otimizadores de imagem online. Essas ferramentas ajudarão você a otimizar suas imagens e melhorar a performance do seu site.
1) PicWish
O PicWish é um otimizador de imagens simples, mas funcional, que compacta os formatos de imagem mais comuns gratuitamente. O algoritmo do PicWish processa automaticamente os arquivos, trazendo resultados de qualidade que otimizam suas imagens.
2) Image Compressor
O Image Compressor tem como foco manter a qualidade original do arquivo, reduzindo seu tamanho. Também é gratuito e permite compactar lotes de até 20 arquivos por vez.
3) IMG2GO
O IMG2GO é um serviço online que otimiza imagens e permite que o usuário escolha o nível de otimização e o formato de saída dos seus arquivos. É uma ferramenta interessante para você testar diferentes compressões dos arquivos e determinar o nível mínimo de qualidade necessário para suas imagens.
4) Optimole
O Optimole consegue, automaticamente, reduzir imagens em até 80%, além de oferecer filtros e ajustes para que você faça retoques nos arquivos antes de subi-los para seu site.
5) ImageRecycle
O ImageRecycle é uma ferramenta que comprime e otimiza imagens em quase todos os formatos, como JPG, PNG, GIF e PDF. O aplicativo parte do princípio de manter a qualidade original das imagens, diminuindo seu tamanho.
6) Kraken.io
O Kraken.io apresenta vários recursos para otimizar imagens, como a redução do tamanho do arquivo e o uso de técnicas inteligentes de compactação com perdas. Na versão gratuita, ele tem um limite de tamanho de imagem de 1 MB – para arquivos maiores, é possível escolher um plano premium.
7) iLoveIMG
O iLoveIMG é um otimizador de imagens gratuito com várias ferramentas de edição, como conversão de formatos, ajustes de tamanhos e adição de marcas d’água. É possível carregar imagens para o aplicativo a partir do computador, Google Drive ou Dropbox.
Para ter um excelente desempenho em seu site, você precisa estar sempre atento aos parâmetros dos mecanismos de busca e à evolução das exigências dos usuários. Isso se aplica às imagens do seu site. A otimização das imagens do site pode contribuir muito para o desempenho das páginas, para a experiência do cliente e para a geração de leads ou vendas.
