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 » Imagens WebP e a relação com o Mobile First

Imagens WebP e a relação com o Mobile First

Leandro Vieira by Leandro Vieira
4 anos ago
Reading Time: 5 min
2
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

WebP (pronuncia-se Weppy) é um novo formato de imagem desenvolvido pelos engenheiros da Google.

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

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

O formato de imagem WebP tem uma relação direta com o Mobile First, uma vez que seu foco é contribuir para o carregamento mais rápido das páginas.

Quem se beneficia com um novo formato de imagem?

Logo do formato de imagem WebP

Os mais beneficiados de um formato de imagem que carrega mais rapidamente são os usuários.

No Brasil, temos uma realidade de internet lenta através da navegação com os dispositivos móveis. Logo, toda contribuição para o carregamento rápido é super válido.

O carregamento mais rápido das páginas melhora a experiência do usuário, que por conseguinte consome mais conteúdo e interage mais com sua marca.

Dessa forma, entendemos que trabalhamos um benefício para os profissionais de marketing.

Uma melhor performance contribui para conquistar melhores posições no Google, reduzir o bounce rate das páginas e aumentar o quality score em sua conta em rede de Ads.

Com o formato ainda conseguimos beneficiar dois outros times: o de infraestrutura e financeiro.

Através desse formato, que tem um menor tamanho de arquivo, conseguimos reduzir o consumo de tráfego de dados.

E sabemos que a redução de banda impacta diretamente no financeiro, é redução de custo.

O que você sabe sobre o formato de imagem WebP?

Tweet

Uma visão sobre o formato de imagem WebP e os demais

Em projetos digitais é comum fazermos uso de três formatos de imagens:

  1. JPEG;
  2. PNG;
  3. GIF / GIF Animado.

O formato JPEG é muito utilizado para fotografias.

PNG para vetores e transparência.

GIF, em sua maioria, no formato animado.

O formato WebP consegue agregar o melhor dos três formatos mais utilizados.

Isto é, consegue garantir uma animação, transparência e qualidade das imagens.

Sobre o suporte dos navegadores de internet

Embora o formato de imagem WebP não seja suportado por todos os navegadores de internet, é preciso pensar diferente esse suporte.

Entregue o formato WebP para quem o suporta, e o formato original (JPG, GIF, PNG) para quem não consegui renderizar.

Além disso, a medida que os navegadores forem adicionando suporte, seu site já estará atualizado.

Podemos separar os browsers em três grupos. São eles:

  1. Os que suportam o WebP com perda;
  2. Os que suportam sem perdas e a camada alfa;
  3. E os que suportam com animação.

Os que suportam o WebP com perda

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

Os que suportam sem perdas e a camada alfa

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

E os que suportam com animação

  • Google Chrome (desktop and Android) 32+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 19+

Como converter suas imagens para WebP

O melhor caminho é realizar um processo automatizado.

Caso contrário será preciso novos esforços com a base legada de imagens, e rever processos daqui em diante.

No WP Host, o produto de hospedagem para WordPress da Apiki, realizamos isso automaticamente para nossos clientes.

Além disso, ainda servimos as imagens através do GoCache, nosso parceiro de CDN.

Temos diversas opções de conversores de imagens para o referido formato. Tanto para Linux, Windows e Mac.

Também há opções para abrir e salvar o formato no Photoshop, ou fazer uso de ferramentas de conversão on-line.

Conheça as ferramentas, plugins e conversores para o formato de imagem WebP

Tweet

Conclusão

O Google realiza predominantemente uma indexação mobile first.

Muitos sites tiveram significativas perdas em suas pontuações de performance através dos serviços PageSpeed Insights e Lighthouse.

Imagens, e conteúdo multimídia, são um dos vilões que prejudicam a performance do seu projeto.

O formato de imagem WebP será seu grande aliado para avançar em performance no mobile.

E por conseguinte ajudará também no desktop.

Você já tem utilizado o WebP em seus projetos?

Tags: googleMobile Firstpagespeed insightsWebP
Share16Share1SendShare
Previous Post

A indexação mobile first e os tipos de sites

Next Post

Media Queries e Breakpoints nos projetos Mobile First

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

Media Queries e Breakpoints nos projetos Mobile First

WordPress Headless e o conceito de API First

Comments 2

  1. Pingback: Lazy Load, sobre o recurso e a implementação no WordPress - Apiki
  2. Pingback: Os elementos que determinam a performance de site WordPress - Apiki

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.