Como otimizar imagens para melhorar a velocidade da página e o SEO do seu site

Um erro comum que vi ao analisar páginas da Web ao vivo e atualmente elaboradas para sua estratégia de SEO SaaS é que as imagens são mal otimizadas para a saúde e a velocidade do site em geral. Todos nós já ouvimos a frase “Uma imagem vale mais que mil palavras”. Mesmo sendo clichê, é verdade e talvez valha ainda mais.

As imagens prendem nossa atenção e nos ajudam a nos relacionar com o que estamos vendo. Eles constroem uma história e tendem a causar uma impressão muito mais duradoura do que apenas um grande corpo de texto. Muitas pessoas adoram obter imagens de sites de fotografia sem direitos autorais, como o Unsplash.

O Google prioriza páginas rápidas. Ao ignorar as etapas necessárias para a otimização de imagem, você está se preparando para uma batalha difícil. O número de imagens adicionadas a uma página afeta diretamente o tempo de velocidade de carregamento. Quanto mais imagens uma página tiver, mais lenta será a velocidade de carregamento. Neste guia, visitaremos as 5 etapas pelas quais passo ao otimizar imagens para velocidade da página e mecanismos de pesquisa.

Cortar e redimensionar sua imagem

Por padrão, a foto que baixamos é muito grande e de alta qualidade. Decidir o tamanho ou a resolução que essa imagem deve ter é determinado pelo maior tamanho que sua imagem será visualizada. As pessoas pensam que têm uma imagem da mais alta qualidade para impressionar seus clientes ou até a si mesmas, mas não percebem esse impacto muito negativo. Ao decidir o tamanho da imagem, pense no maior tamanho em que a imagem será visualizada.

Você não precisa que as dimensões da imagem sejam 6000 x 6000 pixels se ela for usada apenas para uma pequena imagem de perfil ou headshot que será vista em 300 x 300 pixels. Pela minha experiência, acho que a maior imagem da página será a imagem principal no topo. Um tamanho seguro para manter a qualidade seria torná-lo o tamanho padrão de alta definição de 1920 x 1080 pixels.

Dicas e truques: se uma imagem de banner para um blog ou página da web parecer com uma qualidade ligeiramente inferior à que você gostaria, considere aplicar uma sobreposição transparente. Isso fará com que pareça que faz parte do design e facilitará a leitura de qualquer texto.

Abaixo, estou usando o Figma para redimensionar e cortar minha imagem. O processo é muito fácil, pois tudo o que você precisa fazer é arrastar e soltar e alterar a imagem ao seu gosto. Aqui estão dois controles que você precisa para editar corretamente sua imagem usando o Figma no Windows.

• Shift + Drag - irá dimensionar a imagem inteira para cima ou para baixo, mantendo a mesma proporção.
• Ctrl + Arrastar - Irá alterar apenas a altura ou comprimento sem esticar a imagem.

Exportando como diferentes tipos de arquivo

É importante pensar no tipo de formato de arquivo que você deseja usar. Muitos formatos podem servir a propósitos diferentes. Cada um vem com seu próprio conjunto de prós e contras, dependendo da visão do usuário. Aqui estão apenas alguns dos mais comuns que eu costumo ver:

• PNG - Bom para designs gráficos ou imagens que você precisa ver os pequenos detalhes de Isso vem ao custo de um tamanho de arquivo maior.
• JPEG - Para fotografia da vida real de pessoas e locais. Ele pode ser compactado muito mais, mas perde um pouco mais de informações, pois você não precisa de tantos detalhes neles.
• SVG - Ótimo para ícones e logotipos, pois eles podem aumentar e diminuir sem perder qualidade. Isso só pode funcionar em arquivos de imagem criados.
• WEBP - Uma versão mais recente de imagens que podem substituir PNG e JPEG. WEBP tem qualidade de imagem semelhante a ambos, sendo capaz de economizar 25%-40% no espaço. A única desvantagem é que, atualmente, o navegador Safari da Apple não suporta isso, então você precisaria de JPEGs ou PNGs de backup para carregar.
• GIF - São clipes de vídeos ou animações que tendem a ser reproduzidos em loop. Eles são bons para capturar uma cena ou mostrar como a interface de um produto pode funcionar. Este artigo dá alguns bons exemplos de como eles podem ser usados. Como são uma sequência animada de imagens, geralmente terão um tamanho de arquivo mais pesado em comparação com uma única imagem.

Gosto de usar JPEG sempre que posso, pois requer menos dados, mas aqui estou usando PNGs para dar um pouco mais de clareza nas capturas de tela. Assim como no WEBP, pode haver formatos ainda mais novos, por isso é uma prática recomendada pesquisar continuamente como o Google visualiza e classifica cada um que está disponível para encontrar a resposta mais rápida e melhor para sua página da web. Aqui está um link para um guia mais aprofundado sobre os tipos de imagem mais populares.

Use um compressor de imagem

O próximo passo seria tentar obter o arquivo que você tem o menor possível compactando e reduzindo o tamanho do arquivo. Ao ir a um compressor de imagem e processar a imagem, às vezes podemos fazer com que nossa imagem seja até 90% menor em tamanho de arquivo. Uma ferramenta muito útil que gosto de usar é o Compressor. Ao usar esta ferramenta, você pode compactar até 50 imagens por dia em seu plano gratuito.

Aqui estou pegando a imagem que exportei e a estou arrastando diretamente para a seção de soltar a imagem. Após alguns segundos, a nova imagem está pronta para download e com menos de um décimo do tamanho original. Você também pode importar várias imagens e baixá-las todas de uma vez, conforme mostrado com a opção na parte inferior.

“Preguiçoso” vs “Ansioso” carregando suas imagens

Agora que você tem sua imagem no formato correto e compactada no tamanho correto, você pode pensar que está tudo pronto, mas ainda há mais algumas coisas para se certificar de fazer. Em muitos modelos e sites, a velocidade de carregamento da imagem é definida para carregar pelo padrão do navegador, o que pode fazer com que todas as imagens da página sejam carregadas ao mesmo tempo. A solução para isso é carregar a imagem com preguiça.

O carregamento "preguiçoso" adia o carregamento do elemento até que ele fique visível na página. Quando você tem mais de algumas imagens, isso pode melhorar o desempenho do site. O oposto disso é o carregamento "Eager", que carrega o elemento imediatamente. Isso geralmente se alinha com a configuração padrão da Web, pois não há preferência definida sobre qual imagem deve ser carregada primeiro ou por último.

Aqui está um exemplo no editor de blog da HubSpot. Depois de navegar até a opção avançada da imagem inserida, podemos ver que podemos definir sua configuração de carregamento. Selecione “Preguiçoso” e clique em aplicar. A imagem agora aparece sempre que o usuário rola muito mais perto dela e reduz os preciosos tempos de carregamento.

Lembre-se de adicionar texto alternativo

A última coisa a visitar é incluir texto Alt em suas imagens. Isso pode não afetar a velocidade de carregamento da sua página, mas é sempre importante considerar e adicionar. Quando você deixa a seção em branco, está perdendo muitas oportunidades de aumentar seus rankings de SERPs.

Uma coisa importante a notar é que o texto Alt está explicando o “porquê” da imagem no que se refere ao conteúdo. É indexado pelo google e lido em voz alta por conversão de texto em fala para deficientes visuais. Se você está apenas colocando uma única palavra-chave na imagem que não explica o que está acontecendo, essa pode não ser a melhor abordagem.

Aqui eu adicionei o texto alternativo na imagem. Estou baseando-o na frase saúde da velocidade da página de SEO. Em vez de incluir apenas a palavra-chave, explique também como ou qual é a ação na imagem. Decidi elaborar usando a frase “Verificando a saúde da velocidade da página SEO usando gráficos”.

Isso é muito mais informativo sobre o que pode ser a imagem para a indexação do Google e garante maior acessibilidade aos deficientes visuais.

Vamos revisar as etapas para criar/otimizar imagens:

1. Arraste a imagem para um editor de imagens como o Figma para cortar e redimensionar.
2. Exporte-o como o tipo de imagem apropriado (PNG, JPEG, SVG, WEBP, etc.)
3. Leve-o para um site de compressão de imagens como Compressor ou Image Resizer Online
4. Insira a imagem compactada em seu conteúdo como carregamento lento.
5. Adicione texto alternativo descrevendo as imagens em sua página.
6. Agora você tem a imagem perfeita para o seu site!
7. Confira o Google Search Console para verificar seus aumentos de desempenho.

Siga estes passos e você estará no caminho certo para manter e otimizar suas imagens para SEO e acelerar a velocidade da sua página, criando uma experiência de usuário fantástica!