WordPress 6.5 suporta AVIF, um formato de imagem moderno que oferece melhorias significativas na qualidade e compactação de imagem em relação a formatos anteriores como JPEG, PNG e até WebP. As imagens AVIF podem ser até 50% menores que os JPEGs, mantendo a mesma qualidade de imagem. As imagens AVIF também suportam uma ampla gama de cores (incluindo HDR) e produzem imagens mais nítidas do que JPEGs, especialmente em áreas com muitos detalhes.
A partir da versão 6.5 do WordPress, você pode fazer upload e usar imagens AVIF no WordPress da mesma forma que faria com uma imagem JPEG ou PNG hoje – desde que seu ambiente de hospedagem suporte AVIF. Mudar para o formato AVIF para suas imagens provavelmente melhorará o desempenho do seu site e a experiência do visitante.
Como a AVIF ajuda você
As imagens AVIF são significativamente menores do que suas equivalentes JPEG, portanto as páginas carregam mais rapidamente e exigem menos largura de banda para serem transmitidas. As imagens AVIF ainda obtêm todos os benefícios das imagens responsivas, Fetch Priority e carregamento lento que o WordPress suporta por padrão. Por fim, os AVIFs são suportados em todos os principais navegadores, portanto, a maioria dos sites pode começar a usá-los hoje.
Criando imagens AVIF
Muitas ferramentas de edição de imagens suportam a 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 Squoosh. Depois de salvar suas imagens como AVIF, carregue-as no WordPress e use-as como faria com qualquer outra imagem. O WordPress também pode criar AVIFs para você automaticamente. Para mais detalhes, consulte o item FAQ abaixo.
Usando imagens AVIF no WordPress
As imagens AVIF funcionam como qualquer outro formato de imagem no WordPress, com algumas notas importantes:
AVIF no WordPress depende do suporte da biblioteca de processamento de imagens do seu servidor web (o WordPress possui suporte integrado para Imagick e LibGD para processamento de imagens). Você pode verificar o suporte AVIF no wp- admin visitando Ferramentas -> Site Health, clicando na guia “Info” e expandindo a seção “Media Handling” e, finalmente, procurando por “AVIF” na lista de formatos suportados.
Se o seu público incluir um número significativo de usuários em um navegador não compatível, evite usar imagens AVIF ou coloque um polyfill do navegador na fila .
Perguntas frequentes
P: Como ajusto o nível de compactação usado para imagens AVIF geradas?
O wp_editor_set_quality filtro pode ser usado para definir a configuração de qualidade. O tipo MIME passado permite a configuração por tipo, por exemplo:
// Use a quality setting of 75 for AVIF images.
function filter_avif_quality( $quality, $mime_type ) {
if ( 'image/avif' === $mime_type ) {
return 75;
}
return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );Como posso gerar imagens AVIF sem perdas?
Usar um nível de compactação de 100 definirá o AVIF para o modo sem perdas.
P: O WordPress pode criar imagens AVIF quando eu carrego JPEGs?
Sim. Os desenvolvedores podem usar o image_editor_output_formatfiltro para especificar esse tipo de transformação para uploads. Aqui está um exemplo:
// Output AVIFs for uploaded JPEGs
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' );Se eu usar o WordPress multisite , todos os meus sites funcionarão com imagens AVIF?
Enquanto isso, para garantir que todos os sites existentes em uma rede permitam arquivos AVIF, você pode usar o site_optionfiltro em um plugin mu de rede para adicionar avif aos tipos de arquivo permitidos para todos os sites da rede:
// Ensure all network sites include AVIF support.
function filter_site_option_upload_filetypes( $filetypes ) {
$filetypes = explode( ' ', $filetypes );
if ( ! in_array( 'avif', $filetypes, true ) ) {
$filetypes[] = 'avif';
}
return implode( ' ', $filetypes );
}
add_filter( 'site_option_upload_filetypes', 'filter_site_option_upload_filetypes' );