Como fazer Corretamente o Tamanho de Imagens No WordPress (PageSpeed Insights + GTmetrix Item)

Se você executou o seu site através de PageSpeed Insights ou GTmetrix, você pode ver uma recomendação para dimensionar correctamente as imagens.

para dimensionar corretamente as imagens no WordPress, expanda o item no PageSpeed Insights e visualize quais imagens são muito grandes. Redimensione – os para as dimensões corretas (encontradas em seu relatório legado GTmetrix). Por fim, substitua a imagem antiga pela nova. Reteste seu site e deve ser 100%.

imagens de tamanho adequado

como o PageSpeed Insights mostra apenas imagens não otimizadas para a única página que você está testando, comece redimensionando imagens em todo o site que aparecem em seu site (Logotipo, barra lateral e imagens de rodapé). Em seguida, execute outras páginas por meio do PageSpeed Insights e redimensione suas imagens nelas.

Posso usar um plugin para redimensionar imagens automaticamente?
não é provável. Você pode definir uma largura + altura máxima na maioria dos plugins de otimização de imagem. Mas diferentes áreas do seu site exigem dimensões específicas (as imagens precisam ser redimensionadas de acordo).

crie uma folha de dicas de dimensão de imagem.A melhor maneira de evitar erros de imagem de tamanho adequado é aprender as dimensões das diferentes áreas do seu site (Controles deslizantes, widgets, logotipo, imagens de blog de largura total, etc). Em seguida, crie uma folha de dicas de dimensão de imagem com as dimensões de cada área. Se você seguir sua folha de dicas de dimensões de imagem e redimensionar imagens antes de fazer o upload, nunca deverá ter erros de imagem de tamanho adequado.

encontre imagens superdimensionadas nos relatórios GTMetrix Legacy

os relatórios GTMetrix legacy mostram as dimensões corretas para suas imagens grandes.

crie uma conta GTmetrix gratuita e vá para contas > padrão para relatórios legados > ativar.

execute uma página através do GTmetrix e visualize a seção” Servir imagens em escala”. Expanda suas recomendações e você verá as dimensões corretas para as quais essas imagens devem ser redimensionadas.

 servir imagens em escala GTmetrix

você também pode verificar manualmente se as imagens são muito grandes. Clique com o botão direito em uma imagem > copiar endereço da imagem.

Copiar endereço da imagem

em seguida, cole o URL da imagem em uma nova guia do navegador. Se você comparar a imagem mostrada em seu site com o URL da imagem, verá que há uma diferença notável em seus tamanhos. Isso significa que a imagem precisa ser dimensionada. Ao comparar as duas variações de suas imagens lado a lado, você pode ver o tamanho da imagem (e por que a página em que está pode estar carregando devagar).

Escala vs fora de escala da Imagem

Redimensionar Imagens Para Corrigir Dimensões

Baixar a imagem antiga e abra-a em sua ferramenta de edição de imagem de escolha (eu uso o GIMP). Redimensionar e / ou cortar a imagem para as dimensões recomendadas pelo GTmetrix. Algumas ferramentas de edição de imagens permitem compactar imagens e remover dados EXIF, o que tornará a carga da imagem ainda mais rápida.

Dimensionamento de Imagem GIMP

Você também pode cortar e redimensionar imagens diretamente no WordPress:

Dimensionamento de Imagem No WordPress Media Editor

Substituir A Antiga Imagem Com O Novo

Upload sua nova imagem para o WordPress, em seguida, substituir a imagem antiga com a nova.

 imagem do Widget sem escala

imagem do Widget em escala

reteste a página em GTmetrix

reteste a página em GTmetrix (ou PageSpeed Insights) e o erro deve ser corrigido.

 servir imagens em escala WordPress

imagens de tamanho adequado no celular

dimensionar corretamente as imagens é diferente no celular.

se você se inscrever para uma conta GTmetrix premium, poderá testar a velocidade do seu celular no Android. É provável que você veja mais erros de imagem em escala se o seu site não estiver usando imagens adaptativas, o que significa redimensionar automaticamente as imagens para dispositivos móveis (Isso geralmente é feito por um plug-in).

Passo 1: Executar o seu site através de GTmetrix Android, do Teste:

GTmetrix de Teste Móvel

Servir em Escala de Imagens Em dispositivos Móveis

Passo 2: Encontre sua experiência móvel dimensões fornecidas por GTmetrix:

o Máximo de Largura de Fundo

Passo 3: Instalar um Adaptativa de Imagens plugin (eu recomendo ShortPixel ou Adaptativa de Imagens).

ShortPixel Adaptive Images

Passo 4: Defina as dimensões fornecidas pelo GTmetrix como a largura máxima de fundo.

Largura máxima de fundo

Etapa 5: Execute novamente seu site através do teste móvel do GTmetrix para garantir que não haja erros.

GTmetrix Mobile Test

Etapa 5: Configure outras configurações em seu plug-in adaptive images (ShortPixel inclui suporte a WebP, imagens de carregamento lento, corte inteligente e remoção de dados EXIF). Isso também pode ajudar.

Redimensionar Imagens Em Várias Páginas

Se você usar a mesma imagem em várias páginas/posts e isso precisa ser corrigido, você pode redimensionar a imagem, copiar HTML e, em seguida, usar o Melhor de Pesquisa Substituir plugin para corrigi-lo em várias páginas.

Passo 1: Instale o melhor plugin de substituição de pesquisa.

Etapa 2: Copie o HTML da imagem antiga e cole-o no campo “Pesquisar por” no plugin de substituição de Pesquisa melhor. Você pode usar o editor de texto do WordPress para ver o HTML da imagem. Notar: Melhor pesquisa substituir só substituirá uma imagem se contiver o HTML exato que você inserir no plugin.

 melhor pesquisa substituir por imagens

Etapa 3: Copie o HTML da nova imagem e cole-o no campo “Substituir por”.

 servir imagem em escala HTML

Passo 4: Selecione as tabelas (por exemplo. postagens) você deseja digitalizar e desmarcar “Executar como varredura Seca.”

Passo 5: Clique em “Pesquisar / substituir” e o plugin substituirá a imagem antiga pela nova.

crie uma folha de dicas de dimensões de imagem

como mencionei anteriormente, você deve medir as dimensões de todas as áreas do seu site para que você possa redimensionar imagens antes de enviá-las. Você pode encontrar essas dimensões no GTmetrix (somente se tiver erros de imagem de tamanho adequado) ou também pode encontrá-las na folha de estilo CSS do seu tema.

Exemplo:

  • Slider de imagens: 1900(w) x 400(h)
  • Carrossel de imagens: 115(l)
  • Widget de imagens: 414(w)
  • largura Total do blog postar imagens: 680(w)
  • imagens em Destaque: 250(l) x 250(h)
  • Yoast Facebook OG imagem: 1200(l) x 628(h) passo 11
  • Yoast Twitter OG imagem 1024(w) x 512(h) – passo 11

680 Pixel Largura do Retângulo

Meu blog largura é 680px, assim, para cada imagem, em que este post foi redimensionada para 680px.

Plugins WordPress Corretamente o Tamanho de Imagens

a Maioria dos plugins de otimização de imagem tem a opção de redimensionar as imagens, no entanto, isso não é muito eficaz quando tentando corrigir os erros no GTmetrix, uma vez que diferentes áreas do seu site chamado para diferentes dimensões. É mais para garantir que suas imagens não sejam absolutamente enormes. Como diz O plugin Imagify, a largura máxima não deve ser menor do que a sua maior miniatura.

Smush

Redimensionar Imagens Smush

Imagify

Redimensionar Imagens Imagify

™ Image Optimizer

Redimensionar Imagens EWWW

Outras Maneiras De Otimizar Imagens

eu escrevi um tutorial completo sobre como otimizar imagens no WordPress, que inclui:

  • Comprimir imagens
  • Veiculação de imagens a partir de um CDN
  • Redimensionamento GIFS
  • Remover dados EXIF
  • carregamento lento de imagens + vídeos
  • Cloudflare Mirage, polonês, Proteção de Hotlink

GTmetrix Imagem Otimizações

Procurando Mais Velocidade Tutoriais?
Aqui estão outros tutoriais que escrevi:

  • WordPress Guia rápido (este manual teve sempre)
  • Como configurar o WP Foguete (o plugin de cache, eu recomendo)

eu também tenho um vídeo incrível WordPress otimização de velocidade:

Perguntas Frequentes

Como faço para corrigir imagens de tamanho adequado?

baixe a imagem, redimensione-a para corrigir as dimensões fornecidas pelos relatórios legados do GTmetrix e substitua a imagem antiga pela nova.

Posso usar um plugin para dimensionar corretamente as imagens?

Não, diferentes seções do seu site exigem diferentes dimensões de imagem. Você precisa dimensionar suas imagens para se adequar a essas dimensões únicas.

quais imagens devo começar a redimensionar primeiro?

comece dimensionando imagens que aparecem em várias páginas, como seu logotipo, barra lateral e imagens de rodapé.

onde encontro as dimensões corretas de uma imagem?

os relatórios GTMetrix legacy informam as dimensões corretas de cada imagem quando você expande o item na guia PageSpeed.

Deixe uma resposta

O seu endereço de email não será publicado.