Tudo o que Você Precisa Saber Sobre os Tamanhos de Imagem do WordPress

Os tamanhos das imagens do WordPress são mais complexos do que você poderia esperar. É essencial entender como funcionam os tamanhos de imagem no WordPress, quais são os tamanhos de imagem padrão e como definir tamanhos de imagem personalizados para gerenciar seu site de forma eficaz.

Tendo este conhecimento sob seu cinto, você terá a garantia de ter o tipo apropriado de imagens em tamanhos adequados nos locais certos para que você possa tirar o máximo proveito de sua estratégia de conteúdo visual.

Essas táticas também melhorarão a capacidade de compartilhamento de seus artigos, o que se traduzirá em maior visibilidade e tráfego. As estatísticas revelam que os leitores só se lembram de 10% do conteúdo do texto lido após três dias, mas este número dispara até 65% se você adicionar imagens visualmente atraentes ao seu conteúdo.

Neste extenso guia, você aprenderá tudo o que precisa saber sobre os tamanhos das imagens do WordPress.

Entusiasmado? Vamos lá!

Prefere assistir à versão em vídeo?

Como o WordPress gerencia as imagens que você carrega

O carregamento de imagens para o WordPress é bastante simples, mas muita coisa acontece no back-end do WordPress, pois ele lida com elas.

A primeira coisa que o WordPress faz quando você carrega uma imagem é criar três tamanhos diferentes da sua imagem. Isso significa que você acaba com quatro imagens para cada uma que você carrega:

• Miniatura
• Médio
• Grande
• Tamanho original

WordPress cria todos estes tamanhos diferentes para servir suas imagens no tamanho mais apropriado para cada visitante. Seu site sempre mostrará as imagens corretas a seus leitores com base no dispositivo que eles estão usando, acelerando e melhorando sua experiência.

Você sempre poderia editar suas imagens manualmente para fornecer estes tamanhos adicionais, mas fazê-lo com precisão em uma ferramenta como o Photoshop não é uma tarefa pequena. Envolverá uma boa dose de trabalho entediante, e é por isso que o WordPress lhe poupa o trabalho.

Tamanhos de imagem WordPress: Coisas essenciais a ter em mente

Antes de entrarmos nos aspectos mais técnicos dos tamanhos de imagem do WordPress, você deve conhecer algumas notas críticas.

Já discutimos como o WordPress cria três tamanhos de imagem padrão para você, mas e se você precisar de um tamanho diferente dos padrões do WordPress? E se você quiser mais tamanhos em geral?

Boas notícias! Você pode fazer isso facilmente. O WordPress permite alterar os tamanhos de imagem padrão e adicionar quantos tamanhos adicionais você desejar. Explicaremos isso com mais detalhes dentro de pouco tempo.

Mas antes de chegarmos a isso, você deve saber que existem requisitos específicos para que isto funcione como você deseja.

Uma delas é que você deve tentar carregar suas imagens no maior tamanho que você precisará. Embora o WordPress o torne menor para dispositivos menores, ele usará o tamanho original onde a imagem precisa estar em seu maior tamanho.

Suponha que você carregue uma imagem que seja menor do que o tamanho maior que você definiu no WordPress. Nesse caso, o WordPress não exibirá corretamente essa imagem em particular no tamanho maior. Além disso, haverá uma perda perceptível de qualidade.

Dito isto, você também deve certificar-se de não carregar imagens que sejam maiores do que o maior tamanho necessário. O WordPress nunca usará tais imagens, pois elas são muito grandes e vão comer em espaço desnecessário em seu servidor.

Assim, você deve verificar o tamanho da imagem que está carregando e certificar-se de que é o maior tamanho que precisa ser antes de carregá-la no WordPress, mas não maior que isso.

Onde e como o WordPress armazena suas imagens?

No que diz respeito ao seu painel de controle, o WordPress armazena suas imagens de upload na Biblioteca de Mídia. Você pode visualizar todas as imagens carregadas, passando o mouse sobre a opção Mídia e clicando na Biblioteca.

Você pode classificá-los por tipo de mídia (imagem, vídeo, áudio, etc.) e data. Entretanto, observe que você só poderá ordenar as imagens por data se não tiver desativado esta função nas Configurações.

Há também uma caixa de busca à direita para ajudá-lo a rastrear sua imagem carregada. Basta digitar uma palavra que você usou no título, legenda ou descrição de sua imagem para localizá-la.

Suas imagens são armazenadas nas pastas de upload do seu site (wp-content/uploads/). Para acessar esta pasta, você precisará usar um cliente FTP/SFTP. Haverá vários subdiretórios dentro da pasta de uploads do seu site, alojando suas imagens por data de upload (assumindo que você tenha deixado a opção de ordenar por data ativada em suas Configurações).

Você também pode criar pastas personalizadas para seus arquivos de mídia, mas recomendamos fazer isso somente se você se considerar um usuário avançado.

Quais são os tamanhos de imagem padrão do WordPress?

Quando se trata de WordPress e tamanhos de imagem, estamos sempre olhando para quatro diferentes, com seu arquivo de imagem original e os três tamanhos diferentes que o WordPress cria por padrão:

• Tamanho de miniatura (Thumbnail): 150px (quadrado)
• Tamanho médio: Largura e altura máximas de 300px
• Tamanho grande: Largura e altura máximas de 1024px
• Tamanho original: O tamanho original de sua imagem

Mais uma vez, como mencionamos anteriormente, você vai querer carregar suas imagens em 1024px se você planeja usar apenas estes tamanhos de imagem padrão. Isso permitirá que suas imagens sejam servidas corretamente mesmo no tamanho maior, o que pode não ser possível se sua imagem for de tamanho menor do que o tamanho maior que o WordPress está usando (que é 1024px por padrão).

Qual é o tamanho ideal da imagem de destaque do WordPress?

As imagens de destaques do WordPress são fundamentais para o engajamento do leitor. Assim como a capa de um livro, a imagem de destaque oferece uma prévia do que está por vir no conteúdo.

Elas geralmente aparecem em artigos do WordPress, mas também podem ser incluídas em páginas e artigos personalizados. Como a imagem de destaque pode acabar sendo exibida por mecanismos de pesquisa e sites de redes sociais, é crucial escolher o tamanho certo.

Embora existam opiniões divergentes sobre o assunto, o consenso é que o tamanho ideal da imagem de destaque do WordPress é de aproximadamente 1200 × 630 píxeis. Uma imagem com essas dimensões deve se encaixar adequadamente em seu site, independentemente do tamanho da tela do leitor.

Também vale ressaltar que, para tornar suas páginas elegíveis para o feed do Google Discover (uma ótima fonte de tráfego adicional do Google), o Google destaca que o tamanho da imagem de destaque do seu WordPress deve ter pelo menos 1.200 píxeis de largura.

Mas esse é o tamanho padrão da imagem de destaque do WordPress?

Pode ser surpreendente, mas o WordPress, na verdade, não inclui uma configuração de tamanho de imagem de destaque por padrão. Em vez disso, as imagens de destaque serão exibidas com o tamanho original do upload, a menos que sejam restritas pelo design do site ou que você selecione um dos tamanhos padrão do WordPress (como “Médio” ou “Grande”).

No entanto, muitos temas do WordPress — incluindo o tema padrão — Twenty Twenty-One — definem seus próprios tamanhos de imagem personalizados para imagens de destaque, portanto, certifique-se de verificar as configurações do seu tema primeiro.

Qual é o tamanho ideal de imagem de cabeçalho do WordPress?

Assim como as imagens de destaque, as imagens de cabeçalho podem dar aos seus leitores uma prévia do tema da página. Embora não sejam tão propensas a serem compartilhadas em páginas de resultados de pesquisa ou feeds de redes sociais, ainda é importante para a velocidade e integridade do seu site que elas tenham o tamanho correto.

Como as imagens de cabeçalho muitas vezes dependem do design do site, suas dimensões podem variar. Não existe um cenário de “tamanho único”, portanto, é melhor considerar o design e a capacidade de resposta do seu site antes de escolher o tamanho ideal de imagem de cabeçalho do WordPress.

Dito isso, os desenvolvedores de temas recomendam que as imagens de cabeçalho do WordPress devem aderir a uma proporção de 16:9, como:

• 1920 × 1080 píxeis
• 1280 × 720 píxeis
• 1152 × 648 píxeis

Assim como as imagens em destaque, o WordPress não define um tamanho padrão para as imagens de cabeçalho. No entanto, o seu tema pode ter uma opção para personalizar o tamanho do cabeçalho através das configurações do tema, no menu Aparência.

Se o seu tema escolhido não lhe der a opção de mudar o tamanho da imagem de cabeçalho do WordPress, você ainda pode ajustá-lo por conta própria. Abordaremos como fazer isso a seguir.

Como mudar os tamanhos de imagem padrão (e quando você precisaria)

Embora os tamanhos de imagem padrão do WordPress funcionem bem para a maioria dos usuários, alguns usuários podem ter requisitos diferentes. Você pode preferir um tamanho um pouco maior para suas miniaturas ou um tamanho menor para as imagens grandes.

Mudar os tamanhos de imagem padrão no WordPress faria sentido quando você se encontra editando a maioria das imagens que você está carregando porque os tamanhos de imagem padrão do WordPress não são adequados para seu caso de uso.

Antes de adicionar novos tamanhos de imagem personalizados em cima dos tamanhos de imagem padrão, esteja ciente de que você estaria armazenando muito mais arquivos de imagem no banco de dados do seu site do que você precisa. Isso pode levar a problemas de desempenho para seu site e consumir mais espaço do que ele precisa.

O mesmo vale para sites baseados em imagens que precisam se ater a tamanhos de imagem específicos. Fotógrafos, designers e outros que servem imagens pesadas gostam de ter tamanhos consistentes em todo o site para garantir a uniformidade.

Da mesma forma, algumas páginas de destino também precisam exibir tamanhos de imagem específicos, e os tamanhos de imagem padrão do WordPress podem não ser adequados. E uma loja de comércio eletrônico normalmente precisa usar miniaturas maiores, que revelam mais detalhes.

Há muitas outras razões pelas quais você pode querer mudar o tamanho padrão da imagem, mas você tem a idéia.

A WordPress também entende isso, e é por isso que ela permite que você altere essas inadimplências.

Passos para mudar os tamanhos de imagem padrão do WordPress

Aqui está o processo passo a passo para alterar os tamanhos de imagem padrão no WordPress.

Passo 1: Mova seu mouse sobre as configurações e clique na opção Mídia que aparece:

Passo 2: Mude os tamanhos para o que você deseja, editando os números como fizemos abaixo:

Passo 3: Clique no botão Salvar mudanças na parte inferior.

Agora, todas as imagens que você carregar a partir deste ponto estarão nestes novos tamanhos padrão.

Alguns tutoriais por aí sugerirão que você insira “0” para os tamanhos de imagem padrão. No entanto, recomendamos contra isso, mesmo que isso possa ajudá-lo a economizar espaço.

Se você mudar estes valores para “0”, então o WordPress usará sua imagem em tamanho real (original) em todo o site e em todos os dispositivos, o que levaria a um pico maciço no uso da largura de banda em seu site. Além disso, isto quase certamente diminuiria o tempo de carregamento da página para seções que exibem muitas destas imagens.

Como adicionar tamanhos de imagem personalizados ao WordPress

Se você precisar mudar todas as suas imagens anteriores do WordPress para estes novos tamanhos, você pode usar vários ótimos plugins, que iremos cobrir em detalhes abaixo.

Para usuários que tendem a usar muitos tipos diferentes de imagens, pode ser essencial ter mais tamanhos de imagem do que os três tamanhos padrão que o WordPress oferece.

Os tamanhos de imagem padrão podem ser suficientes para os tipos de imagens padrão, mas para algo como gráficos pop-up, widgets ou imagens deslizantes, você provavelmente vai precisar de mais tamanhos de imagem.

Tamanhos de imagem personalizados lhe dão flexibilidade para melhorar a funcionalidade do seu site WordPress e economizar uma tonelada de tempo redimensionando suas imagens uma a uma.

Agora que estabelecemos isso como nossa linha de base, vamos analisar mais de perto o processo envolvido na adição desses tamanhos de imagem personalizados ao seu site WordPress.

Você tem duas opções aqui. A primeira é usar um plugin que trata de tudo para você com apenas alguns cliques. A segunda é a forma manual de adicionar as strings de código necessárias aos arquivos do seu site.

Vamos primeiro ao método com plugin.

Adicionando tamanhos de imagem personalizados usando o Image Regenerate & Select Crop

O plugin Image Regenerate & Select Crop vai além do Regenerate Thumbnails (discutido mais adiante), permitindo mais personalização e funcionalidade.

Além de permitir que você altere os tamanhos de imagem padrão, ele também permite que você regenere quaisquer imagens existentes para combinar com seus tamanhos de imagem preferidos, definir opções de corte padrão para as imagens e regenerar as miniaturas.

Uma vez instalado e ativo, você pode criar quantos novos tamanhos de imagem personalizados quiser através da página padrão do WordPress Settings > Media.

Adição manual de tamanhos de imagem personalizados

Embora seja um processo relativamente simples e fácil, a primeira coisa que você deve fazer é criar um backup do seu site no caso de algo dar errado ao fazer estes ajustes. Uma vez concluído o processo de backup, dirija-se ao painel de controle do seu site WordPress.

Uma vez lá, mova o mouse sobre a opção do menu Aparência e escolha Editor (em alguns casos, este pode ser chamado Editor de Temas).

Em seguida, encontre o arquivo functions.php e verifique se o seguinte código já está lá (use a função de busca para localizá-lo rapidamente). Se ele já estiver lá, não é necessário fazer nada.

Se não estiver lá, você precisa adicionar esta seqüência ao arquivo:

add_theme_support( 'post-thumbnails' );

Depois de adicionar este código, clique no botão Update File na parte inferior para ativar a função que lhe permite criar tamanhos de imagem personalizados.

Agora é hora de adicionar o código para os tamanhos específicos de imagem personalizados que você deseja. Procure a string “add_image_size” em seu arquivo functions.php porque é lá que você precisará fazer suas edições:

add_image_size( 'my-custom-image-size', 800, 640 );

Especificamente, você deve atualizar o que está dentro das aspas individuais com o que você deseja nomear seu novo tamanho de imagem personalizado. Sugerimos mantê-la simples e descritiva (por exemplo, “imagem principal”).

Depois de ter cuidado com o nome, você precisará declarar os próprios tamanhos de imagem. O primeiro valor numeral é a largura da imagem, enquanto o segundo é a altura da imagem.

Aqui está uma captura de tela mostrando nosso código de amostra adicionado ao arquivo functions.php:

Entendendo o reenquadramento

Quando uma imagem é reduzida sem corte, ela é simplesmente uma versão reduzida do original. Quando é “cortada” ou recortada, a parte cortada é removida da imagem final.

É exatamente como cortar fisicamente uma imagem. Se você levar sua tesoura para um retrato e cortar tudo abaixo dos ombros da pessoa, você “cortou” aquela foto. Funciona da mesma forma digital.

O objetivo é reduzir o tamanho do arquivo de uma imagem, pois o recorte não é a escolha certa. Você estaria removendo elementos que talvez queira manter enquanto mantém um arquivo de tamanho grande. Dito isto, o recorte pode fazer sentido para tamanhos de imagem que têm que se ajustar perfeitamente a uma dimensão específica, como imagens em destaque ou imagens de perfil.

Os principais temas podem ficar muito pequenos para algo como imagens em destaque. Eles ainda devem obter a exposição de que precisam quando redimensionados sem cortes. Então descubra o que funciona melhor para os diferentes tipos de imagens que você usa e defina o recurso de recorte de acordo.

Ao adicionar tamanhos de imagem personalizados, você pode fazer o WordPress cortar automaticamente as imagens com base no tamanho que você definir e no tamanho original. Você precisa adicionar “true” no final do código.

Mais uma vez, aqui está nosso exemplo acima com o recurso de cultivo habilitado.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Entretanto, se você não quiser recortar as imagens, você pode colocar “falso” em vez de “verdadeiro” ou deixar de fora as duas coisas. Não colocar nenhuma delas fará com que o código assuma automaticamente a opção “falso”. Dessa forma, o WordPress não irá recortar suas imagens.

Adicionando um tamanho de imagem personalizado ao seu tema

Depois de criar os tamanhos de imagem personalizados que você precisa, você também precisa atualizar o código em seu tema. Ao fazer isso, seu tema exibirá estes tamanhos de imagem personalizados como você desejar.

Se você é um iniciante completo na edição de código, por favor, crie um backup do seu site novamente antes de executar isto.

Agora, você precisa encontrar sua pasta de tema no loop do correio e adicionar o seguinte código a ele:

the_post_thumbnail( 'your-specified-image-size' );

Para encontrar este arquivo, clique em Editor de Temas sob a configuração Aparência. Procure o arquivo index.php aqui – esta é a pasta de tema que abriga o loop de postagem que você precisa editar.

Uma vez encontrado, acrescente o código mencionado acima, como visto na imagem abaixo:

Novamente, seria melhor se você substituísse a porção “new-homepage-feature” com o nome do tamanho da imagem personalizada que você criou.

Uma vez adicionado este código e atualizado o arquivo, você verá o tamanho da imagem personalizada em sua biblioteca de mídia. Faça o upload de uma nova imagem para experimentá-la.

Atualização de Thumbnails antigos

Ao criar e adicionar tamanhos de imagem personalizados, você tem outra tarefa em aberto: e todas as imagens antigas que você já carregou?

Não se preocupe com isso – alguns ótimos plugins WordPress são muito úteis para esta tarefa! Vamos ver como eles podem ajudá-lo a cuidar de seus antigos thumbnails.

Regenerate Thumbnails

Regenerate Thumbnails permite que você recarregue automaticamente as imagens nos novos tamanhos, incluindo quaisquer tamanhos de imagem personalizados que você tenha adicionado.

Para instalá-lo, passe o mouse sobre a opção de menu Plugins e clique em Adicionar novo. Em seguida, digite “Regenerar miniaturas” na caixa de busca.

Instale o plugin Regenerate Thumbnails clicando em seu botão Install Now.

Após a instalação estar concluída, clique no botão Ativar para começar a usá-lo.

A seguir, passe o mouse sobre o menu Ferramentas à esquerda e clique em Regenerar Miniaturas:

Você pode clicar em Regenerar Miniaturas para Todos [#] Anexos para produzir novos tamanhos de imagem para todas as suas imagens antigas também.

Como você pode ver na imagem acima, Regenerate Thumbnails também listará todos os tamanhos de imagem atualmente ativos em seu site.

Você pode encontrar alguns tamanhos de imagem que você não sabia. Muitas vezes, estes são criados por plugins, especialmente se forem para melhorar a aparência, o design ou a funcionalidade do seu site.

Usando o editor de tamanho de imagem integrado no WordPress

Como destacamos anteriormente, você só deve criar tamanhos de imagem personalizados que você usaria com freqüência. Para tamanhos de imagem que você planeja usar apenas em raras ocasiões, faz sentido editar manualmente os tamanhos de imagem usando o editor de tamanho de imagem embutido no WordPress.

Nós lhe daremos uma rápida explicação de como você pode usar o editor incorporado para editar tamanhos de imagem de forma rápida e fácil.

Primeiro, clique no menu Mídia a ser levado para a Biblioteca de Mídia. Em seguida, clique na imagem cujo tamanho você deseja ajustar.

Em seguida, clique no botão Edit Image, logo abaixo da imagem:

Você verá o tamanho atual da imagem e pode ajustá-la aqui. Basta colocar o tamanho de imagem desejado e depois clicar no botão Escala, e você está pronto para ir.

O ajuste de tamanho será automaticamente salvo assim que você atingir a Escala. Se você não gostar do novo tamanho de imagem por qualquer motivo, você pode sempre voltar ao tamanho original usando a opção Restaurar imagem original (logo abaixo do campo para o tamanho da imagem).

Edição de imagens no WordPress Gutenberg

Se você estiver usando Gutenberg, você pode editar rapidamente o tamanho de suas imagens quando as adiciona durante a criação de um artigo.

Como você pode ver na imagem acima, ao carregar uma imagem ao criar um artigo no Gutenberg, você pode selecionar os tamanhos de imagem existentes ou alterar o tamanho da imagem da direita dentro da opção artigo.

Se você adicionou seus novos tamanhos de imagem personalizados na sua pasta de tema, você os encontrará todos no menu suspenso Tamanho da imagem.

Você também poderá mudar o tamanho da imagem usando o campo logo abaixo dele. Tudo o que você precisa fazer é inserir o tamanho desejado nos campos, e a imagem será automaticamente redimensionada para suas novas especificações.

Otimizando suas imagens

Nenhum guia relacionado à imagem é completo sem uma menção à otimização da imagem. Embora tenhamos discutido a otimização de imagens em grandes detalhes, mencionar algumas dicas rápidas certamente não vai doer.

Afinal, quando você estiver adicionando tamanhos de imagem personalizados, você precisará saber como otimizar suas imagens para garantir que elas não afetem o desempenho do seu site ou consumam mais recursos do servidor do que o necessário.

Com isto dito, aqui estão algumas dicas rápidas para ajudá-lo a começar com a otimização de imagem.

Decidir sobre o tipo de arquivo

A simples escolha do tipo de arquivo certo para suas imagens pode reduzir significativamente seu tamanho. Embora existam muitos tipos diferentes de arquivos de imagem, a grande maioria são JPEG ou PNG.

O JPEG ganha a mão quando se trata de imagens coloridas. Além disso, você pode comprimir ainda mais os arquivos JPEG para reduzir seu tamanho com apenas uma ligeira redução na qualidade (se você fizer isso corretamente).

Por outro lado, PNG geralmente se torna uma opção melhor para desenhos, textos, a maioria das capturas de tela e gráficos.

Redimensionamento de imagens

Redimensionar imagens é uma maneira rápida e fácil de reduzir o tamanho do arquivo de suas imagens. Como regra geral, você deve certificar-se de que todas as imagens em seu site sejam tão grandes quanto necessário.

Se a largura máxima do seu site é de 1200px, não faz sentido ter uma única imagem em seu site com uma largura superior a esse máximo de 1200px.

Também mencionamos a importância de não criar novos tamanhos de imagem personalizados, a menos que você precise, portanto, tenha isso em mente também.

Tire vantagem da compressão com perdas

A compressão com perdas é uma ótima maneira de reduzir ainda mais o tamanho do arquivo depois que você já otimizou suas imagens usando outros métodos.

Isso significa se livrar de alguns dados de imagem, removendo o que não faria muita diferença para a qualidade da imagem, mas pode ajudar a reduzir consideravelmente o tamanho do arquivo.

Use o Lazy Loading

O carregamento preguiçoso ajuda você a priorizar o carregamento de imagens nas páginas do seu site. Ele carrega as imagens a tempo com a rolagem da página por parte do visitante. Isso significa que as imagens no topo serão carregadas imediatamente, mas tudo abaixo da dobra não será carregado até o usuário rolar para além da dobra.

Há mais, mas você encontrará tudo isso em nosso guia de otimização de imagem, então vamos saltar diretamente para alguns plugins de otimização de imagem que você pode usar.

Plugins de edição de imagem para WordPress

A beleza de usar estes plugins é que você pode realizar a otimização avançada da imagem com apenas alguns cliques sem ter que mexer em nenhuma ferramenta ou código avançado. Além disso, a maioria destes plugins são gratuitos, especialmente a otimização de um certo número de imagens ou o uso de alguns recursos básicos de otimização.

• Imagine: Nível impressionantemente personalizado de compressão e outras recursos de otimização de imagem
• Kraken: Plugin de compressão útil sem perdas, mas somente se você comprar a versão premium
• TinyPNG: Suporta compressão com perdas e trabalha com uma variedade de tipos de imagem
• Optimole: Para CDN e carregamento preguiçoso, que são formas altamente eficazes de otimizar suas imagens

Resumo

Agora você sabe tudo o que há para o tamanho das imagens do WordPress e como obter o máximo dos recursos e personalização que o WordPress oferece nesse departamento. Você deve achar a otimização do desempenho e funcionalidade do seu site muito mais fácil agora que você sabe como lidar com suas imagens WordPress por dentro e por fora.

Você pode criar tamanhos de imagem personalizados e gerenciá-los diretamente através do código do seu tema ou usando um plugin construído para essa tarefa específica. Lembre-se de atualizar suas miniaturas antigas sempre que planejar atualizar uma imagem – também uma tarefa fácil, graças aos úteis plugins que listamos acima.

Deixamos alguma coisa de fora? Deixe um comentário abaixo se você estiver tendo problemas para entender alguma coisa sobre o tamanho das imagens do WordPress!