Você deseja fazer upload de imagens para o seu site WordPress, mas não tem certeza de quais tamanhos ou tipos de arquivos as imagens devem ter? Você não está familiarizado com o processo de redimensionamento e compactação de imagens para a web? Neste artigo, explicarei por que usar o dimensionamento adequado de imagem é importante para o seu site, além de mostrar como redimensionar e compactar suas imagens usando o editor de fotos gratuito GIMP.

Por que redimensionar as imagens do seu site é importante

Vamos começar com por que redimensionar as imagens do seu site é tão importante.

De acordo com o WordPress.org, o “tamanho físico” geral de uma imagem desempenha um papel importante no desempenho de uma página do site. “O tamanho do arquivo [de uma imagem] determina o tempo que leva para carregar sua página; quanto maior o tamanho do arquivo… mais tempo [uma página] levará para carregar.” Em outras palavras, o upload de um arquivo de tamanho grande para seu site diminuirá o desempenho de qualquer página à qual você adicionar o conteúdo, geralmente aparecendo como velocidades de carregamento de página mais lentas nos dados de análise do seu site.

“O tamanho do arquivo [de uma imagem] determina o tempo que leva para carregar sua página; quanto maior o tamanho do arquivo… mais tempo [uma página] levará para carregar.”

-WordPress.org

Velocidade de carregamento da página, também conhecida simplesmente como “página velocidade” é “a rapidez com que o conteúdo da sua página é carregado”, de acordo com o Site SEO Moz. Ter páginas mais lentas pode resultar em maiores “as taxas de retorno”, que é uma métrica sofisticada que representa as sessões em que um visitante do site sai do site depois de visualizar uma única página. Páginas mais lentas também podem diminuir a quantidade de tempo que os visitantes passam nas páginas do seu site, pois as pessoas podem ficar impacientes esperando o conteúdo de uma página carregar e sair do site mais rapidamente.

Essas métricas são importantes porque você normalmente deseja que os usuários passem mais tempo em seu site e vejam mais páginas em seu site.

Eles também são importantes porque desempenham um papel na classificação do seu site nas páginas de resultados dos mecanismos de pesquisa, ou “SERPs”. SERPs são simplesmente as páginas de resultados que são exibidas quando você digita uma palavra ou frase no Google e pressiona a tecla Enter. Como imagens maiores são indicativas de más práticas de web design e afetam negativamente a experiência do usuário no seu site, mecanismos de pesquisa como o Google podem penalizar seu site por ter essas imagens maiores e classifique seu site abaixo de outros sites com melhor desempenho.

Quanto menor a classificação do seu site no Google, por exemplo, menos tráfego seu site recebe e mais tráfego irá para seus concorrentes que estão acima de você nos resultados de pesquisa.

Ao reduzir o tamanho do arquivo de suas imagens em seu site, você pode melhorar sua página velocidade e assim melhorar outras métricas como taxa de rejeição e tempo na páginae para, em última análise, melhorar seus rankings nos motores de busca.

Observe que existem muitas outras variáveis ​​importantes que entram nas classificações de pesquisa, portanto, corrigir suas imagens é apenas parte de um sólido SEO (Search Engine Optimization). No entanto, é certamente muito importante para ajudar seu site a ter uma classificação mais alta em lugares como o Google para ajudar a aumentar o tráfego do seu site.

Como redimensionar imagens para WordPress no GIMP

Então, como você redimensiona corretamente as imagens para o WordPress?

Você pode diminuir o tamanho do arquivo de uma imagem simplesmente diminuindo o tamanho geral da imagem usando dimensionamento e corte antes de carregá-lo em seu site. Além disso, você pode aplicar o que é chamado de “compressão” à sua imagem para reduzir ainda mais seu tamanho.

O GIMP, o editor de fotos gratuito e de código aberto, pode realizar todas essas tarefas enquanto também exporta para formatos de arquivo de “próxima geração” recomendados para diminuir ainda mais o tamanho do arquivo de suas imagens e melhorar o desempenho do seu site.

Dimensione sua imagem

Para iniciar esse processo, abra a imagem que você deseja enviar para o seu site no GIMP. Você pode fazer isso arrastando e soltando sua imagem do seu computador na janela de imagem do GIMP, ou você pode simplesmente ir para Arquivo> Abrir quando estiver dentro do GIMP.

Se estiver usando o método File>Open, navegue até o local da imagem em seu computador a partir da caixa de diálogo “Open Image” que aparece e clique duas vezes no arquivo de imagem assim que localizá-lo para abri-lo no GIMP (ou clique no botão botão “Abrir” no canto inferior direito da janela de diálogo).

No topo da janela do GIMP há um recurso chamado “Barra de título” (seta vermelha na imagem acima). Aqui, você verá as dimensões atuais da sua imagem (caixa verde ampliada na foto). Minha imagem é 1920×1280 – com o primeiro número, 1920, representando a largura da minha imagem (em pixels), e o segundo número, 1280, representando a altura da minha imagem. As dimensões finais da imagem que você deseja usar para sua imagem dependerão de onde no WordPress você pretende usar a imagem, bem como de qual tema você está usando.

Para este tutorial, redimensionarei minha imagem para o tamanho padrão de 1200×630 pixels recomendado para imagens de postagem de blog.

Com isso em mente, a primeira coisa que quero fazer é cortar minha imagem para que a proporção da imagem original corresponda à proporção do tamanho recomendado. Para fazer isso, vou pegar minha ferramenta de corte pressionando shift+c no meu teclado ou clicando no ícone da ferramenta de corte na caixa de ferramentas do GIMP (seta vermelha na imagem acima).

Em seguida, nas Opções de ferramenta para esta ferramenta, marcarei a caixa ao lado de “Fixed” (seta verde) e clicarei no menu suspenso para selecionar “Aspect ratio” (seta azul).

Vou digitar “1200:630” para definir minha proporção no campo de texto abaixo da lista suspensa (seta amarela). Isso corresponde à proporção do tamanho de imagem recomendado que eu quero que minha imagem final seja.

Usando a ferramenta de corte, agora clicarei e arrastarei o mouse pela imagem para desenhar a área de corte. Quando eu soltar o mouse, tudo fora da área de corte ficará esmaecido (seta vermelha na imagem acima – supondo que “Destaque” esteja marcado nas Opções da ferramenta, o que geralmente é por padrão).

Por padrão, minha área de corte tem as guias definidas como “Linhas centrais” (seta amarela na imagem acima). Eu posso alterar essa configuração usando o menu suspenso de guias na parte inferior das Opções da ferramenta. Por exemplo, mudarei meus guias para “Regra dos terços” (seta verde). As várias opções de guia aqui são baseadas em princípios de fotografia, o que facilita o enquadramento de sua composição usando esses princípios.

Você pode passar o mouse sobre qualquer um dos lados ou cantos da área de corte (ou seja, a área destacada indicada pela seta vermelha na imagem acima), depois clicar e arrastar para redimensionar o limite da área de corte. Observe que você sempre pode ver o tamanho da sua área de corte nos campos “Tamanho” localizados nas Opções da ferramenta (destacado em verde na imagem acima). Você vai querer manter o tamanho geral da área de corte maior que o tamanho final de 1200×630 da imagem.

Você também pode clicar e arrastar o mouse no meio da área de corte (seta vermelha) para reposicionar o corte na imagem.

Quando estiver pronto para cortar a imagem, clique uma vez dentro da área de corte e sua imagem será cortada.

Observe que, se a opção “Excluir pixels cortados” nas Opções da ferramenta estiver desmarcada (seta verde na imagem acima), o limite da imagem original ainda será exibido ao redor da imagem por meio de uma linha pontilhada amarela (seta vermelha). Você pode restaurar a imagem original, desfazendo o recorte, indo em Image>Fit Canvas to Layers. Apenas a área da sua imagem dentro do limite da tela será exportada.

Nossa imagem agora está cortada na proporção que queremos, mas se você olhar mais uma vez para as dimensões da imagem na “Barra de título”, verá que a imagem é 1532×804 (delineada em verde e ampliada na foto acima – suas dimensões provavelmente serão ligeiramente diferentes com base em quão grande você desenhou sua área de corte em sua imagem). Agora precisaremos dimensionar nossa imagem para corresponder às dimensões desejadas.

Para fazer isso, vá em Image>Scale Image (seta vermelha).

Na caixa "Escala de imagem" que aparece, em "Tamanho da imagem", certifique-se de que o ícone do elo de corrente ao lado das caixas "largura" e "altura" esteja vinculado (seta vermelha na foto acima). Em seguida, altere a “Largura” da sua imagem para 1200 (seta verde). Aperte a tecla tab. A altura da imagem será atualizada automaticamente para “630”. Em "Qualidade", certifique-se de que o menu suspenso "Interpolação" (seta azul) esteja definido como "NoHalo" ou "LoHalo" para obter a melhor qualidade de imagem após o dimensionamento. (Para mais informações sobre interpolação, confira meu tutorial sobre o assunto).

Aperte o botão “Escala” para dimensionar sua imagem (seta amarela).

Quando o dimensionamento estiver concluído, verifique as dimensões da imagem na barra de título. Agora você deve ver um tamanho de imagem de 1200×630 – o tamanho exato que queremos! Então o que fazemos agora?

Comprima sua imagem exportando para WebP

Recortar e dimensionar a imagem reduziu o tamanho do arquivo reduzindo a altura da imagem de 1920 para 1200 pixels e a largura de 1280 para 630 pixels, mas podemos reduzir ainda mais o tamanho da imagem aplicando compactação quando exportamos a imagem.  

Portanto, agora precisamos exportar a imagem para um formato de arquivo que aplicará compactação à imagem sem reduzir visivelmente a qualidade da imagem. Embora os JPEGs sejam sempre uma boa opção, há uma opção ainda melhor agora disponível: WebP.

O formato WebP aplica mais compactação do que JPEG, afetando a qualidade da imagem menos do que um JPEG. Em outras palavras, você obterá uma imagem com melhor aparência com um tamanho de arquivo menor. Além disso, os formatos WebP são suportados por todos os 5 principais navegadores da web.

Para exportar para WebP, vá em Arquivo>Exportar como (seta vermelha).

Clique em qualquer uma das pastas na seção “Lugares” (destacada em verde) para escolher a imagem em seu computador onde você deseja salvar sua imagem. Você pode simplesmente clicar duas vezes em uma pasta para entrar nela e ver em qual pasta você está ao lado do título “Salvar na pasta” (seta vermelha). Em seguida, renomeie sua imagem para o que quiser – apenas certifique-se de terminar o nome da imagem com a extensão “.webp” (seta azul) para exportar a imagem no formato WebP. Quando estiver pronto, clique em “Exportar” no canto inferior direito da janela (seta amarela).

Em seguida, a caixa de diálogo “Exportar imagem como WebP” aparecerá. Certifique-se de que “Lossless” esteja desmarcado (seta vermelha). Normalmente, defino a “Qualidade da imagem” para 80 (seta azul – isso é uma porcentagem, portanto, quanto menor a porcentagem, menor será a qualidade da imagem, mas menor será o tamanho do arquivo de imagem). Se sua imagem não contém transparência (ou seja, um logotipo sem fundo), você não precisa se preocupar com o controle deslizante "Qualidade alfa" (na verdade, em um experimento que realizei, abaixando a qualidade alfa de 100 para 90 na verdade um pouco aumentou o tamanho do arquivo de uma imagem com fundo transparente de 8.50 kb para 8.52 kb). O menu suspenso "Tipo de fonte" você pode manter definido como "Padrão".

Se você deseja ou não marcar ou desmarcar qualquer uma das opções de metadados, incluindo dados Exif, dados ITPC e dados XMP, é com você. Os dados Exif e XMP são metadados normalmente atribuídos por sua câmera que descrevem informações sobre sua foto, como qual modelo de câmera foi usado ou que tipo de lente foi usado. O ITPC, por outro lado, é usado por membros da imprensa e atribui informações à sua imagem como propriedade, direitos e licenciamento. Se você não tiver certeza do que fazer, deixe essas opções marcadas.

Da mesma forma, não há problema em deixar a opção “Salvar perfil de cores” desmarcada, pois a maioria dos navegadores usará automaticamente o espaço de cores sRGB para exibir sua imagem, que é o que o GIMP usa. Se você estiver usando um perfil de cores diferente, deixe-o marcado. Além disso, se você estiver preocupado com o fato de a imagem não ser exibida corretamente em determinados navegadores, deixá-la marcada adiciona apenas alguns kb ao tamanho geral da imagem.

Por fim, a opção “Salvar miniatura” pode permanecer desmarcada, o que nos economizará ainda mais alguns kilobytes.

Clique em “Exportar” (seta amarela na imagem acima) para exportar a imagem para o formato WebP. Ao comparar o arquivo WebP exportado com um arquivo JPEG que tem o mesmo tamanho e também tem sua qualidade definida como “80”, a imagem WebP chega a cerca de 30 kb, ou aproximadamente 25%, menor em tamanho que o JPEG.

Agora você pode fazer login no seu site WordPress e navegar até a página ou postagem onde deseja enviar sua imagem ou simplesmente navegar até a seção “Mídia” usando a navegação principal e arrastar e soltar sua imagem na Biblioteca de mídia. No meu caso, navegarei até “Post” usando a navegação principal (seta vermelha na imagem acima) e clicarei em “Blog Post 1” (seta azul) para editar esse post do blog.

Em seguida, abro a barra lateral de configurações de postagem (seta vermelha) e role para baixo até a seção "Imagem em destaque" e expanda esta seção (seta azul). Em seguida, clicarei na imagem para substituí-la pela minha nova imagem.

Vou navegar até a guia “Upload Files” (seta vermelha) e posso arrastar e soltar minha imagem do meu computador no WordPress (setas azuis).

Por fim, clicarei em “Definir imagem em destaque” para aplicar essa alteração (seta vermelha).

Clique em “Atualizar” (seta vermelha) para atualizar sua página com a nova imagem em destaque.

Se eu clicar em “Visualizar postagem” (seta azul)…

…agora você verá a nova imagem em destaque exibida no topo do meu blog.

Isso é tudo para este tutorial! Se você quiser saber mais sobre como projetar um site WordPress, recomendo verificar meu Curso WordPress 6.0 para não codificadores! Ou, se você quiser saber mais sobre o GIMP, confira meu Masterclass do GIMP 2.10 na Udemy!   

Assine o boletim informativo DMD

Assine o boletim informativo DMD

Inscreva-se para receber novos tutoriais, atualizações de cursos e as últimas notícias sobre o seu software de código aberto favorito!

Você se inscreveu com sucesso!

Pin It on Pinterest