Otimize suas imagens com tamanhos de imagem predefinidos [Dica do WordPress]

Otimizar imagens em um site é uma tarefa assustadora. Você pode optar por usar menos imagens, imagens compactadas, sprites ou svg; A lista continua. Um lugar onde muitos sites do WordPress são exibidos é na definição de tamanhos de imagem, o que é um aspecto crucial da otimização de sites com conteúdo pesado.

Os tamanhos das imagens são vitais porque as imagens são criadas automaticamente de acordo com os tamanhos fornecidos quando as imagens são carregadas. Isso garante que, mesmo se você tiver uma imagem original de 3000px, ela nunca será usada se uma imagem de 600px for suficiente. Idealmente, um espaço amplo de 600px deve usar uma imagem de 600px em vez de diminuir.

Neste artigo, vou orientá-lo que tamanhos de imagem são e como defini-los.

Como o WordPress lida com imagens

Se você já inseriu uma imagem em um artigo do WordPress, você deve ter encontrado o seletor de tamanho de imagem. Isso permite inserir versões pequenas, médias e grandes das imagens. Os tamanhos reais para estes pode ser modificado nas configurações do WordPress.

Sempre que você carrega uma imagem através do WordPress, ela gera versões dessas imagens e as armazena separadamente. Por exemplo, se você fizer upload de uma imagem de 1200 × 800, o WordPress poderá criar versões 100 × 100, 600 × 400 e 900 × 600. Quando você insere uma imagem e escolhe "médio", a versão média atual será usada, ao contrário de uma versão reduzida do original.

Isso é extremamente benéfico porque economiza largura de banda no servidor e tempo de processamento no computador cliente. Acho que não é surpresa que baixar uma imagem de 600 × 400 seja mais rápido do que baixar uma imagem de 1200 × 800.

Se for usada uma imagem maior que precisa ser reduzida, o navegador precisa cuidar dos cálculos para que isso aconteça. Embora isso não demore horas, pode ser notado em sites com imagens pesadas.

A imagem certa no lugar certo

O objetivo final deve ser use sempre tamanhos de imagem apropriados. Se você precisar de uma imagem de 440 × 380, então pegue uma imagem com o tamanho exato do servidor. Existem dois lugares principais onde você vai usar as imagens enviadas: imagens em destaque e imagens no post - eu aconselho a focar em imagens em destaque primeiro.

Em todos os artigos, menos os visualmente mais direcionados, não importa se uma imagem no post tem 220px ou 245px de largura. Qualquer versão que você tenha disponível seria igualmente utilizável. As imagens apresentadas, no entanto, geralmente são exibidas em tamanhos comuns. Para listas de artigos, você pode usar uma miniatura de 178 × 178, para cabeçalhos de artigos, você pode usar uma imagem de 1200 × 600.

Além destes, você também pode querer manter uma miniatura separada / tamanho médio / grande como definido nas configurações para lhe dá acesso fácil a dimensões específicas ao adicionar imagens a postagens.

Então, o que tudo se resume a isto é: não seria ótimo se tivéssemos dois tamanhos de imagem extras que poderíamos usar para imagens em destaque? Esses tamanhos de imagem seriam criados junto com o restante quando uma imagem for carregada. A boa notícia é que o WordPress cobre uma função bem simples.

Criando tamanhos de imagem

Usando o função add_image_size () você pode definir todos os tamanhos de imagem que seu site precisa. Vamos criar os dois exemplos mencionados acima. Coloque o código abaixo no arquivo functions.php do seu tema ou no arquivo de um plugin.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Como você pode ver, esta função leva quatro parâmetros. O primeiro parâmetro permite que você defina um nome para o tamanho. O segundo parâmetro é a largura máxima, o terceiro, a altura máxima. O quarto parâmetro define o recorte rígido. Se definido como verdadeiro, a imagem será criada no tamanho exato que você especificar.

Uma vez que isso tenha sido adicionado ao seu tema ou plugin, duas novas versões de cada arquivo que você enviar serão criadas pelo WordPress.

Usando tamanhos de imagem

Esses tamanhos de imagem podem ser usados ​​em diversas funções que lidam com a recuperação de mídia. Vamos ver as imagens em destaque primeiro. the_post_thumbnail () é comumente usado para exibir a imagem em destaque de uma postagem. O código a seguir pode ser colocado em um loop do WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

O primeiro parâmetro dessa função permite especificar o tamanho da imagem a ser usada. Desde que eu especifiquei "featured_thumbnail", a versão 178 × 178 deste arquivo será usada.

Existem várias outras funções, como wp_get_attachment_image ()e wp_get_attachment_image_src () que também usam o parâmetro tamanho da imagem. Sempre que você usa essa função, você deve sempre especificar um tamanho de imagem apropriado.

Regenerando Miniaturas

Se você já tem um site, não poderá otimizar seus artigos retrospectivamente apenas definindo um tamanho de imagem. Os tamanhos das imagens só são levados em conta quando uma nova imagem é carregada, portanto eles não são aplicados às imagens já no sistema.

Não tenha medo, o plugin Regenerate Thumbnails vai melhorar as coisas! Este plugin pode regenerar as miniaturas de todas as suas imagens, levando em conta todos os tamanhos de imagem definidos. Também pode segmentar uma imagem específica, o que é útil se você tiver apenas alguns, ou você está fazendo algum teste.

Depois que suas miniaturas forem regeneradas, você verá as versões otimizadas carregadas em seu site. Você pode verificar isso visualizando a origem da imagem. Se você enviou "example.jpeg" e vê "example.jpeg" como a origem da sua imagem em destaque, algo não está correto. Se você ver “exemplo-178 × 178.jpeg” então tudo está bem; a imagem otimizada é mostrada.

Imagens responsivas

Uma dificuldade em manter um site otimizado é a capacidade de resposta. Quando vejo um artigo no iPad, uma imagem no post de um tamanho grande será reduzida, uma vez que a largura máxima será de 786 px ou mais.

A solução mais fácil é usar um plugin como o Hammy. O Hammy funciona com base na largura do conteúdo do seu tema (em oposição à largura da janela do navegador) e pode servir imagens otimizadas com base nisso. Isso é especialmente útil para usuários móveis em que o poder de processamento e a largura de banda podem ser um problema.

Otimização de imagem adicional

Como mencionei na introdução, existem inúmeras maneiras de otimizar imagens. De sprites a compressão de imagem, várias técnicas podem ser usadas para diminuir os tempos de carregamento que acompanham as imagens. Ashutosh KS escreveu um ótimo artigo apresentando 9 Plugins WordPress para melhorar o desempenho da imagem, eu sugiro dar uma lida!

Eu também sugiro dar uma olhada no Hassle Free Responsive Images, que mostra como adicionar suporte para o elemento picture, algo que você vai querer usar se quiser escrever seu próprio código.