WebP e WordPress = melhor tempo de carregamento e desempenho?

Stefan Römershäuser Última atualização em 21.10.2020
8 min.
webp WordPress
Última atualização em 21.10.2020

Muitos WordPress - os usuários estão interessados no formato de imagem WebP porque ele combina as vantagens do JPG e PNG. Ao mesmo tempo, porém, não substitui os dois formatos de imagem comuns. Para WordPress -No entanto, os utilizadores que utilizam muitas imagens devem achar a WebP particularmente útil. Porque é que isto é assim, explicamos neste artigo.

No mundo de hoje, é cada vez mais importante tornar a experiência do utilizador do seu site o mais agradável e fácil possível para os visitantes. As pessoas são visuais e muitas vezes conseguem absorver a informação que vêem mais rapidamente e melhor. Um rápido olhar para uma placa de publicidade, percorrendo uma página inicial antes do ônibus chegar em cinco minutos. Todos nós conhecemos estas situações. 

Uma vez que as imagens normalmente constituem mais da metade do espaço de armazenamento de um website, existe um grande potencial de optimização.

Agora mais alguns fatos sobre o WebP antes de entrar nos tópicos.

  • WebP suporta o formato de vídeo VP8, que é adequado para pequenas imagens animadas, por exemplo, como nós o conhecemos dos GIFs.
  • O tamanho máximo de imagem para WebP é 16.383 x 16.383 pixels.
  • Você também pode escalar uma imagem WebP para cima ou para baixo, semelhante a arquivos SVG, mas muitos não permitem isso por razões de segurança.

Os seguintes tópicos são abordados neste artigo de hoje:

  1. Diferenças para JPG e PNG

- Comparação do tamanho do arquivo
- Espaço de cor/Profundidade
- Apoio/assistência

  1. Quais são os requisitos necessários para o WebP em WordPress ?
  2. Como posso inserir imagens WebP em WordPress ?

- PluginUsar em
- Adicione algo ao .htaccess do seu servidor
- Função.php do seu arquivo WordPress -Themes completo. 

  1. A minha conclusão sobre o WebP

Diferenças para PNG e JPG 

WebP e PNG

Uma imagem WebP é até cerca de 25-30 por cento menor do que uma PNG sem qualquer perda de qualidade. Os antecedentes ainda podem ser transparentes. Isto só varia entre a própria imagem, profundidade de imagem, detalhes, espaço de cor, etc. Devido ao pequeno tamanho do arquivo, o formato WebP tem uma clara vantagem em termos de desempenho.

png vs webp

Com base nas duas imagens, pode-se dizer que a imagem WebP é menor que a versão PNG, com 30,1 por cento. Eu escolhi aqui o método sem perdas e deliberadamente defini o deslizador de qualidade para 80%. Os restantes 20 dos 100 por cento quase nunca podem ser vistos, por isso 80 por cento é suficiente para aplicações online. 

Desvantagens do formato PNG

Os PNG não são adequados para fotógrafos porque criam um arquivo de imagem muito maior. O formato PNG é usado principalmente para capturas de tela porque os PCs salvam imagens como PNG. Porquê? - Porque os screenshots são muitas vezes uma mistura de imagem e texto. 

O PNG é usado, por exemplo, para imagens que requerem um fundo transparente. Isto torna o formato muito versátil e popular no design gráfico, uma vez que muitos elementos muitas vezes se juntam ali.

PNG está disponível nos formatos PNG-8 e PNG-24 e utiliza profundidade de cor de 8 bits e um máximo de 256 cores. PNG-24 usa uma profundidade de cor de 24 bits com até 16,7 milhões de cores. PNG-24 é, portanto, comparável ao formato JPEG. Então vamos continuar com o formato JPG:

O formato de imagem JPG

Em comparação directa com JPG, a imagem WebP é cerca de 25 a 35% menor - apesar da mesma qualidade da imagem. Não há nada a dizer entre JPG e WebP - WebP é simplesmente a melhor escolha.

jpg vs webp

Com base nas duas imagens, pode-se dizer que a imagem WebP é menor do que a versão JPG com 24,7%. Para a versão JPG eu defino a qualidade como "alta".

O formato JPG é ideal se você puder viver com perdas de qualidade e se a nitidez e os detalhes não forem importantes. O formato é frequentemente utilizado para imagens coloridas, uma vez que a composição do JPG permite exibir muitas cores e gradações.  

Uma pequena pista:

A aparência final das suas imagens depende de muitos factores: por exemplo, a resolução do ecrã (HD, QHD, UHD/4K, 8K, etc.), as definições do ecrã como sRGB, adobeRGB, o modo de apresentação dos seus monitores e o dispositivo que utiliza para visualizar as imagens. Recentemente eu próprio tive o problema de as minhas fotografias terem um aspecto diferente no meu ecrã e no site. 

O meu palpite: Atualmente todos os navegadores estão no modo sRGB. Portanto, se você está criando algo para a web no Photoshop, por exemplo, defina seu monitor para sRGB. Então você pode ver diretamente como ele se parece quando aterrissa no seu site. 🙂 

Espaço de cor/Profundidade

É aqui que as coisas se complicam um pouco. O WebP é baseado no algoritmo de compressão de vídeo com perdas VP8 com compressão de até 24 bits e tamanho máximo de 16.383 x 16.383 pixels Portanto, tem sempre uma profundidade de cor de 24 bits, tal como o JPG. A profundidade de cor do PNG varia de 8 a 48 bits, embora este último faça pouco sentido devido ao grande tamanho do arquivo, 

Como VP8 bitstream, a geração sem perdas de imagens WebP só funciona com o formato de imagem 8-bit - também conhecido como formato de imagem YUV420.

O formato YUV420 foi desenrolado: Vamos primeiro ver como um monitor exibe uma imagem por padrão: Cada cor pode ser representada por três cores (o chamado modelo RGB), ou seja, vermelho, verde e azul.

Cada cor individualmente - ou seja, vermelho, verde e azul - pode ser gravada no PC em 1 byte (8 bits). Um pixel num monitor tem portanto 3 bytes (cada byte tem informação sobre as respectivas cores, vermelho, verde e azul)

O olho humano é muito sensível quando se trata de brilho, mas menos sensível às cores e suas gradações. Assim, a designação YUV é composta por Y = luminância (brilho) e U e V crominância média (cor). YUV é portanto como o RGB, que é usado para representar uma cor.

Mas porque é que precisamos dele?

Porque o tamanho do arquivo é importante. No modelo RGB temos que usar 3 bytes (24 bits) para armazenar uma cor. Com o YUV, por outro lado, o tamanho é reduzido pela metade devido à forma como é calculado e depois armazenado. É complicado, mas penso que neste momento a informação é suficiente e traz alguma clareza.

Apoio/assistência

As estatísticas mostram qual navegador é mais frequentemente utilizado por qual "dispositivo final", como PC, tablet ou smartphone. Como o WebP não é suportado por todos os navegadores, você deve ter isso em mente.

Claro que é óbvio que os "dispositivos móveis" estão mais em foco, o que também explica porque é fornecido melhor suporte ao WebP para o smartphone. Portanto, certifique-se de verificar as estatísticas de usuário e ver de qual navegador e dispositivo você recebe o maior número de visitantes.

A lista a seguir mostra quais versões do navegador já se beneficiam do WebP em quais dispositivos finais. 

Suporte atual para o Desktop Browser

- Firefox a partir da versão 65.x
- Ópera a partir da versão 39.x
- Cromado a partir da versão 23.x
- Borda a partir da versão 17.x
- Internet Explorer a partir da versão 11.x

Suporte atualizado para dispositivos móveis

- Navegador Android a partir da versão 5.6 (Chromium 67)
- Android Chrome a partir da versão 73.x
- Opera Mini todas as versões
- Opera Mobile a partir da versão 12.x
- Android Firefox a partir da versão 66.x
- Internet Explorer Mobile a partir da versão 11.x

WebP VP8 (Imagens animadas)

- Google Chrome (Desktop e Android) a partir da versão 32.x
- Microsoft Edge a partir da versão 18.x
- Firefox a partir da versão 65.x
- Ópera a partir da versão 19.x

De momento não consegui encontrar suporte WebP para outros navegadores e dispositivos.

Quais os requisitos que a WebP precisa em WordPress ?

Até agora nenhuma, mas... A má notícia é que WordPress atualmente não há suporte independente para as imagens da WebP. Portanto, vamos agora ao próximo ponto.

Possibilidades de integrar WebP emWordPress :

  1. PluginUsar em

A Plugins(ShortPixelVersão Livre), Optimus (Versão Paga) ou o EWWW Image Optimizer (Versão Gratuita) são adequados para este fim. 

Optimus:

Optimus WebP

Infelizmente a WebP só é suportada pela versão paga da Optimus. Como o cache do lado do servidor RAIDBOXES já está integrado, você não precisa de um "Cache Enabler"Plugin, como recomendado aqui pela Optimus.

ShortPixel:

Pixel WebP curto

Na ShortPixelcaixa acima, você pode marcar a caixa como mostrado. Mas antes disso, eu redefiniria todas as imagens que você tem para o original e depois as Pluginotimizaria todas de uma vez com o original. Então você também deve ver ao mesmo tempo que você tem diferentes tipos de arquivo de suas fotos.

Optimizador de Imagem EWWW:

Ewwww Image Optimizer WebP
  1. WordPress Faça ajustes no .htaccess de

Alguns hosters têm a possibilidade de alterar algo no arquivo .htaccess, deliberadamente bloqueado por razões de segurança. Se você hospedar em um servidor Apache, você pode fazer os seguintes ajustes:


    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)^(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]



    Cabeçalho anexar Vary Accept env=REDIRECT_accept

AddType imagem/webp .webp

E num nginx:

# bloco de configuração http
map $http_accept $webp_ext {
padrão "";
"~*webp" ".webp"
}
# bloco de configuração do servidor
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

RAIDBOXES a propósito, esta regra de reescrita já é apoiada por nós. 

Onde posso encontrá-la?

O arquivo pode ser encontrado no servidor web em que foi WordPress instalado. O diretório raiz é o diretório principal onde o domínio está localizado no host da web. Se você não consegue ver, você tem que configurar a "máscara de arquivo remoto" para -la para que você possa ver arquivos escondidos. Claro que isto requer que você tenha direitos de acesso ou mesmo que você mesmo o hospede e use um programa FTP como o FileZilla. 

Existe uma terceira - e algo complicada - forma de adicionar algo ao seu WordPress arquivo -Themes function.php para que você possa carregar imagens no formato WebP por padrão. Como isto funciona, você pode ver, por exemplo neste artigo .

Conclusão

Infelizmente a WebP ainda não é comum como JPG e PNG, mas certamente se tornará mais importante no futuro. Afinal, a WebP pode melhorar o desempenho do seu site e, assim, a experiência do usuário e a satisfação dos visitantes do seu site.

Plugin Sim | não?

Existem muito bonsPlugins, que tiram o trabalho de seus ombros com o suporte do WebP e otimizam suas fotos. Pessoalmente, fui convidado para o Plugin Optimus agarrado. Caso contrário, certamente valeria a pena considerar a sua inclusão na página como código, especialmente porque então você seria capaz de usar Plugin pouparia mais. Mas o resultado final é Plugin para este assunto.

Para quem é o WebP adequado de qualquer maneira?

Em princípio, o WebP faz sentido para todos os sites. O formato é especialmente adequado para sites com muitas imagens. Por exemplo, para fotógrafos que querem manter a sua qualidade de imagem tão alta quanto possível, mas que ainda assim dão grande valor a um tempo de carregamento rápido. Mas também outros WordPress - usuários como pessoas criativas ou aqueles que têm algo para mostrar em forma pictórica devem fazer tudo para tornar a experiência do usuário de seus potenciais clientes e fãs tão agradável quanto possível.

Espero que tenha gostado do artigo e aguardo com expectativa a sua opinião! 

Stefan é um blogueiro em ascensão com o seu site aspiring-artist.com Ele blogs sobre arte, realiza WordPress sites para outros artistas aspirantes e é um consultor. Porque os artistas também precisam de um site individual e de um logotipo e marca significativos. - Aspire To Greatness (Aspirar à Grandeza)

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .