Como acelerar seu site corrigindo suas imagens?

Imagens não otimizadas (ou mal otimizadas) são o motivo mais comum para a baixa velocidade de carregamento do seu site.

Talvez seu site carregue rapidamente, 39% das pessoas AINDA podem parar de se envolver com ele se as imagens não carregarem ou demorarem muito para carregar.

E as imagens representam 68% do peso total da página (o que é MUITO!).

Portanto, não podemos arriscar manter as imagens não otimizadas.

Portanto, siga estas técnicas rápidas para otimizar suas imagens e garantir uma velocidade de carregamento de página mais rápida.

Antes que você comece…

Verifique se as imagens são realmente responsáveis ​​pela velocidade de carregamento lenta do seu site ou se há mais problemas.
Use o Google PageSpeed ​​Insights para analisar a velocidade de carregamento do seu site.

Em seguida, role para baixo até ' Diagnóstico ' e ' Oportunidades '.

Aqui, você pode analisar detalhadamente TODOS os parâmetros que afetam sua velocidade de carregamento e descobrir oportunidades para melhorá-la.

O relatório também menciona problemas relacionados à imagem.

Essa é a maneira mais rápida de encontrar e corrigir problemas relacionados a imagens (e outros) que afetam a velocidade de carregamento do seu site.

MAS, há um problema – a ferramenta só pode encontrar esses problemas algumas semanas depois de você enviar uma página ao vivo. E não é aconselhável esperar porque a velocidade de carregamento é um fator de classificação do Google, e seus rankings SERP podem despencar se sua página carregar lentamente.

Então, por que não otimizar as imagens antes de fazer o upload? Afinal, é melhor prevenir do que remediar.

Essas técnicas lhe dirão EXATAMENTE como fazê-lo. Vamos começar.

1. Escolha o formato de imagem correto

Os proprietários de sites preferem usar estes quatro formatos de imagem:

• JPEG (ou JPG – Joint Photographic Experts Group)

É um formato de imagem compactado com uma qualidade ligeiramente reduzida. JPEGs são mais adequados para fotografias ou imagens com muitos detalhes e cores.

Imagem compactada = tamanho de arquivo menor = velocidade de carregamento mais rápida

• PNG (Gráficos de Rede Portáteis)

É um formato de imagem não compactado com maior qualidade adequado para imagens com fundos transparentes como logotipos e menos cores.

PNGs estão disponíveis em dois formatos:

• PNG-8

Possui uma paleta limitada de 256 cores, mas um tamanho de arquivo reduzido, permitindo que ele carregue mais rapidamente.

• PNG-24

Não tem uma paleta de cores limitada; portanto, é um arquivo mais pesado que leva mais tempo para carregar.

• GIF (Formato de intercâmbio de gráficos)

Os GIFs usam uma paleta limitada de 256 cores, garantindo compactação sem perdas. É mais adequado para imagens animadas.

GIFs demoram para carregar. É aconselhável usar imagens PNG-8 em vez de GIFs.

• SVG (Gráficos Vetoriais Escaláveis)

JPEG, PNG e GIF são gráficos raster (feitos de pixels) e SVGs são gráficos vetoriais (feitos de caminhos). Portanto, os SVGs não precisam de uma solicitação HTTP para carregar um arquivo de imagem.

Entre estes, qual é o formato de imagem certo para o seu site?

Depende do seu propósito.

Estatisticamente, PNG e JPEG são os formatos mais populares que os sites usam. E são as escolhas ideais devido ao equilíbrio entre qualidade de imagem e velocidade de carregamento.

2. Redimensione as imagens antes de enviá-las

Se você fizer upload de imagens sem alterar suas dimensões, elas poderão ter tamanhos maiores do que o necessário.

Para que suas imagens caibam em tamanhos de tela de diferentes dimensões, o navegador precisa redimensionar suas imagens, o que consome tempo e impacta na velocidade de carregamento do seu site.

Redimensionar antes do upload ajuda suas imagens a caber no espaço especificado na tela e carregar mais rápido nos navegadores.

Agora, o tamanho ideal das imagens varia de site para site. Depende do tema ou design do seu site.

Usando as ferramentas de inspeção integradas que a maioria dos navegadores possui, você pode determinar os tamanhos exatos das imagens usadas em seu site.

Se você quiser verificar o tamanho das imagens usadas no site do seu concorrente, pode fazê-lo da mesma forma.

Basta inspecionar os elementos de uma página da web, clicar na imagem e o navegador mostrará o tamanho exato da imagem.

Os tamanhos das imagens podem variar de acordo com a finalidade, como banner, pop-up, botão etc. Aqui estão alguns tamanhos de imagem populares (em pixels) que a maioria dos sites usa:

Você pode mantê-los como referência para redimensionar imagens que você carrega em seu site.

A largura e a altura das postagens do blog ou outras imagens de conteúdo interno não devem exceder 1.500 px e 1.000 px, respectivamente.

Existem várias maneiras de redimensionar suas imagens de forma eficaz:

• Usando o Photoshop

O Photoshop é um software de edição de fotos dedicado. Ele preserva os detalhes e a nitidez das imagens ao redimensionar.

Selecione Imagem > Tamanho da imagem . Uma caixa de diálogo aparecerá. Ele mostrará o tamanho da imagem atual.

Insira as dimensões necessárias (largura e altura) para ver o novo tamanho do arquivo de imagem. Clique em OK e o redimensionamento está concluído.

Você pode salvar o arquivo no formato desejado e enviá-lo para o seu site.

• Usando tinta

O Windows Paint é uma alternativa mais simples para redimensionar imagens antes de carregá-las.

Abra a imagem que deseja redimensionar no Paint. Selecione redimensionar nas opções da barra de ferramentas.

Insira as novas dimensões conforme sua necessidade. (O Paint mantém a proporção por padrão.) Clique em OK e redimensione sua imagem.

Salve seu arquivo em um formato apropriado e, em seguida, carregue-o em seu site.

• Usando o plug-in do WordPress

Se você estiver usando o WordPress, poderá usar um plugin como o Imsanity para redimensionar suas imagens.

O plug-in redimensionará automaticamente uma imagem que exceda os limites de tamanho especificados por você e a substituirá pela imagem enviada.

3. Comprima TODAS as Imagens

A compactação minimiza o tamanho do arquivo em bytes sem prejudicar a qualidade de suas imagens.

Ajuda a acelerar a transmissão de imagens e reduzir o espaço de armazenamento nos servidores.

Portanto, certifique-se de compactar todas as imagens antes de enviá-las para o seu site.

Existem duas maneiras de reduzir o tamanho do arquivo da sua imagem:

• Com perdas

A compactação com perdas reduz o tamanho do arquivo em grande medida. Alguns dados de pixel e metadados de imagem, como data, resolução, dimensões, cor, dispositivo etc., são removidos.

Há uma redução na qualidade da imagem, mas o olho humano não distingue entre imagens não compactadas e compactadas.

• Sem perdas

A compactação sem perdas fornece tamanhos de arquivo relativamente maiores. Ele não altera os dados do pixel, mas remove os detalhes nos metadados. Assim, não há perda na qualidade da imagem.

Você também pode selecionar o nível de compactação para suas imagens.

Quanto maior o nível de compressão (ou porcentagem), pior a qualidade…

…e quanto menor o tamanho do arquivo.

Agora, você deve estar se perguntando quando usar qual tipo de compactação.

Opte pela compactação sem perdas quando não puder comprometer a qualidade. Você pode selecionar o nível de compactação apropriado conforme sua necessidade. Funciona melhor para fotografias e imagens de sites.

Mas, se a qualidade for de menor importância, opte pela compactação com perdas. Você sempre pode usá-lo para capturas de tela ou imagens semelhantes.

Aqui estão algumas ferramentas da web que oferecem compactação de imagem eficiente:

• TinyPNG
• Kraken.io
• JPEGmini
• Triagem

Se você estiver usando o WordPress, aqui estão alguns plugins de compressão de imagem populares:

• Smush
• Optimole
• Otimizador de imagem EWWW
• TinyPNG
• Kraken.io

4. Use CDNs para imagens (e outros conteúdos)

Uma CDN é uma rede de servidores geograficamente distribuída que permite uma entrega de conteúdo mais rápida na web. Melhora o desempenho e a velocidade dos sites, proporcionando uma ótima experiência ao usuário.

Usar uma CDN para suas imagens (e outros conteúdos) acelera seu site de duas maneiras.

Primeiro , suas imagens são otimizadas (por padrão) para ocupar menos espaço nos servidores de armazenamento.

E segundo , suas imagens são armazenadas em vários servidores presentes em diferentes localizações geográficas.

Assim, sempre que os usuários visitam seu site, eles não precisam carregar arquivos de imagem do seu servidor de origem. Em vez disso, eles podem baixá-los do servidor mais próximo de sua CDN.

Usar uma CDN ajuda a melhorar a velocidade de carregamento da sua página porque a ciência ainda limita a taxa de transferência de dados. A distância entre seu servidor de origem e a localização do usuário afeta a taxa de transmissão de dados.

Se um usuário estiver localizado longe do seu servidor de origem, ele consumirá muito tempo baixando as imagens (e outros conteúdos). E mesmo que leve alguns segundos extras para carregar, os usuários voltarão do seu site.

Mas, com um CDN, os usuários poderão baixar as imagens do servidor de rede mais próximo. Será mais rápido, pois a distância entre o servidor de rede e a localização do usuário reduz significativamente.

Portanto, você deve usar um CDN para imagens.

Existem vários CDNs de qualidade disponíveis gratuitamente na internet. Você pode usar qualquer um deles e obter um carregamento de imagem mais rápido.

Aqui estão alguns CDNs populares e eficientes para sua ajuda:

• CDN Cloudflare
• Amazon CloudFront
• CDN do Google Cloud
• Imperva CDN
• CDN77.com
• Goma
• Rapidamente
• CacheFly
• Software de verniz
• Bunny.net
• 5centscdn

5. Ative o cache do navegador

Toda vez que os usuários visitam seu site, eles precisam baixar todos os recursos do site, como imagens, arquivos HTML e CSS, arquivos JavaScript, arquivos de mídia, PDFs, etc., do servidor.

Se você habilitar o cache do navegador, você instrui os navegadores a baixar e salvar os recursos do seu site no armazenamento local temporário.

Você também pode informar os navegadores da Web sobre:

• Os recursos que eles devem e não devem armazenar em cache.
• O tempo pelo qual eles devem manter um determinado recurso em cache.

Assim, sempre que os usuários revisitarem seu site, eles poderão baixar os recursos do armazenamento local em vez do servidor.

Assim, isso ajudará suas páginas da web a carregarem mais rapidamente para visitantes repetidos.

Veja a melhoria de velocidade de carregamento de página facilmente alcançável

com cache do navegador:

É mais de 100 vezes mais rápido.

A maioria das ferramentas de teste de velocidade de página sugere 'alavancar o cache do navegador' pelo mesmo motivo.

Como as imagens levam o máximo de tempo para serem carregadas em um site, habilitar o cache de imagens aumenta muito a velocidade de carregamento do seu site.

Você pode aproveitar o cache do navegador para as imagens do seu site de duas maneiras:

• Usando .htaccess

É o método mais comumente usado para implementar o cache do navegador. Você pode adicionar algumas linhas de código de cache do navegador ao seu arquivo .htaccess para habilitá-lo.

No código, defina o tipo de recurso que deve ser armazenado em cache e por quanto tempo ele deve permanecer na memória local. (De acordo com suas necessidades)

Está tudo pronto para que suas imagens (e outros recursos) sejam carregadas mais rapidamente para os usuários.

• Usando Plugins (para sites WordPress)

Os plugins automatizam o processo adicionando o código de cache do navegador dentro do arquivo .htaccess. Mas você pode não encontrar muitas opções de personalização com eles.

Aqui estão alguns plugins para acelerar seu site WordPress habilitando o cache do navegador:

• Cache Total W3
• Cache mais rápido do WP
• Cache de Super Página do WP Cloudflare
• Supercache WP
• Hipercache
• Cache do Cometa

Com isso, você pode reduzir consideravelmente o tempo de carregamento de suas imagens.

Bônus: adicione texto alternativo às suas imagens

Alt Text é uma breve descrição de uma imagem que indica claramente o que a imagem mostra.

É importante por três motivos:

• Os navegadores exibem o texto alternativo no lugar das imagens se os usuários usarem uma conexão de internet de baixa velocidade e as imagens demorarem para carregar.
• Os leitores de tela lêem em voz alta o texto alternativo para fazer com que os usuários com deficiência visual entendam do que se trata a imagem.
• Os mecanismos de pesquisa usam texto alternativo para entender melhor o conteúdo de uma página e classificá-lo adequadamente.

Agora, escrever texto alternativo para imagens talvez seja muito fácil. Você tem que pensar em como descreveria uma imagem para seu filho e tem uma ótima descrição alternativa em suas mãos.
Por exemplo, o texto alternativo correto para a imagem abaixo seria: um gato pulando no ar.

Descreve claramente a imagem. Os usuários podem ter uma ideia do que é a imagem, mesmo que não a vejam.

Portanto, você deve adicionar texto alternativo a todas as imagens que enviar em seu site.

Mas se você já carregou imagens, você pode facilmente encontrar aquelas sem texto alternativo usando o Analisador de Sites gratuito.

Ele analisa todas as imagens em seu site e mostra o número total de imagens com um atributo alt ausente.
Quando você clica em Exibir mais , ele mostra os URLs das imagens que você precisa corrigir.

Você pode otimizar o texto alternativo dessas imagens e aprimorar a experiência do usuário do seu site.

Além disso, você notará que suas imagens têm um desempenho melhor nos resultados de pesquisa do Imagens do Google. Isso porque o texto alternativo é um dos fatores de classificação de SEO mais importantes para imagens.

Então, é uma situação ganha-ganha para você!

Aumente a velocidade do seu site otimizando imagens

À medida que o uso da Internet móvel continua a crescer, veremos sites ainda mais rápidos e suaves.

Com isso dito, deixar suas imagens não otimizadas é um erro que você nunca deve fazer. Se sua velocidade for lenta, use as técnicas acima para otimizar suas imagens.

Quando você testar seu site novamente com os insights do Google PageSpeed, tenho certeza de que notará uma grande melhoria na velocidade!

Você colocou alguma das técnicas que mencionei para funcionar? Qual você acha que é o mais eficaz? Deixe-me saber a sua opinião.