Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result

Início » WordPress Mobile » Como detectar o suporte ao WebP nos navegadores de internet

Como detectar o suporte ao WebP nos navegadores de internet

Nem todos os navegadores de suportam o formato de imagem WeP. Saiba como validar o suporte ao WebP nos browsers dos seus usuários.

Leandro Vieira by Leandro Vieira
3 anos ago
Reading Time: 6 min
0
Suporte ao WebP nos navegadores de internet
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

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

Conteúdo relacionado

O conceito e aplicabilidade do Mobile First

WordPress e o desenvolvimento de aplicativos móveis

Não use Design Adaptativo. Considere o Design Responsivo

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.

Logo do formato de imagem WebP

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.

Tags: HTML 5Mobile FirstWebP
Share10Share1SendShare
Previous Post

Metodologia BPM para melhoria de processos dentro da empresa

Next Post

Split de pagamento Wirecard com Dokan

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como personalizar sua mobile branding no Google
WordPress Mobile

Como personalizar sua mobile branding no Google

4 de agosto de 2020
Twitter Card – o recurso para seu tweet ir além dos 140 caracteres
WordPress Mobile

Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

28 de julho de 2020
Como implementar Mobile First
WordPress Mobile

Como implementar Mobile First em projetos WordPress

15 de janeiro de 2021
O protocolo Open Graph no WordPress
WordPress Mobile

O protocolo Open Graph no WordPress

15 de janeiro de 2021
Next Post
Split de pagamento Wirecard com Dokan

Split de pagamento Wirecard com Dokan

A Black Friday 2019 e a relação com o Mobile First

A Black Friday 2019 e a relação com o Mobile First

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.
  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.