Como detectar o suporte ao WebP nos navegadores de internet

Audio

Precisamos nos certificar do suporte ao WebP nos browsers e assim garantir a correta entrega do formato de imagem aos usuários.

Se você ainda não está por dentro, o formato de imagem WebP, foi desenvolvido pelos engenheiros da Google.

Esse formato reduz o tamanho do arquivo consideravelmente e mantém a qualidade das imagens.

Com isso, adotamos um grande aliado na implementação Mobile First, dado que o tempo de carregamento é relevante, e as imagens são um grande vilão.

Como detectar o suporte ao WebP

A necessidade de se detectar se o navegador de internet em uso suporta, ou não, o formato de imagem WebP está ligada a necessidade de entregar uma alternativa.

Ou seja, se o browser tiver suporte ao WebP, será entregue esse formato. Caso contrário, a imagem padrão (JPG, PNG, GIF) será usada.

Com essa negociação, garantimos que a informação seja entregue. E nossa preferência será pelo WebP, dado o ganho de performance no mobile.

É possível detectar o suporte ao WebP através do servidor de internet ou na marcação do front-end do projeto.

Com essas duas possibilidades, é possível que os profissionais de Infraestrutura ou Desenvolvimento implementem a validação.

Sobre o suporte ao WebP através do servidor

A negociação entre o navegador de internet e o servidor web em relação ao suporte ao formato de imagem WebP é mais simples.

O acordo entre esses dois softwares funciona da seguinte maneira: o browser, quando requisita uma página ao servidor web, envia no cabeçalho da requisição um “Accept” ao formato WebP representando por “image/webp“.

Dessa forma, o servidor web não precisa se estender em negociação se o formato de imagem será aceito ou não.

Dado que o navegador informou aceitar, basta realizar a entrega no formado mais avançado e seguro da correta exibição.

Para esse modelo é necessário ter o controle do servidor para esse tipo de implementação avançada. Ou fazer uso de hospedagem para WordPress que implemente o recurso.

Saiba como detectar o suporte ao formato de imagem WebP através do servidor web. #WP #WebP #WordPress

Tweet

Sobre o suporte ao WebP através do front-end

Os desenvolvedores também conseguem atuar na entrega dos diferentes tipos de imagens através de marcações e scripts.

É possível utilizar o HTML 5, código JavaScript ou a biblioteca Modernizr para a necessidade.

Em ambos os casos será a realizada a análise do suporte ao WebP no navegador de internet utilizado e considerado o endereço da imagem desejado. Seja o WebP ou os formatos tradicionais.

Análise através da HTML 5

A HTML 5 fornece a tag <picture>.

Através desse elemento é possível listar múltiplas imagens para serem consideradas.

Essa lista define a prioridade de exibição. Em nosso contexto, seria o endereço de uma imagem em WebP. As demais seriam fallback para caso o navegador em uso não tenha suporte ao formato.

O código seria algo assim:

<picture>   
<source type="image/webp" srcset="/assets/imgs/apiki.webp">   
<img src="/assets/imgs/apiki.png" alt="Marca da empresa especializa em WordPress"> 
</picture>

Análise através da JavaScript

Através da linguagem JavaScript analisamos uma característica particular das imagens em formato WebP.

Uma imagem bem pequenina é decodificada em base64 para ser utilizada na validação.

A função retorna sucesso, ou falso, em relação as características verificadas na imagem de teste.

Eis o código.

async function WebpIsSupported() {
    // If the browser doesn't has the method createImageBitmap, you can't display webp format
    if (!self.createImageBitmap) return false;
  
    // Base64 representation of a white point image
    const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
    
    // Retrieve the Image in Blob Format
    const blob = await fetch(webpData).then(r => r.blob());

    // If the createImageBitmap method succeeds, return true, otherwise false
    return createImageBitmap(blob).then(() => true, () => false);
}

Fonte do código

Análise através da Modernizr

Para quem não conhece, Modernizr é uma biblioteca JavaScript que realizada vários testes para verificar o suporte a recursos da HTML5, CSS3 e JavaScript no navegador de internet em uso.

Considerando a validação do suporte ao WebP, basta verificar por alguma das seguintes propriedades.

• Modernizr.webp;
• Modernizr.webp.lossless;
• Modernizr.webp.alpha;
• Modernizr.webp.animation.

Saiba como validar o suporte ao WebP nos browsers através da HTML5, CSS3 ou Modernizr #WordPress #WebP

Tweet

Conclusão

Não podemos deixar de usar os recursos avançados com receio da falta de suporte nos navegadores de internet que não acompanham as evoluções tecnológicas.

Devemos considerar os recursos avançados para aqueles que os suportam e, quanto aos demais, continuar entregando o padrão.

O formato de imagem WebP é muito relevante para deixar o carregamento dos sites mais rápidos, principalmente no mobile.

Mas é preciso considerar o suporte ao formato nos navegadores para garantir a correta entrega da informação.