Como adicionar largura e altura a imagens no WordPress automaticamente

Agora sabemos que o Google usa dados do Core Web Vitals para classificação. O Google recomendou aos proprietários de sites que melhorem a experiência da página para evitar perdas na classificação. Para verificar se sua página está correta, você pode executar o Page Speed ​​Insights ou o teste do Farol do Chrome. A pontuação do PageSpeed ​​deve ser 90 ou superior. Você também deve corrigir todos os erros das listas de teste do PageSpeed.

No teste PageSpeed ​​Insights, um dos erros mais comuns que as pessoas cometem é “Os elementos de imagem não têm largura e altura explícitas ”.

O erro é autoexplicativo. Você precisa adicionar atributos de largura e altura à tag <img> . A razão para definir os atributos de largura e altura é evitar a mudança de layout enquanto a imagem é baixada. Aqui está um exemplo de como adicionar atributos de largura e altura na tag img .

<img width="600" height="350" src="image-name.jpg">

Se você não especificou o tamanho da imagem, o layout pode se mover após o carregamento da imagem. Portanto, o conteúdo após a imagem mudará ainda mais. Os vitais essenciais da web do Google incluem Mudança de layout cumulativa que indica o quanto o layout mudou durante o carregamento da página da web.

No WordPress, você pode editar o código do tema para especificar atributos de altura e largura do logotipo, imagens em destaque, barra lateral , e imagens de rodapé. Mas a tag img não tem atributos de largura e altura nas imagens adicionadas em uma postagem usando o editor de postagem. Você pode adicionar esses atributos manualmente, mas poucas pessoas fazem isso. Agora, quando é importante adicionar atributos de altura e largura, você pode atualizar todos os artigos para adicionar atributos de altura e largura nas imagens ou tentar uma maneira automatizada.

Eu fiz um código que pode inserir atributos de largura e altura automaticamente nas imagens em sua postagem. Basta adicionar o seguinte código no arquivo functions.php do seu tema.

function add_img_size_attr($content){

  $pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';

  preg_match_all($pattern, $content, $imgs);

  foreach ( $imgs[0] as $i => $img ) {

    if ( false !== strpos( $img, 'width=' ) && false !== strpos( $img, 'height=' ) ) {

      continue;

    }

    $img_url = $imgs[1][$i];

    $img_size = @getimagesize( $img_url );

      

    if ( false === $img_size ) {

      continue;

    }

    $replaced_img = str_replace( '<img ', '<img ' . $img_size[3] . ' ', $imgs[0][$i] );

    $content = str_replace( $img, $replaced_img, $content );

  }

  return $content;

}

add_filter('the_content','add_img_size_attr');

O código busca todas as imagens dentro do conteúdo da postagem e adiciona atributos de altura e largura.