0Logo WordpressGerar e exibir imagens avif automaticamente com o wordpress

Passei muito tempo otimizando o desempenho deste site, e, como parte do trabalho contínuo, monito novas tecnologias que podem ajudar a melhorar a velocidade para os visitantes. Eu acompanho a adoção de formatos de imagem de próxima geração há um tempo e com o suporte de navegadores da web agora bastante difundido, era hora de descobrir como fazer uso desses novos formatos no wordpress.

Existem várias etapas necessárias que dividi nos títulos abaixo

Ativar suporte em nginx

A primeira etapa é habilitar seu servidor web (no meu caso nginx) para reconhecer os tipos MIME dos novos formatos. Para fazer isso, você precisa editar mime.types, que provavelmente pode ser encontrado em /etc/nginx/mime.types. Eu adicionei a seguinte seção

Servir arquivos automaticamente onde eles estão disponíveis

O próximo passo é dizer ao nginx para servir arquivos automaticamente sempre que eles existirem (e voltar para formatos mais antigos, onde um novo arquivo de formato não existe)
Para fazer isso, primeiro edite o arquivo de configuração principal do nginx (geralmente /etc/nginx/nginx.conf) e adicione a seguinte seção dentro do http{} seção da configuração

Observe que estou apenas tentando servir jxl (JPEG-XL) ou arquivos avif, você poderia adicionar mais opções (em ordem de preferência!) se você desejar.
Próximo, você precisa adicionar o seguinte no servidor{} seção da configuração do nginx (que pode estar no arquivo de configuração principal ou em um arquivo de configuração separado, dependendo de como você configurou sua estrutura de configuração do nginx)

Agora o nginx irá procurar por image.jpg.jxl e então image.jpg.avif e então image.jpg.webp e finalmente image.jpg quando for solicitado por image.jpg por qualquer navegador que suporte os formatos mais novos. Em seguida, precisamos habilitá-los no wordpress

habilitar formatos de próxima geração no wordpress

Adicione o seguinte código ao seu functions.php (o ideal é fazer isso em um tema filho para que, ao atualizar seu tema, suas alterações não sejam substituídas)

Observe que também habilitei o suporte para SVG imagens ao mesmo tempo

Agora você pode fazer upload de imagens no formato de próxima geração e usá-las diretamente no Wordpress se quiser, mas eu não recomendo isso porque muitos navegadores mais antigos ainda não os suportam - e nós já configuramos o nginx para atendê-los de forma inteligente, então devemos fazer uso disso. O que queremos fazer é gerar automaticamente os novos formatos quando carregamos as imagens (já existem plug-ins que fazem isso para webp, mas nada que faça isso por jxl ou avif ainda).

Instale libheif

Esta etapa requer acesso à linha de comando do seu host, o que é direto se você executar um VPS, mas pode não ser tão simples se você estiver em uma hospedagem compartilhada, caso em que pode ser necessário pedir suporte ao seu host
Execute os seguintes comandos bash (estes são selecionados para Centos 8, outras distribuições podem ser um pouco diferentes)

Adicione uma função personalizada ao wordpress functions.php para compactar todas as imagens enviadas (e suas miniaturas) para o formato avif

Como com a etapa anterior de functions.php, recomendo adicionar isso em um tema filho

No momento, é isso - todas as imagens que você enviar serão convertidas em cópias avif (com os originais retidos). Você pode regenerar todas as suas imagens para criar os arquivos avif usando um plugin. Observação - ainda não configurei JPEG-A compressão XL como suporte ainda não está disponível nos navegadores convencionais (embora esteja em navegadores de pré-lançamento, por isso estará disponível em breve).

Embora eu esteja cobrindo formatos de próxima geração e otimização, tenho uma dica final - para compactar SVG imagens com gzip (ou ainda melhor zopfli e brotli). Para fazer isso, é necessária outra função personalizada ...

Bônus: SVG compressão

Observe que você precisará de gzip_static e brotli_static habilitados em sua configuração nginx.

Auto-compilar para uma versão mais recente

Descobri que no Centos a versão mais recente do heif-enc é 1.7 que tem alguns bugs ao criar avifs. Então optei por compilar meu próprio (1.12) construir e usar isso. Fazer isso foi um pouco complicado, pois exigia o codec aom como uma biblioteca compartilhada. Para fazer isso, execute os seguintes comandos bash. Certifique-se de executá-los como um usuário normal, não como o usuário root. Observe também que alguns desses comandos podem não ser estritamente necessários, demorei um pouco para fazê-lo funcionar e apenas anotei o que funcionou - não sou de forma alguma um especialista em Linux!

Depois de fazer isso, certifique-se de que funciona executando php -a e executando o seguinte comando

Você deve obter uma saída completa, não apenas um 1 erro de linha. Assumindo que funcione bem, você pode modificar seu functions.php para que cada uma das referências do shell-exec aponte para / usr / local / bin / heif-enc em vez de apenas heif-enc

Por favor envie-nos a sua opinião comentando abaixo! Se você deseja se inscrever, use o link de inscrição no menu no canto superior direito. Você também pode compartilhar isso com seus amigos usando os links sociais abaixo. Felicidades.

Deixe uma resposta