Otimização de imagens do WordPress: compactação do tamanho, adição de tags alt (velocidade e SEO)

As imagens são o “portador do valor nominal” do site, mas, se não forem tratadas adequadamente, elas se tornarão um “passivo” que deixará o site mais lento e também perderão a oportunidade de melhorar o SEO. A essência da otimização de imagens é “reduzir o volume sem afetar o efeito visual” e “permitir que os mecanismos de pesquisa entendam o conteúdo da imagem”, e otamanho compactadoeAdicionar tag altsão os dois métodos mais básicos e eficazes.

Primeiro, por que otimizar as imagens?

É importante entender a importância da otimização antes de levar essa etapa mais a sério:

• Velocidade de carregamento aprimoradaImagens grandes e não otimizadas podem fazer com que uma página demore mais para carregar e os visitantes podem sair sem esperar que ela termine (pesquisas mostram que 53% visitantes abandonam uma página que leva mais de 3 segundos para carregar).
• Economizar espaço no servidorTamanho da imagem compactada: o tamanho da imagem compactada é menor, o que pode reduzir o espaço de armazenamento do servidor e o consumo de tráfego (especialmente importante para servidores que cobram por tráfego).
• Ajuda na classificação de SEOOs mecanismos de pesquisa (por exemplo, Baidu, Google) não podem “ler” imagens diretamente, eles só podem entender o conteúdo por meio de informações textuais (por exemplo, tags alt), e a otimização de imagens pode dar a elas mais exposição nos resultados de pesquisa.
• Adaptação a dispositivos móveisOs usuários de telefones celulares têm tráfego limitado, e imagens de tamanho pequeno podem reduzir o consumo de carga e melhorar a experiência móvel.

Segundo, a compactação da imagem: reduz o volume, sem perda da qualidade da imagem

O princípio da compactação de imagens é remover informações redundantes de pixels (por exemplo, diferenças de cores indistinguíveis a olho nu) de uma imagem, reduzindo o tamanho do arquivo e mantendo o efeito visual. Recomendado para iniciantesCompressão automática de plug-inNão é necessária nenhuma operação manual.

Método 1: Compactação automática com um plug-in (recomendado para iniciantes)

Plug-ins recomendados: Smush ou ShortPixel (a versão gratuita é suficiente)

Com Smush Como exemplo, as etapas são as seguintes:

1. Instale o plug-in: Plano de fundo [Plug-in] → [Install Plug-in] → Pesquise “Smush” → Clique em [Install] → [Activate].
2. Configurações básicas:
   • Após a ativação, vá para a página de configurações do plug-in e marque a opção “Automatically compress newly uploaded images” (as imagens recém-carregadas serão compactadas automaticamente, sem necessidade de fazer isso manualmente).
   • Clique em “Batch Compression” (Compressão em lote) e selecione “Compress all images” (para imagens antigas que foram carregadas na biblioteca de mídia).
3. Aguardando a conclusão da compactação: o plug-in mostrará o progresso da compactação e o espaço economizado (por exemplo, “50 imagens foram compactadas, economizando 20 MB de espaço”).

de pontaProcessamento totalmente automatizado, suporte para compactação em lote, versão gratuita para atender às necessidades de sites de pequeno e médio porte (a versão gratuita do Smush de uma única imagem de até 5 MB, a versão gratuita do ShortPixel pode ser compactada em até 100 imagens por mês).

Método 2: Compactação manual antes do upload (para otimização extrema)

Se o tamanho da imagem for particularmente grande (por exemplo, a foto original tirada pela câmera pode facilmente exceder 10 MB), é recomendável compactá-la manualmente no computador antes de carregá-la no site:

1. Ferramentas on-line(Não é necessária a instalação de software):
   • TinyPNG (\ntinypng.com): suporta PNG e JPG, alta taxa de compactação, baixa perda de qualidade de imagem e pode carregar 20 imagens por vez.
   • Ferramenta de compactação de imagens, compatível com o formato WebP (tamanho menor que o JPG 30%-50%).
2. Procedimento：
   • Abra a ferramenta → carregue a imagem → aguarde a conclusão da compactação → faça o download da imagem compactada → carregue-a na biblioteca de mídia do WordPress.

CenárioCompressão manual: Imagens importantes, como o banner da página inicial, a imagem principal da página de detalhes do produto etc. A compressão manual pode controlar a qualidade da imagem com mais precisão.

Notas de compressão:

• Imagens comuns (como as que acompanham artigos) são compactadas no formato Dentro de 200KB É isso, o controle geral da página inicial está no Dentro de 1 MB。
• priorização Formato WebP(o WordPress 5.8+ tem suporte nativo), o tamanho é cerca de 50% menor que o JPG com a mesma qualidade de imagem.
• Evite a compactação excessiva: taxas de compactação acima de 80% podem resultar em imagens borradas, especialmente aquelas com muito texto (por exemplo, capturas de tela, infográficos).

Terceiro, adicione tags alt: para que os mecanismos de pesquisa “entendam” a imagem

“A ”alt tag“ (nome completo ”atributo alt“) é a ”descrição de texto" da imagem, que é exibida quando a imagem não é carregada devido a problemas de rede. mecanismo de pesquisa entenderá o conteúdo da imagem por meio dela, afetando a classificação da imagem nos resultados da pesquisa.

Por que tenho que adicionar tags alt?

• Exemplo 1: uma imagem de “tênis vermelho”, se não houver alt tag, o mecanismo de busca só poderá saber que se trata de uma imagem; adicione alt tag “tênis vermelho leve e respirável”, o mecanismo de busca será associado aos termos de busca relacionados a “tênis vermelho”. termos de pesquisa relacionados a "red trainers".
• Exemplo 2: quando uma imagem não é carregada, o visitante vê o texto da tag alt e sabe qual deveria ser a imagem (em vez de um ícone em branco ou “a imagem não pode ser exibida”).

Como faço para adicionar tags alt?

Método 1: Adicionar diretamente ao fazer upload de imagens (recomendado)

1. Carregue uma imagem (por meio da biblioteca de mídia ou do editor) e, na janela pop-up Configurações da imagem, localize a caixa de entrada Texto alternativo (ou seja, tag alt).
2. Preencha a descrição:
   • Seja conciso e preciso (10 a 15 palavras são adequadas) e inclua o conteúdo principal da imagem (por exemplo, “frente do escritório da empresa”, “exterior de um laptop 2023”).
   • Evite empilhar palavras-chave (por exemplo, “WordPress website builder website design company” como uma descrição inválida).
   • Se a imagem for decorativa (por exemplo, divisor, padrão de fundo), deixe-a em branco ou preencha “Decorative Image” (para evitar enganar os mecanismos de pesquisa).
3. Clique em “Insert into Post” (Inserir na postagem) e a tag alt será aplicada automaticamente.

Método 2: Adicionar/modificar tags alt para imagens carregadas

1. Vá para [Media] → [Library], localize a imagem que precisa modificar e clique na imagem para acessar a página de edição.
2. Preencha ou modifique o conteúdo da caixa “Alternative Text” (Texto alternativo) à direita e clique em [Update] (Atualizar).

Tags alt vs. Título vs. Legenda: não se confunda!

Muitos iniciantes confundem esses três conceitos e fazem uma distinção simples:

• alt tag (texto alternativo)Para mecanismos de pesquisa e falhas de carregamento, que afetam o SEO, devem ser preenchidos.
• TítuloTexto a ser exibido quando o mouse passar sobre a imagem (opcional, adequado para detalhes adicionais, por exemplo, “Clique para ver a imagem em alta resolução”).
• Descrição (legenda)Texto exibido abaixo da imagem (semelhante à legenda de uma imagem, por exemplo, “Figura 1: Local da reunião anual da empresa”, preencha conforme necessário).

IV. Perguntas frequentes para recém-chegados

1. Todas as imagens precisam ter tags alt?Quase. Além das imagens puramente decorativas (por exemplo, fundos de cores sólidas, bordas), outras imagens que contenham conteúdo real (imagens de produtos, imagens de pessoas, imagens de cenas etc.) precisam ser adicionadas como um requisito básico para SEO.
2. O que devo fazer se minhas fotos ficarem borradas após a compactação?Reduza a intensidade da compactação (a taxa de compactação pode ser ajustada no plug-in) ou recompacte com uma ferramenta de compactação manual (como o TinyPNG) para manter uma qualidade de imagem mais alta.
3. As imagens no formato WebP não são exibidas em navegadores antigos?O WebP é compatível com os navegadores modernos (Chrome, Edge, Firefox, Safari 14+) e os navegadores mais antigos (por exemplo, IE) têm sido raramente usados sem preocupação indevida. Para obter compatibilidade, instale o plug-in “WebP Express”, que fornece automaticamente alternativas JPG para navegadores mais antigos.
4. Não houve alteração na velocidade do site após a otimização da imagem?Pode ser devido a outros fatores (por exemplo, servidor lento, muitos plug-ins). Você pode usar a ferramenta GTmetrix para verificar primeiro se o “tamanho da imagem” ainda é o principal problema.

A otimização de imagens é uma operação de “baixo custo e alto retorno”: 10 minutos gastos na configuração de um plug-in e na adição de tags alt podem melhorar drasticamente a velocidade e o desempenho de SEO do seu site. Adquira o hábito de “fazer upload e otimizar” e seu site será mais popular entre os visitantes e os mecanismos de pesquisa.