Imagens otimizadas para WordPress: compactação, atraso no carregamento

As imagens são uma parte importante do conteúdo do site, mas também são o "assassino número um" que diminui a velocidade - uma imagem de alta resolução não otimizada (por exemplo, 5 MB) pode fazer com que o tempo de carregamento da página aumente de 3 a 5 segundos, o que fará com que o usuário perca a paciência. O bom é que a otimização de imagens é simples: com os dois principais meios de "tamanho compactado" e "carregamento atrasado", você pode reduzir o tempo de carregamento de imagens em mais de 50%. Nesta seção, usaremos o plug-in para obter uma otimização totalmente automática, que pode ser realizada por novatos sem nenhum conhecimento técnico.

Por que as imagens devem ser otimizadas? 3 dados sólidos

• As imagens geralmente são responsáveis por 60%-80% do volume total de carregamento de um site (muito mais do que outros conteúdos, como texto e código).
• Para cada aumento de 1 segundo no tempo de carregamento, a taxa de rotatividade de usuários aumenta em 20% (especialmente os usuários móveis são mais sensíveis à velocidade).
• Imagens não otimizadas podem reduzir diretamente as pontuações do Google PageSpeed (afetando as classificações de SEO).

objetivo principalComprime o tamanho da imagem 50%-80% sem perda perceptível da qualidade da imagem e permite que as imagens que não estão na primeira tela sejam "carregadas sob demanda".

II. Método 1: Compactação de imagem (redução automática de volume com plug-ins)

O princípio da compactação de imagens é remover dados redundantes (por exemplo, informações do dispositivo de captura, detalhes de pixels não exibidos) e, ao mesmo tempo, manter a qualidade da imagem basicamente inalterada a olho nu. Recomendamos o plug-in "Smush" para compactação totalmente automática, que suporta o processamento em lote de imagens existentes e a compactação automática de imagens recém-carregadas.

Etapa 1: Instalar e ativar o plug-in Smush

1. Faça login no backend do WordPress e vá para "Plugins → Instalar plug-in".
2. Procure por "Smush", localize o plug-in rotulado como "Developed by WPMU DEV" e clique em "Install" → "Activate".

Etapa 2: Configure a compactação automática (não é necessário processamento manual para novas imagens)

Após a ativação, o plug-in saltará automaticamente para a página de configurações, configurando-a da seguinte forma:

1. Ativar a compactação automáticaNa guia "Settings" (Configurações), certifique-se de que a opção "Automatically compress newly uploaded images" (Compactar automaticamente as imagens recém-carregadas) esteja marcada (está marcada por padrão), de modo que os futuros uploads sejam compactados automaticamente sem a necessidade de fazê-lo manualmente.
2. Selecionar o modo de compressão：
   • A opção "Lossless compression" (compactação sem perdas) é recomendada para iniciantes: somente os dados redundantes são removidos, não há perda da qualidade da imagem, a taxa de compactação é de aproximadamente 30%-50%.
   • Se estiver procurando uma taxa de compactação mais alta (por exemplo, se o tamanho da imagem ainda for muito grande), você poderá escolher "Lossy Compression" (Compactação com perdas): uma leve perda de qualidade de imagem (quase imperceptível a olho nu), com uma taxa de compactação de até 60%-80% (precisa ser ativada clicando em "Advanced Settings" (Configurações avançadas)).
3. Salvar configuraçõesClique em "Save Settings" (Salvar configurações) na parte inferior da página.

Etapa 3: Compactação em lote de imagens existentes (uma operação, otimização em toda a rede)

Se o site já tiver um grande número de imagens não compactadas (por exemplo, imagens de artigos carregados anteriormente), use a função "Batch Compression" (Compactação em lote) para otimizá-las em um clique:

1. Na página do plug-in Smush, clique na guia "Batch Smush" à esquerda.
2. Clique em "Start Now" (Iniciar agora) e o plug-in verificará automaticamente todas as imagens em sua biblioteca de mídia.
3. Após a varredura, clique em "Apply Smush to XX images" (Aplicar Smush às imagens XX) e o sistema compactará em lote (o processo pode levar alguns minutos, não é necessário esperar, pode ser executado em segundo plano).
4. Exibir resultados de compressãoQuando a compactação for concluída, será exibido "Total Space Saved" (por exemplo, "12MB saved") e a comparação do volume de cada imagem antes e depois da compactação será listada.

Método 2: Carregamento atrasado (permitindo que as imagens "carreguem sob demanda")

O princípio do Lazy Load é:A imagem só começará a ser carregada quando o usuário rolar a tela até a posição da imagemDessa forma, a primeira tela (a primeira área que você vê quando abre a página) será carregada primeiro. Dessa forma, as imagens da primeira tela (a primeira área que você vê quando abre a página) serão carregadas primeiro, e as imagens que não são da primeira tela (como as imagens do artigo a seguir e as imagens do rodapé) não serão carregadas por enquanto, o que reduz significativamente o tempo de carregamento inicial.

Ative o carregamento atrasado em um clique com o plug-in Smush (não são necessários plug-ins adicionais)

O Smush tem carregamento retardado incorporado, sem necessidade de instalar um plug-in separado com etapas de configuração:

1. Na página do plug-in Smush, clique na guia "Delayed Loading" (Carregamento atrasado) à esquerda.
2. Marque "Enable Delayed Loading" (Ativar carregamento atrasado) e configure conforme recomendado abaixo:
   • "Delayed loading image type": selecione todos (imagem, avatar, miniatura, etc.).
   • "Exclude first-screen images" (Excluir imagens da primeira tela): é recomendável marcar (as imagens da primeira tela não são atrasadas para garantir que os usuários possam ver rapidamente o conteúdo principal quando abrirem a página).
   • "Load Animation" (Animação de carregamento): deixe-a como padrão (mostre uma leve animação para alertar os usuários de que a imagem está sendo carregada).
3. Clique em "Save Settings" (Salvar configurações) e o carregamento atrasado entrará em vigor imediatamente.

Verifique se o carregamento atrasado está em vigor

1. Abra qualquer página de artigo do site (que contenha várias imagens) e pressione F12 para abrir o navegador "Developer Tools".
2. Clique na guia "Web", atualize a página e observe o carregamento da imagem:
   • Quando carregada inicialmente, apenas a primeira imagem da tela será exibida na lista "Network" (Rede).
   • Role a página para baixo e os registros de carregamento dessas imagens aparecerão na lista "Rede" somente quando as imagens que não são da primeira tela forem exibidas, indicando que o carregamento atrasado está em vigor.

quatro. dicas adicionais sobre otimização de imagens que os novatos devem conhecer

1. escolha o formato de imagem correto (mais básico do que a compactação)

A escolha do formato correto antes de fazer o upload de uma imagem pode reduzir o tamanho na origem:

• Fotografias / Imagens complexasCom o formato WebP (30%-50% menor que o JPG e com melhor qualidade de imagem), o plug-in Smush pode converter automaticamente JPG/PNG para WebP (ative "Auto Convert to WebP" em "Advanced Settings").
• Gráficos / ícones simplesUse o formato PNG (suporta fundo transparente, tamanho pequeno), evite JPG.
• Nunca use o formato BMP ou TIFF: Esses formatos são enormes e não são adequados para uso na Web.

2. controle o tamanho das imagens (não use "imagens grandes que diminuem a exibição")

Muitos novatos fazem upload de uma imagem de alta resolução (por exemplo, 3000×2000 pixels) tirada diretamente pela câmera e a configuram para ser exibida como 300×200 pixels pelo WordPress - isso está errado! Porque o navegador ainda carregará a imagem grande original, desperdiçando largura de banda e tempo.

abordagem correta：

• Antes de fazer o upload, use ferramentas de imagem (por exemplo, "Paint" ou "Canva") para cortar o tamanho da imagem de acordo com o tamanho real de exibição (por exemplo, 1200 pixels de largura para o primeiro banner).
• Se você não souber como usar ferramentas de imagem, poderá instalar o plug-in "Imsanity" para compactar automaticamente imagens grandes carregadas em um tamanho especificado (por exemplo, largura máxima de 1200 pixels).

3. evite o uso indevido de imagens (mais não é melhor)

• Não use imagens para o que você pode explicar em palavras (por exemplo, instruções simples passo a passo).
• Várias imagens consecutivas podem ser mescladas em uma imagem rotativa (por exemplo, uma exibição de produto) para reduzir o número de imagens carregadas ao mesmo tempo.

V. Solução de problemas comuns

1. a qualidade da imagem é significativamente pior após a compactação?

• Se estiver usando "Lossy Compression" (Compressão com perdas), é possível diminuir a força de compressão nas configurações do Smush ("Advanced Settings" (Configurações avançadas) → "Compression Strength" (Força de compressão) para 50%).
• Recomenda-se usar "Compressão sem perdas" + "Formato WebP" para equilibrar o tamanho e a qualidade.

2) O atraso no carregamento leva à exibição anormal de imagens (por exemplo, em branco, desalinhadas)?

• Verifique se a imagem da primeira tela foi excluída (a não exclusão pode resultar em um atraso no carregamento da imagem da primeira tela e em um breve espaço em branco).
• Se algumas imagens precisarem ser carregadas imediatamente, você poderá inserir o nome da classe CSS da imagem na caixa "Exclude" (Excluir) nas configurações de "Delayed Loading" (Carregamento atrasado) do Smush (é necessário um conhecimento simples de código; os novatos podem desativar temporariamente o carregamento atrasado na página em que a imagem está localizada).

3. não há aumento significativo de velocidade após a otimização?

• Teste novamente com o GTmetrix (consulte Ferramentas para verificar a velocidade do site), verifique o "Waterfall Chart" para confirmar se o tempo de carregamento da imagem foi reduzido.
• Se ainda estiver lento, isso pode ser devido a outros fatores (por exemplo, resposta lenta do servidor, muitos plug-ins) e precisa ser combinado com métodos de otimização subsequentes (por exemplo, ativar o armazenamento em cache).

curto

A otimização de imagens é a operação com o maior ROI na otimização da velocidade do site - com o plug-in Smush, leva 10 minutos para ser configurada e você pode reduzir o tempo de carregamento de imagens em mais de 50%. As etapas principais são: Instalar o Smush → Ativar a compactação automática e a compactação em lote → Ativar o carregamento atrasado (excluir imagens da primeira tela).

Lembre-se de que o princípio da otimização de imagens é "apenas o suficiente": não é necessário buscar a melhor taxa de compactação ou carregar imagens de altíssima definição; o melhor é encontrar um equilíbrio entre a qualidade e a velocidade da imagem, para que os usuários possam ver o conteúdo e carregá-lo rapidamente ao mesmo tempo.