Otimizar imagens no WordPress

Como usar imagens corretamente no WordPress


Um dos aspectos que mais pesam o front-end dos sites são imagens.

Se você dá acesso ao seu cliente para subir imagens, como ao criar um post para o blog ou coisa similar, é possível que ele envie imagens diretamente da câmera profissional, com dimensões como 5800 x 2800 pixels para ser exibido num quadrado de 150×150 pixels.

Se você usa Bootstrap por exemplo, a largura máxima do container é 1170px, então, a menos que seja uma imagem full-screen, não faz sentido exibir uma imagem com mais de 1170px de largura.

O container do Bootstrap tem 1170px de largura. Não faz sentido exibir uma imagem maior que isso dentro de um container, pois ela sempre será redimensionada.

Agora, se você for exibir a imagem em um layout de 2 colunas, a largura não precisa ser maior do que 585px. Se for usar a imagem num layout de 3 colunas, 390px, e por aí vai.

O WordPress já vem nativamente com uma biblioteca de redimensionar e cortar imagens, basta usá-la!

Para isso, vamos adicionar o seguinte código no functions.php:

/**
* Registra tamanhos de imagens customizados
*
* Iremos definir uma largura fixa, e uma altura variável, definindo a altura como 9999.
*/
// Habilita tamanhos customizados
add_theme_support('post-thumbnails');
// col-md-12
add_image_size('imagem-1-coluna', 1170, 9999, false);
add_image_size('imagem-1-coluna-crop', 1170, 9999, true);
// col-md-6
add_image_size('imagem-2-colunas', 585, 9999, false);
add_image_size('imagem-2-colunas-crop', 585, 9999, true);
// col-md-4
add_image_size('imagem-3-colunas', 390, 9999, false);
add_image_size('imagem-3-colunas-crop', 390, 9999, true);
// col-md-3
add_image_size('imagem-4-colunas', 292, 9999, false);
add_image_size('imagem-4-colunas-crop', 292, 9999, true);

Agora, para usar, chame as imagens pelo tamanho que devem ter no seu arquivo de template. Exemplo:


<div class="col-md-6">
	<?=get_the_post_thumbnail_url($post->ID, 'imagem-2-colunas');?>
</div>

Agora atenção: Essa alteração só vai fazer efeito para novas imagens que forem enviadas. Para as que já haviam sido enviadas antes, você precisa instalar um plugin que chama Regenerate Thumbnails, por Alex Mills. Instale, regenere as thumbnails e desinstale o plugin.

Pronto! Veja seu score do GTMetrix ir às alturas com essa simples alteração!