Saiba tudo sobre o que são imagens WebP e como elas podem ajudar a melhorar seu site.
As páginas da Web estão ficando maiores, mais preenchidas com mídia e mais famintas de dados a cada ano.
Os estudos do arquivo HTTP mostram que o peso médio de uma página de desktop aumentou de 523 kilobytes em 2011 para 2.196 kilobytes em 2021. Um site maior significa tempos de carregamento mais longos e os usuários da web como um todo tendem a ser impacientes.
A maior parte desse peso de página de carregamento lento é composta por imagens . Se você vai incluir toda a mídia bonita que torna seu site interessante — e cheio de dados — você vai querer ficar por dentro das novas tecnologias que ajudam a otimizar o desempenho , o tamanho e a velocidade de carregamento do seu site.
É aí que as imagens WebP podem ser úteis.
WebP é um formato de imagem compacto e moderno que você pode usar para fornecer imagens de alta qualidade com um tamanho de arquivo menor do que os formatos tradicionais, como JPEG e PNG . Com imagens menores, seu site carrega mais rápido e se classifica melhor em SEO sem comprometer a qualidade da imagem do seu site.
O que são imagens WebP?
WebP é um tipo de arquivo de imagem criado pelo Google que fornece compactação de imagem com e sem perdas para a web. Lançado em 2011, tornou-se efetivamente popular desde a adoção generalizada do navegador em 2020. Os arquivos WebP podem ser reconhecidos pela extensão de nome de arquivo .webp .
WebP é uma tecnologia de código aberto e qualquer pessoa pode baixar e contribuir com o código-fonte. O formato WebP foi desenvolvido pelo Google para reduzir o tamanho das imagens compactadas sem perder qualidade. A empresa faz isso usando codificação preditiva semelhante à usada na codificação de quadros-chave de vídeo.
A pesquisa do Google mostra que conseguiu compactar imagens com sucesso em tamanhos de arquivo significativamente menores. A empresa relata que o WebP possui o benefício de ser 26% menor que os arquivos PNG e 23–24% menor que os arquivos JPG equivalentes. Um tamanho de imagem WebP pode ter até 16383 × 16383 pixels.
Onde o WebP é suportado?
É seguro dizer que o WebP foi amplamente adotado como padrão neste momento. A partir de 2022, o WebP possui uma participação de mercado de 97% entre os navegadores da web. Isso inclui Google Chrome, Safari, Firefox, Edge e Opera. CMSs como o Webflow e ferramentas gráficas como o Photoshop agora também suportam imagens WebP.
Embora tantas ferramentas suportem WebP, JPG ainda é o formato de imagem mais popular na web. De acordo com o HTTP Archive , o WebP representou apenas cerca de 7% de todas as imagens em sites em 2021. No entanto, esse número vem crescendo.
Principais recursos dos arquivos de imagem WebP
Nem todos os formatos de imagem têm os mesmos recursos. Uma das vantagens do formato de imagem WebP é que ele pode lidar com mais recursos (como transparência e animação) do que outros formatos de arquivo em tamanho menor.
Compressão com e sem perdas
O WebP pode ser usado para compactação com ou sem perdas. Esses termos identificam o que acontece quando a compactação da imagem é revertida. A compactação com perdas perde dados quando o arquivo é descompactado, enquanto a sem perdas perde muito pouco ou nenhum dado. A vantagem da compactação com perdas é que ela cria um tamanho de arquivo muito menor do que o sem perdas.
Transparência
As imagens WebP suportam transparência (ou seja, um canal alfa). Outros formatos como arquivos PNG também, mas JPGs não. A transparência também adiciona menos dados do que outros formatos, de acordo com a pesquisa do Google .
A transparência é especialmente útil ao projetar sites. Ele permite que você crie bordas irregulares em uma forma e veja o plano de fundo atrás da forma, por exemplo, com o logotipo do Webflow abaixo. Ele também permite que você crie profundidade e contraste com os elementos da página sobrepostos e abaixo uns dos outros. Você pode até criar efeitos visuais mais avançados, como o morfismo de vidro, que fazem seu site parecer novo e moderno.
Animação
As imagens WebP podem ser animadas, como o conhecido GIF . Esta é uma vantagem sobre JPGs que não suportam animação. Os arquivos animados WebP também são menores em tamanho do que os arquivos GIF ou APNG.
Metadados
O WebP suporta a adição de metadados a imagens usando XMP e EXIF . Os metadados são úteis para fornecer contexto digital às imagens — por exemplo, dados de hora e localização anexados a uma imagem de uma câmera digital. Você pode adicionar tags e descrições curtas às imagens com metadados que ajudam os mecanismos de pesquisa a identificar imagens, impulsionando seu SEO.
Perfil de cores
Você pode incorporar um perfil ICC para gerenciamento de cores a um arquivo WebP, que é gerenciado pelo International Color Consortium . Um arquivo ICC pode ser importado para programas de edição de imagem como o Adobe Photoshop para ajudar a gerenciar as cores em um arquivo entre dispositivos ou para impressão.
Os benefícios de usar imagens WebP ao criar sites
WebP é uma maneira mais eficiente de codificar imagens. Ele torna os arquivos de imagem menores, usa menos espaço de armazenamento e acelera a velocidade do seu site. Imagens menores ajudam seu web design de algumas maneiras importantes.
O uso de imagens WebP pode tornar seu site mais rápido
Os dados são um dos maiores fatores que retardam um site. O PageSpeed Insights é uma das melhores ferramentas para analisar o desempenho do seu site em um nível granular. Ele identifica imagens com tamanho adequado , codificação de imagem eficiente e uso de formatos de imagem modernos como principais formas de melhorar a velocidade do seu site.
Um site mais rápido melhora a experiência do cliente, levando a uma melhor taxa de rejeição e conversão
Existem poucas coisas que desativam os visitantes mais rapidamente do que páginas de carregamento lento, e o tempo de carregamento mais rápido pode fazer uma tremenda diferença em suas taxas de rejeição e conversão.
Estudo após estudo mostrou que os visitantes do site relutam em esperar o carregamento das páginas. Com apenas 10 segundos de tempo de carregamento, a taxa de rejeição aumenta em 123% .
Os clientes também estão muito mais abertos à conversão quando uma página é carregada rapidamente. Um estudo da Portent mostrou que diminuir o tempo de carregamento da página de apenas 5 segundos para 1 segundo aumentou as taxas de conversão duas vezes e meia. Para o comércio eletrônico, a velocidade é ainda mais importante, com a conversão caindo 0,3% para cada segundo de tempo de carregamento adicionado.
Sites de carregamento mais rápido são melhores para SEO
Um site de carregamento mais rápido também pode ajudar na otimização do mecanismo de pesquisa (SEO). A partir de 2021, a atualização do algoritmo do Google adiciona a experiência da página , que inclui várias medições de velocidade da página, como um fator de classificação. O comportamento do usuário em seu site também afetará sua classificação, especialmente a taxa de rejeição.
Arquivos menores ajudam você a economizar espaço de armazenamento
Quanto menor a compactação em seus arquivos de imagem, menos espaço você terá que pagar.
Você só tem tanto espaço em disco em um servidor para o seu site e, dependendo da hospedagem do seu site , o armazenamento pode ficar caro. Não é apenas a mídia que precisa caber no seu armazenamento. Você pode ter temas do seu CMS, JavaScript, CSS e bancos de dados para manter seu site funcionando.
Onde você pode criar e converter imagens WebP
Para usar imagens WebP em seu site, você precisa de um CMS — como o Webflow — que suporte WebP. Você pode então criar novas imagens em um software gráfico que permite salvar arquivos como WebP ou converter suas imagens existentes em seu computador ou em seu CMS.
Crie imagens WebP com software gráfico
Você pode criar arquivos WebP nativamente com muitos programas gráficos diferentes, incluindo Photoshop , Google Fotos , Blender e muitos outros. O Google tem um plug-in gratuito que também suporta WebP para versões anteriores do Photoshop.
Ao salvar uma imagem finalizada em um programa gráfico que suporte WebP, WebP será uma das opções suspensas oferecidas quando você optar por “salvar para a web”.
Converta imagens para WebP usando o software do Google
Se você é um pouco experiente tecnicamente, você pode baixar a ferramenta de conversão de cwebp pré- compilada WebP do Google e usá-la para converter imagens para WebP em seu computador. Você também pode instalar a API libwebp do Google para codificar e decodificar arquivos WebP. Ambos os sites contêm instruções detalhadas para compactar imagens com essas ferramentas.
Converta imagens existentes em seu CMS com o Webflow
Você também pode converter imagens já em seu Webflow CMS para WebP com o gerenciador de ativos. A ferramenta de conversão de imagem WebP do Webflow converterá e substituirá imagens que você já está usando para WebP. Este vídeo fornece instruções passo a passo sobre como converter imagens para WebP no Webflow.
O que mais você pode fazer para otimizar seus sites
A otimização de imagem é apenas uma maneira de otimizar o desempenho do seu site. Imagens de carregamento lento, carregamento de fonte aprimorado e links de pré-carregamento podem acelerar o desempenho do seu site.
Crie um site responsivo que funcione bem em dispositivos móveis e outros dispositivos. Certifique-se de que suas imagens sejam dimensionadas para carregar bem em dispositivos móveis, especialmente porque os navegadores móveis são mais propensos a trabalhar com velocidades de conexão mais lentas. Escolha uma hospedagem para o seu site que não seja apenas rápida, mas confiável.
O WebP é apenas uma das ferramentas que você pode adicionar à sua experiência na criação de sites. Construir para a web é, em última análise, criar uma excelente experiência de usuário . Você pode fazer isso otimizando seu site para que ele carregue tão rápido e sem esforço que os usuários nem pensam nisso.