Como servir facilmente imagens em escala no WordPress (passo a passo)

Deseja exibir imagens em escala em seu site WordPress?

Os iniciantes geralmente deixam seus sites mais lentos ao carregar imagens sem prestar atenção ao tamanho delas.

A veiculação de imagens com as dimensões corretas melhorará o desempenho do WordPress sem reduzir a qualidade.

Neste artigo, mostraremos a você como servir facilmente imagens em escala no WordPress.

Por que usar imagens em escala no WordPress?

Em seu site WordPress, você precisará de imagens para as postagens do blog, miniaturas, cabeçalhos de página, imagens de capa e muito mais.

Dependendo do seu tema, essas imagens ocuparão um determinado número de pixels. Por exemplo, sua imagem em destaque pode ocupar 680×382 pixels e uma miniatura de 100×100 pixels.

É importante usar imagens que tenham sido dimensionadas para se ajustar às dimensões corretas necessárias para seu site. Por exemplo, se suas imagens em destaque ocuparem 680×382 pixels, você deverá salvá-las exatamente nesse tamanho.

Caso contrário, seu site poderá ficar lento ou a qualidade da experiência do usuário será reduzida. Aqui estão alguns dos motivos mais comuns para isso:

• Seus visitantes terão que baixar arquivos maiores do que o necessário, aumentando o tempo de carregamento.
• Se você usar imagens com menos pixels do que o espaço permitido, elas parecerão borradas quando exibidas em um tamanho maior.
• Seu site terá que alterar os tamanhos das imagens em tempo real, o que significa que ele terá que executar mais processos antes de poder mostrar o conteúdo aos usuários.

De qualquer forma, isso proporcionará uma experiência ruim aos seus usuários e também poderá afetar negativamente o SEO da sua imagem.

É por isso que, se você testar o desempenho do seu site usando a varredura do GTMetrix, ele geralmente recomendará que você forneça imagens em escala para acelerar o site.

Dito isso, vamos dar uma olhada em como servir facilmente imagens em escala no WordPress. Abordaremos dois métodos:

Método 1: Servir imagens em escala com um plug-in

A maneira mais simples de fornecer imagens em escala é usar um plug-in que exibe automaticamente as imagens do site no tamanho correto. Esse método é o mais fácil, mas não permite tanta flexibilidade quanto o segundo método.

O plug-in gratuito Optimole é um dos melhores plug-ins de compactação de imagens do WordPress e dimensionará automaticamente suas imagens. No entanto, se você receber mais de 5.000 visitantes por mês, precisará da versão premium.

Primeiro, você precisa instalar e ativar o plug-in Optimole. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você será automaticamente levado à página Mídia ” Optimole e será solicitado a se inscrever para obter uma chave de API ou a inserir sua chave de API existente. Isso é muito fácil.

Basta verificar se o seu endereço de e-mail está correto e clicar no botão “Create & Connect Your Account”. A conexão com a Optimole ocorrerá automaticamente. Você não precisará visitar outro site nem colar manualmente a chave.

O Optimole começará a otimizar suas imagens em segundo plano. Ele escolherá automaticamente o tamanho correto da imagem para o dispositivo e o navegador de cada visitante e fornecerá as imagens a partir da rápida CDN do Optimole Cloud Service.

Ao clicar na guia “Settings” (Configurações), você verá que as imagens em seus posts e páginas serão automaticamente substituídas por imagens otimizadas e dimensionadas pelo Optimole.

Isso não é feito em tempo real porque é feito por meio de uma CDN, o que significa que seu site não sofrerá um impacto no desempenho.

Além disso, o plug-in ativou o lazy load, o que significa que as imagens na página que não estão visíveis no momento não serão carregadas até que sejam necessárias. Essa é outra maneira eficaz de reduzir o tempo de carregamento da página e melhorar o desempenho do site.

Essas configurações funcionarão bem para a maioria dos sites. No entanto, você pode personalizar ainda mais o Optimole usando as configurações no menu “Advanced” para ver o que funciona melhor para o seu site.

Se você fizer alguma alteração nas configurações, não se esqueça de clicar no botão “Salvar alterações” na parte inferior da página.

Método 2: Servir imagens em escala manualmente

Você também pode dimensionar imagens sem um plug-in. Há três maneiras de fazer isso: use o software de edição de imagens, o recurso de edição de imagens na Biblioteca de mídia do WordPress ou altere os valores nas Configurações de mídia do WordPress.

Dimensionamento de imagens com software de edição de imagens

Você pode dimensionar suas imagens para as dimensões corretas antes de carregá-las no site usando um software de edição de fotos no computador, como o Adobe Photoshop ou o Affinity Photo.

O software permite que você escolha o número correto de pixels para a imagem e salve-a com um tamanho de arquivo pequeno e no formato de arquivo que preferir.

Por exemplo, aqui está uma captura de tela demonstrando a ferramenta de corte do Affinity Photo.

Além de acertar o tamanho da imagem desde o início, há outras coisas que você pode fazer antes de carregar as imagens para garantir que elas não deixem o site lento.

Para obter mais informações, consulte nosso guia sobre como otimizar imagens para desempenho na Web.

Dimensionamento de imagens na biblioteca de mídia do WordPress

Você sabia que pode fazer a edição básica de imagens no WordPress? O recurso “Editar imagem” do WordPress permite cortar, girar, inverter e dimensionar imagens.

Ao editar um post ou uma página, você precisa clicar na imagem que deseja editar. Em seguida, clique no botão “Replace” (Substituir) e selecione “Open Media Library” (Abrir biblioteca de mídia) no menu.

Isso abrirá a Biblioteca de mídia do WordPress com a imagem selecionada.

À direita, há uma área onde você pode adicionar texto alternativo, um título, uma legenda e uma descrição para sua imagem. Você também encontrará um link “Editar imagem”.

Basta clicar nesse link para acessar a página “Editar imagem”.

Aqui, você encontrará uma visualização da imagem, botões de edição e várias outras opções que são úteis ao dimensionar ou cortar a imagem.

Para dimensionar a imagem, basta alterar um dos valores de “Novas dimensões” em Dimensionar imagem, à direita.

Por exemplo, esta imagem tem uma resolução muito grande de 2560×1637 pixels. Podemos reduzi-la para uma largura de 1.200 pixels digitando no primeiro campo “Scale Image”.

Tudo o que você precisa alterar é a largura, pois o valor da altura da imagem será alterado automaticamente para manter a imagem proporcional.

Depois disso, basta clicar no botão “Scale” (Escala) para alterar a resolução da imagem.

Observe que você só pode reduzir a escala de uma imagem no WordPress. Não é possível aumentar o tamanho das imagens aumentando as dimensões da imagem.

Para obter instruções detalhadas, consulte nossos guias sobre como fazer a edição básica de imagens no WordPress e como cortar e editar miniaturas de postagens no WordPress.

Ajuste de tamanhos de imagem nas configurações de mídia

Quando você faz upload de imagens para o seu site, o WordPress cria automaticamente várias cópias em tamanhos diferentes. Você pode personalizar esses tamanhos visitando a página Configurações ” Mídia na área de administração do WordPress.

Aqui, você pode alterar facilmente as dimensões dos tamanhos de imagem em miniatura, médio e grande.

Em alguns sites, você pode precisar de mais tamanhos de imagem do que apenas miniatura, médio e grande. Você pode saber como criar esses tamanhos seguindo nosso guia sobre como criar tamanhos adicionais de imagem no WordPress.

Se você alterar os tamanhos de imagem padrão ou criar tamanhos de imagem adicionais, somente as novas imagens serão afetadas. Você precisa gerar novamente os tamanhos de imagem para as imagens existentes.

Quando você adiciona uma imagem a um post ou página, pode selecionar um tamanho de imagem nas configurações de bloco à esquerda da página.

Esperamos que este tutorial tenha ajudado você a aprender como servir imagens em escala no WordPress. Você também pode consultar nosso guia sobre otimização de SEO de imagens do WordPress ou dar uma olhada em nosso artigo sobre o uso de IA para gerar imagens para publicações de blog.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.