Google anuncia suporte a imagens AVIF. Como utilizar este formato com o WordPress?

Nesta sexta-feira, o perfil do Google Search Central no linkedin anunciou o suporte ao formato de imagem AVIF, algo que o WordPress já suporta faz algum tempo.

Abaixo, vejamos uma imagem destacando a publicação original.

Para muitas pessoas, este formato de imagem pode ser algo novo, então vamos ao artigo aqui que te explica mais sobre o formato e como as utilizar em um site WordPress!

O Formato de imagem AVIF

O AVIF é um formato de arquivo de imagem aberto baseado no padrão de compressão de vídeo AV1.

Imagens neste formato são significativamente menores do que seus equivalentes JPEG, então as páginas carregam mais rapidamente e usam menos largura de banda para transmitir. As imagens AVIF ainda obtêm todos os benefícios das imagens responsivas, Fetch Priority e lazy loading que o WordPress suporta por padrão.

Algo interessante a se observar, no que tange tamanho e qualidade deste formato, as imagens AVIF podem ser até 50% menores que JPEGs, mantendo a mesma qualidade de imagem. Também suportam uma ampla gama de cores (incluindo HDR) e produzem imagens mais nítidas que JPEGs, especialmente em áreas com alto nível de detalhes.

Finalmente, os AVIFs são suportados em todos os principais navegadores, então a maioria dos sites já pode começar a usá-los hoje.

Criando imagens AVIF

Muitas ferramentas de edição de imagem suportam exportação para AVIF. Você também pode usar ferramentas de conversão de linha de comando ou ferramentas de código aberto baseadas na web como o Squoosh. Depois de salvar suas imagens como AVIF, você pode as utilizar em seu site WordPress como faria com qualquer outra imagem.

O WordPress também pode criar AVIFs para você automaticamente, e como esta é a especialidade da casa aqui, separei algumas dicas para vocês.

Usando imagens AVIF no WordPress

Desde a versão 6.5 do WordPress, as imagens AVIF funcionam como qualquer outro formato de imagem, com algumas notas importantes: O formato AVIF no WordPress depende do suporte na biblioteca de processamento de imagens do seu servidor web (o WordPress tem suporte integrado para Imagick e LibGD para processamento de imagens).

Você pode verificar o suporte a AVIF no painel administrativo do WordPress (o wp-admin) visitando Ferramentas > Saúde do Site, clicando na aba “Info” e expandindo a seção “Manuseio de Mídia”, e finalmente procurando por “AVIF” na lista de formatos suportados. Se o seu público inclui um número significativo de usuários em um navegador não suportado, evite usar imagens AVIF ou utilize a biblioteca AVIF polyfill no cabeçalho de seu site WordPress.

Como ajusto o nível de compressão usado para imagens AVIF geradas?

O filtro wp_editor_set_quality pode ser usado para definir a configuração de qualidade. O mime type passado habilita a configuração por tipo, por exemplo:

// Definindo a qualide 80 para imagens AVIF. Valores aceitos de 0 a 100.

function filter_avif_quality( $quality, $mime_type ) {
	if ( 'image/avif' === $mime_type ) {
		return 80;
	}
	return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );

Como posso produzir imagens AVIF sem perdas?

Usar um nível de compressão de 100 definirá o AVIF para seu modo sem perdas.

O WordPress pode criar imagens AVIF quando eu carrego JPEGs?

Sim! Desenvolvedores podem usar o filtro image_editor_output_format para especificar esse tipo de conversão para uploads.

// Criando o Output de AVIFs para JPEGs enviados ao servidor
function filter_image_editor_output_format( $formats ) {
	$formats['image/jpeg'] = 'image/avif';
	return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );