Como definir a largura máxima das imagens do WordPress

Blog fellyph cintra - Como definir a largura máxima das imagens em seu tema WordPress 1

Imagens do WordPress são muito importantes para o sucesso do seu projeto referente a performance e SEO. Uma boa prática é limitar o tamanho máximo das imagens enviadas via media uploader. Além disso, podemos definir os tamanhos padrões das imagens via painel do WordPress e a outra forma é via functions.php.

Porque otimização de imagens é importante?

Imagens atualmente representam 75% do tamanho total de uma página, e a melhorar forma de otimizar um site é olhando para maior fatia de dados de um site e quanto menor o site mais rápido será o seu carregamento.

Além de uma melhor experiência para seus usuários, imagens podem realizar um papel importante com as métricas relacionadas ao core web vitals. Métricas que influenciam no SEO do seu site.

Assim como na web imagens possuem um papel muito importante para WordPress, existem diversas técnicas para otimização de imagens do WordPress. Esse processo também pode começar antes do envio, utilizando ferramentas de otimização de imagens como Squoosh.

Definindo tamanho padrão das imagens do WordPress

Primeiramente vamos ver como definir o tamanho padrão das nossas imagens. Vamos no nosso painel de controle acessar o seguinte endereço: menu lateral > configurações > mídia:

menu lateral do dashboard do WordPress

No painel de mídia temos a opção de escolher o tamanho imagens miniatura, tamanho médio e o grande das imagens do WordPress.

Painel de configurações de mídia WordPress

Como adicionar código no WordPress?

Primeiramente, se iremos realizar uma alteração em produção precisamos realizar um backup da nossa aplicação. Especialmente se você não está familiarizado com código.

A opção mais simples é alterando o código do functions.php esse processo é válido quando você possui um tema que não tem atualizações constantes. Caso contrário um tema filho ou um plugin será a melhor opção, porque as suas alterações não serão afetadas caso o tema principal seja atualizado.

Definindo de tamanho de imagens do WordPress via código

Agora vamos abordar a segunda forma, de definir o tamanho das imagens WordPress via functions.php adicionando o seguinte comando:

update_option( 'large_size_w', 1200 ); update_option( 'large_size_h', 1200 );
Code language: JavaScript (javascript)

Esse comando sobrescreve as opções definidas no menu. Nesse caso, definimos como 1200px a largura e a altura máxima das nossas imagens grandes, nesse caso ainda não limitamos o tamanho máximo apenas quando o usuário envia uma imagem via painel, ela terá quadro diferentes tamanhos da mesma imagem:

  • Miniatura
  • Médio
  • Grande
  • Original

Nessa caso a imagem Original terá apenas a limitação de megabytes definida pela configuração do WordPress. Para os outros tamanhos, temos as seguintes propriedades que podemos passar na função update_option:

  • thumbnail_size_w: largura do thumbnail
  • thumbnail_size_h: altura do thumbnail
  • medium_size_w: largura da imagem média
  • medium_size_h: altura da imagem média
  • large_size_w: largura da imagem grande
  • large_size_h: altura da imagem grande

Limitando a largura e altura máxima das imagens

Mas nessa caso ainda não limitamos o tamanho máximo da imagem ainda somente definimos um tamanho padrão, caso queiramos evitar que os usuários enviem imagens maiores que 2000px. Utilizamos o seguinte código:

<?php add_filter('wp_handle_upload_prefilter','bfc_validate_image_size'); function bfc_validate_image_size( $file ) { $image = getimagesize($file['tmp_name']); $maximum = array( 'width' => '2000', 'height' => '2000' ); $image_width = $image[0]; $image_height = $image[1]; $too_large = "O tamanho da imagem é maior que o permitido. O tamanho máximo é {$maximum['width']} por {$maximum['height']} pixels. Uploaded image is $image_width by $image_height pixels."; if ( $image_width > $maximum['width'] || $image_height > $maximum['height'] ) { //adiciona o erro caso a imagem seja maior que o definido $file['error'] = $too_large; return $file; } else return $file; }
Code language: HTML, XML (xml)

Quando o código acima é adicionado no functions.php do seu tema ou via plugin quando o usuário tenta realizar o upload de imagens muito grande ele irá receber o seguinte alerta:

Alerta de envio de imagens fora do limite

Plugins de otimização de imagens

Outra opção é a utilização de plugins especializados no tratamento de imagens, a plataforma WordPress possui uma vasta lista de plugins de otimização de imagens. Eu vou compartilhar agora alguns plugins que eu indico:

Então essa é mais uma dica de como organizar o seu site WordPress, para mais posts relacionados a WordPress acesse a página da categoria ou confira a minha lista de tutoriais relacionados a desenvolvimento Web.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.