AVIF: o formato de imagens que promete revolucionar a web

Uma excelente notícia para quem é obcecado por velocidade de carregamento de seus sites, como nós, é a adoção do formato de imagens AVIF pelos principais navegadores — ou seja, os baseado no Chromium, embora o Firefox também já tenha suporte experimental ao formato.

De maneira simplificada podemos dizer que, em termos práticos, o AVIF é o sucessor do WEBP, formato criado pela Google que entrega imagens muito menores que os padrões JPEG e PNG convencionais. Assim, como o WEBP, que só muito recentemente passou a ter suporte no Safari, por exemplo, vai demorar um pouco até todos os navegadores terem suporte ao AVIF, mas nem por isso os responsáveis por sites na Internet devem ignorar sua existência e possibilidades.

Veja mais do que já escrevemos sobre o WEBP:

Breve história do AVIF

AVIF é um acrônimo para AV1 Image File Format. Como sugere o nome, é um formato oriundo do AV1, que é um codec de vídeo desenvolvido em 2015, numa colaboração entre Google, Cisco e Xiph.org (que também trabalhou com a Fundação Mozilla). Seu objetivo inicial era substituir os codecs proprietários destas marcas, oferecendo uma alternativa gratuita e de alta qualidade ao mercado fragmentado e bagunçado de codecs comerciais.

E deu certo: não demorou muito para o AV1 se estabelecer como um dos melhores codecs de vídeo no mercado, sendo adotado por marcas influentes.

Com o amadurecimento do formato, a Alliance for Open Media (organização por trás do AV1) decidiu criar um formato de imagem usando os algoritmos de compressão do AV1, com o objetivo de reduzir o tamanho das imagens na web e em toda parte.

AVIF nos navegadores

Embora diversos programas já tenham suporte a AVIF faz tempo (a Netflix, por sinal, é a principal usuária do formato), vai ser nos navegadores de Internet que ele vai fazer a maior diferença, uma vez que vai representar uma economia de banda — e de tempo de carregamento, é claro — muito grande.

Dica: quem começar a fazer uso do AVIF primeiro vai levar vantagem sobre os concorrentes em termos de simpatia, amizade ou amor por parte do Google e de outros mecanismos de busca.

Tem gente tão otimista quanto ao AVIF que considera que ele vai substituir totalmente qualquer outro formato de imagem, “matando” os anciãos JPEG e PNG (para nem falar de formatos não otimizados para publicação na web).

Como habilitar AVIF no Firefox

Os navegadores baseados no Chromium já têm suporte ao AVIF — o que inclui Opera, Edge, Vivaldi, Brave, e muitos outros. Já o Firefox ainda não tem suporte oficial ao formato, mas é fácil de habilitar o suporte experimental a ele: basta acessar a URL abaixo e marcar a caixinha correspondente.

about:preferences#experimental

Dependendo do seu sistema, esta opção pode nem estar disponível. Aí será necessário seguir o caminho um pouco mais “hacker” e modificar uma configuração interna do navegador. Acesse:

about:config

Confirme que tomará cuidado ao mexer nas configurações e procure pelo valor “avif” na caixa de busca. Localize a chave image.avif.enabled e certifique-se de que seu valor esteja em true.

Os ganhos potenciais do AVIF

Os algoritmos de compressão do AVIF são mesmo impressionantes. De maneira média, podemos dizer que o WEBP é 30% menor que o JPEG, enquanto o AVIF é 50% menor.

Na prática, os ganhos podem ser ainda maiores, embora em alguns casos mais raros qualquer um dos formatos fique apenas marginalmente menor que o JPEG (quando não maior).

Pela observação das imagens no blog da PortoFácil podemos dizer que o AVIF pode ser tão pequeno quanto apenas 15% ou 20% do tamanho do JPEG.

Como a Mônica lida com WEBP e AVIF

Uma das funções da Mônica é otimizar diariamente as imagens no servidor de cada cliente. Por padrão ela comprime arquivos JPEG e PNG, de maneira até mais eficiente que serviços comerciais de otimização de imagens.

Além disso, ela gera versões WEBP destas imagens, no caso específico em que estas sejam menores que a imagem original (acredite, nem sempre isso acontece). Porém, é preciso solicitar ao Suporte Técnico este comportamento do otimizador, uma vez que o uso de disco aumenta consideravelmente (mesmo o WEBP sendo menor, é praticamente uma imagem a mais para cada imagem enviada para o site).

Estamos trabalhando também na automação das imagens AVIF. O problema é que elas são muito leves e rápidas para quem as vê no navegador, porém elas são muito trabalhosas e pesadas para gerar. O trabalho de conversão de uma imagem JPEG em resolução FullHD pode levar até 6min de cálculos e processamento. Em breve teremos uma solução definitiva para isso.

Ao criar as versões otimizadas de uma imagem, a Mônica cria os arquivos adicionais com o mesmo nome e extensão do original, e adiciona a extensão específica do formato. Assim:

• imagem.jpg → imagem original (e otimizada pela Mônica);
• imagem.jpg.webp → imagem otimizada pela Mônica no formato WEBP;
• imagem.jpg.avif → imagem otimizada em formato AVIF.

As maneiras “certas” de usar WEBP e AVIF

Para garantir que uma página não tenha imagens quebradas em nenhum navegador, não importando o nível de suporte aos formatos mais eficientes, precisamos garantir que cada imagem exista no servidor em cada um dos formatos com que vamos trabalhar. Ou seja, precisamos ter a imagem JPEG para os dispositivos que não suportam formatos mais modernos; precisamos do WEBP para os dispositivos que não suportam AVIF; e precisamos da mesma imagem em formato AVIF para poder tirar proveito do seu tamanho reduzido, logo mais rápido para transferir, onde seja possível.

A técnica do srcset

A maneira mais recomendada de usar AVIF e WEBP em uma página é utilizando o elemento <picture> do HTML, com srcset:

<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <source srcset="img/photo.webp" type="image/webp">
  <img src="img/photo.jpg" alt="Description of Photo">
</picture>Code language: HTML, XML (xml)

Entretanto, nem sempre é possível garantir que nossas páginas atendam ao formato ideal, principalmente se considerarmos blogs WordPress que podem ter anos de conteúdo criado sem levar em consideração o que agora é o futuro imprevisível de anos atrás.

O serviço condicional de AVIF e WEBP

Assim, a segunda e — em nossa opinião — mais eficiente maneira de tirar proveito do AVIF e do WEBP de maneira automática é usar o serviço condicional de imagens.

Por essa modalidade, cabe ao servidor web (que pode ser o Nginx ou a própria Cloudflare) detectar se o navegador é capaz de exibir algum formato alternativo, se a imagem com o formato alternativo existe no servidor, e por fim entregar a imagem certa para cada visitante.

Em se tratando de sites não servidos pela Cloudflare, ou seja, servidos diretamente pelo Nginx, o serviço condicional de WEBP fica habilitado de maneira automática e transparente. Ou seja, o Nginx identifica os visitantes que podem se beneficiar do WEBP e entrega para estes a imagem mais leve.

Já nos sites servidos pela Cloudflare existe um conflito que impede que se sirvam WEBP e AVIF de maneira condicional. É necessário servir apenas imagens no formato convencional porque dispositivos incapazes de lidar com os formatos mais recentes podem, simplesmente, não exibir as imagens — deixando buracos na página, ou mesmo falhando ao entregar informações visuais importantes para o visitante.

AVIF e WEBP condicionais na Cloudflare

Entretanto, é possível fazer uso dos Workers da Cloudflare para implementar AVIF e WEBP condicionais, sem abrir mão de todas as vantagens que a CDN implica.

Os Workers podem ou não ser gratuitos, e sugerimos a leitura do post sobre aceleração do WordPress com Cloudflare Workers para obter mais informações.

Para servir AVIF e WEBP de maneira condicional na Cloudflare é necessário:

• garantir que imagens em formatos alternativos existam no servidor, junto com as imagens convencionais;
• criar um Worker que vai identificar se o dispositivo visitante é capaz de exibir os formatos mais recentes, e entregar a imagem adequada em cada caso, de maneira transparente; e
• associar uma “rota” ao Worker, para ativá-lo.

Se você é cliente da PortoFácil já tem o otimizador de imagens da Mônica rodando e gerando as versões WEBP (e em breve também AVIF) de todas as suas imagens.

Criação do Worker na Cloudflare

Acesse as configurações do seu domínio e vá em Workers → Gerenciar Workers → Crie um Worker. Você estará na tela de edição de código da Cloudflare.

Ao criar um Worker, o sistema escolhe um nome engraçadinho para ele, com o objetivo de evitar que você tente ter dois Workers com nomes iguais. Troque o nome do Worker para algo que faça sentido só de olhar para ele. Sugestão: webp-avif.

Em seguida apague todo o código que vem automático, e substitua-o pelo seguinte:

addEventListener('fetch', event => {
    event.respondWith(makeWebp(event.request))
})


async function makeWebp(request) {
    const cacheBuster = true
    const mt = microtime(true) + Math.random()

    let strBuster = ''

    if (cacheBuster) {
        strBuster = '?' + mt
    }

    const CACHE_TTL = 0

    let okWebp = false
    let okAvif = false
    
    let regex = /\.jpg$|.jpeg$|\.png$/
    
    if (request.headers.get('Accept') && request.headers.get('Accept').match(/image\/webp/)) {
        okWebp = true
    }
    if (request.headers.get('Accept') && request.headers.get('Accept').match(/image\/avif/)) { 
        okAvif = true
    }
    
    if (okAvif && request.url.match(regex)) {
        let url = new URL(request.url + ".avif" + strBuster)
        const avifRequest = new Request(url, {
            method: request.method,
            headers: request.headers, 
            cf: {
                // Always cache this fetch regardless of content type
                // for a max of 5 seconds before revalidating the resource
                cacheTtl: CACHE_TTL,
                cacheEverything: false
            }
        })
        const avifResponse = await fetch(avifRequest)
        if (avifResponse.status == 200 || avifResponse.status == 304) {
            const avifHeaders = new Headers(avifResponse.headers)
            avifHeaders.append('X-WebWorker', 'avif')
            avifHeaders.append('Content-Type', "image/avif")
            avifHeaders.append('Content-Disposition', "inline")
            avifHeaders.append('X-Buster', mt)
            return new Response(avifResponse.body, {
                status: avifResponse.status,
                statusText: avifResponse.statusText,
                headers: avifHeaders
            })
        }
    }
    
    if (okWebp && request.url.match(regex)) {
        let url = new URL(request.url + ".webp" + strBuster)
        const webpRequest = new Request(url, {
            method: request.method,
            headers: request.headers, 
            cf: {
                // Always cache this fetch regardless of content type
                // for a max of 5 seconds before revalidating the resource
                cacheTtl: CACHE_TTL,
                cacheEverything: false,
            }
        })
        const webpResponse = await fetch(webpRequest)
        if (webpResponse.status == 200 || webpResponse.status == 304) {
            const webpHeaders = new Headers(webpResponse.headers)
            webpHeaders.append('X-WebWorker', 'webp')
            webpHeaders.append('X-Buster', mt)
            return new Response(webpResponse.body, {
                status: webpResponse.status,
                statusText: webpResponse.statusText,
                headers: webpHeaders
            })
        }
    }
    
    // No AVIF neither WEBP
    let url = new URL(request.url + strBuster)
    const oRequest = new Request(url, {
        method: request.method,
        headers: request.headers, 
        cf: {
            // Always cache this fetch regardless of content type
            // for a max of 5 seconds before revalidating the resource
            cacheTtl: CACHE_TTL,
            cacheEverything: false,
        }
    })
    const oResponse = await fetch(oRequest)
    const oHeaders = new Headers(oResponse.headers)
    oHeaders.append('X-WebWorker', 'original')
    oHeaders.append('X-Buster', mt)
    return new Response(oResponse.body, {
        status: oResponse.status,
        statusText: oResponse.statusText,
        headers: oHeaders
    })
    
    
    function microtime(get_as_float) {
        var now = new Date().getTime() / 1000;
        var s = parseInt(now);
        return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;  
    } 
}Code language: JavaScript (javascript)

Por fim, clique em “Salvar e implantar” para finalizar esta etapa do trabalho.

Note que você só precisa criar este Worker uma única vez, e ele poderá ser utilizado em qualquer domínio na mesma conta, pois bastará associá-lo a uma rota em cada domínio para ativá-lo. Não é demais lembrar que você deve estar atento à questão dos custos, já que os Workers podem não sair de graça.

Criação da Rota

Volte às configurações do domínio, e acesse novamente a aba Workers na CLoudflare. Clique em “Adicionar rota”. Crie uma rota como a imagem abaixo, tomando os cuidados de preencher os campos todos corretamente.

• Rota: seudominio.com/wp-content/* ou seudominio.com/wp-content/uploads/* (caso esteja otimizando apenas as imagens enviadas para o conteúdo, e não as imagens do tema e dos plugins — recomendado para economizar requisições nos planos gratuitos);
• Worker: webp-avif (ou seja lá qual tenha sido o nome que você usou no passo anterior);
• Modo de falha: falha ao abrir.

Para ter acesso à configuração do modo de falha é necessário clicar em “Solicitar modo de falha de limite”, e é muito importante que a opção marcada seja “Falha ao abrir”. Caso contrário, ao esgotarem suas requisições diárias as imagens vão desaparecer de seu site. Esta configuração só aparece para planos gratuitos.