O que é WebP e como usar imagens WebP no WordPress
As imagens são geralmente uma das maiores causas de páginas da Web com carregamento lento . Eles não apenas reduzem o tempo de carregamento, mas também podem ocupar muito espaço e recursos em seu servidor. Escolher cuidadosamente o tipo de arquivo e compactá-los ajuda a reduzir a velocidade de carregamento, mas eles só podem ser otimizados até o momento, antes que a qualidade da imagem sofra. Outra opção é usar um dos tipos de arquivo de imagem mais otimizados: o WebP do Google.
O que é o WebP?
O WebP é um formato de imagem raster do Google projetado especificamente para a web. Ele fornece compactação sem perdas e com perdas que permite que os designers da Web mostrem imagens mais ricas em tamanhos de arquivo menores.
Imagens com perda de WebP usam codificação preditiva para codificar a imagem. Ele reduz os tamanhos dos arquivos observando os pixels vizinhos para prever os valores e, em seguida, codifica apenas as diferenças. Imagens com perdas são até 34% menores do que a imagem comparável como um JPEG.
Imagens sem perda de WebP reconstroem novos pixels usando fragmentos de imagem que já foram vistos. Se não encontrar uma correspondência, pode usar uma paleta local. As imagens sem perdas são 26% menores que a mesma imagem de um PNG. O Lossless WebP suporta canal alfa (transparência) com um tamanho de arquivo 3 vezes menor que a imagem comparável de um PNG.
O que é um arquivo WebP?
Um arquivo WebP usa dados de imagem VP8 ou VP8L e um contêiner baseado em RIFF . Ele usa a extensão de arquivo .webp. A biblioteca libwebp é a implementação de referência para as especificações do WebP. Você pode ver a biblioteca no repositório git ou como um tarball .
Como isso vai mudar suas práticas de web design
A principal vantagem do WebP é o pequeno tamanho do arquivo, portanto, as páginas da Web serão carregadas mais rapidamente e você usará menos recursos do seu servidor. Isso também significa que você poderá usar imagens maiores com mais cores sem adicionar à carga atual do servidor se os visitantes estiverem usando um navegador que os suporte.
Você não precisa ser tão consciente de usar áreas menores em seus layouts para suas imagens. Você pode usar tamanhos que funcionem para o design em vez de fazer com que o design se ajuste a imagens menores devido à velocidade da página ou aos tempos de carregamento.
Como usar imagens WebP no WordPress
O WebP é suportado nativamente nos navegadores Chrome e Opera e em muitas ferramentas de edição de imagens. Você ainda pode se deparar com um problema de segurança com o WordPress. Existem várias maneiras de usar o WebP com o WordPress. Você pode converter seus arquivos, mas a melhor opção é usar um plugin.
Plugins de Conversão WebP
Uma das melhores coisas sobre o uso de imagens do WebP como designer ou desenvolvedor é que você não precisa fazer o trabalho de criar os arquivos. Em vez disso, você só precisa instalar um plug-in de conversão. Você fará o upload de suas imagens normais nos formatos JPEG ou PNG e o plug-in converterá esses arquivos em WebP para entregar as imagens aos seus visitantes.
A vantagem desse método é que você só precisa manipular os tipos de arquivo aos quais já está acostumado, e os visitantes que não podem usar o WebP ainda receberão os tipos de arquivo originais. Aqueles que podem receber o tipo de arquivo WebP verão tempos de carregamento mais rápidos.
Outro método é permitir que você envie arquivos WebP para o seu site. Esse método não é recomendado, pois nem todos os navegadores suportam esse formato. Isso significa que alguns de seus visitantes não poderão visualizar suas imagens.
Existem vários plugins gratuitos e premium que convertem imagens para o WebP. Aqui está uma olhada em algumas opções gratuitas.
EWWW Image Optimizer
O EWWW Image Optimizer é um plug-in gratuito com um recurso de conversão de WebP. Ele gera a versão WebP de seus JPEGs e PNGs. Ele inclui muitas opções, como regras de reconfiguração compatíveis com o Apache, e uma opção alternativa de reescrita do WebP. É compatível com caches e CDNs e funciona com o plug-in Cache Enabler de KeyCDN.
Este é provavelmente o mais fácil de usar. Os recursos internos do WebP permitem usar a conversão com perdas para JPEGs e sem perdas para PNGs, e a conversão é automática. Tudo o que você precisa fazer é instalar o plug-in e ativar o recurso na guia WebP. Nenhuma outra configuração é necessária.
ShortPixel Image Optimizer
O ShortPixel Image Optimizer é um plugin gratuito que converte qualquer JPEG, PNG ou GIF para WebP. Ele usa compactação com perdas e sem perdas. Ele também funciona com plugins de cache que são compatíveis com o WebP. Ele fornece imagens WebP para os navegadores que podem visualizá-los e os outros formatos para aqueles que não podem.
Ele também tem uma opção para adicionar as imagens do WebP nas páginas front-end usando HTML. Para fazer isso, você pode usar a tag em vez da tag normal . Para configurá-lo para converter imagens automaticamente, basta ativar o recurso na guia Avançado. Você pode restaurar imagens se quiser.
WebP Express
O WebP Express é um plug-in gratuito que produz imagens com menos da metade do tamanho dos JPEGs. Ele roteia JPEG e PNGs para um conversor de imagem a ser convertido ou para a imagem já convertida. Ele funciona independentemente de como as imagens chegaram ao servidor. Ele funciona com a biblioteca de mídia, galerias e imagens de temas referenciadas com CSS.
Ele não funciona com o servidor Microsoft IIS ou WAMP e não foi testado com vários sites. Isso requer alguma configuração para os métodos de conversão, mas você tem vários para escolher. As imagens usarão o método de conversão no topo primeiro e se esse falhar, ele irá percorrer a lista até encontrar um método que funcione com a imagem. Você pode arrastá-los na ordem em que deseja usá-los.
Opti MozJpeg Guetzli WebP
O Opti MozJpeg Guetzli WebP é um plug-in gratuito criado com o Google Pagespeed Insights em mente. Ele usa os codificadores de imagem Mozilla MozJpeg, Google Guetzli e Google WebP para converter suas imagens. Os codificadores podem ser instalados localmente ou você pode usar o cliente ssh integrado. Ele acessa os codificadores remotamente usando uma conexão ssh com a máquina virtual do autor.
Ele pode converter todos os PNGs de canais não-alfa em JPEGs. Faz o backup de suas imagens antes de fazer alterações. Você pode reverter suas imagens quando quiser.
Exemplos de WebP
Para os meus exemplos, eu queria mostrar algumas diferenças de qualidade e tamanho. Estou salvando a mesma imagem em vários formatos e níveis de qualidade para comparar. Na verdade, estou mostrando capturas de tela das imagens no meu editor de imagens. Estou usando o Paint.NET com um plugin WebP. Essas imagens são reduzidas em tamanho um pouco mais quando eu as carrego para este site, então elas podem parecer um pouco mais diferentes umas das outras do que elas realmente fazem, mas espero que elas ofereçam uma boa comparação.
Aqui está uma imagem que tirei do Unsplash. Este é o arquivo JPEG, reduzido para 800 pixels de largura e salvo com 98% de qualidade. É um arquivo de 237kb.
Aqui está a mesma imagem salva como PNG. É um arquivo de 1.09mb.
Aqui está a mesma imagem salva como um WebP. Também é salvo com 98% de qualidade. É um arquivo de 199kb.
Aqui está o mesmo arquivo WebP salvo em 34%. É um arquivo de 35kb. É difícil ver qualquer diferença entre as imagens.
Terminando Pensamentos
Essa é a nossa olhada no que é o WebP e o que é um arquivo WebP. Este formato reduz consideravelmente os tamanhos dos arquivos de imagem, economizando muito espaço e melhorando os tempos de carregamento. A principal desvantagem é que é compatível apenas com alguns navegadores. Felizmente, você pode usar um plug-in que converte sua biblioteca atual em WebP para aqueles que usam navegadores compatíveis enquanto veicula os tipos de arquivo comuns àqueles que não podem visualizar o formato WebP.
O WebP é um formato interessante. Já que é do Google, espero que acabe pegando. Tem sido em torno desde 2010, por isso está se movendo lentamente. Economias em tamanho de arquivo e velocidade de carregamento fazem valer a pena usar plugins para converter imagens para servir aos visitantes que podem usá-las. É velocidade livre.
O que é WebP e como usar imagens WebP no WordPress
As imagens são geralmente uma das maiores causas de páginas da Web com carregamento lento . Eles não apenas reduzem o tempo de carregamento, mas também podem ocupar muito espaço e recursos em seu servidor. Escolher cuidadosamente o tipo de arquivo e compactá-los ajuda a reduzir a velocidade de carregamento, mas eles só podem ser otimizados até o momento, antes que a qualidade da imagem sofra. Outra opção é usar um dos tipos de arquivo de imagem mais otimizados: o WebP do Google.
O que é o WebP?
O WebP é um formato de imagem raster do Google projetado especificamente para a web. Ele fornece compactação sem perdas e com perdas que permite que os designers da Web mostrem imagens mais ricas em tamanhos de arquivo menores.
Imagens com perda de WebP usam codificação preditiva para codificar a imagem. Ele reduz os tamanhos dos arquivos observando os pixels vizinhos para prever os valores e, em seguida, codifica apenas as diferenças. Imagens com perdas são até 34% menores do que a imagem comparável como um JPEG.
Imagens sem perda de WebP reconstroem novos pixels usando fragmentos de imagem que já foram vistos. Se não encontrar uma correspondência, pode usar uma paleta local. As imagens sem perdas são 26% menores que a mesma imagem de um PNG. O Lossless WebP suporta canal alfa (transparência) com um tamanho de arquivo 3 vezes menor que a imagem comparável de um PNG.
O que é um arquivo WebP?
Um arquivo WebP usa dados de imagem VP8 ou VP8L e um contêiner baseado em RIFF . Ele usa a extensão de arquivo .webp. A biblioteca libwebp é a implementação de referência para as especificações do WebP. Você pode ver a biblioteca no repositório git ou como um tarball .
Como isso vai mudar suas práticas de web design
A principal vantagem do WebP é o pequeno tamanho do arquivo, portanto, as páginas da Web serão carregadas mais rapidamente e você usará menos recursos do seu servidor. Isso também significa que você poderá usar imagens maiores com mais cores sem adicionar à carga atual do servidor se os visitantes estiverem usando um navegador que os suporte.
Você não precisa ser tão consciente de usar áreas menores em seus layouts para suas imagens. Você pode usar tamanhos que funcionem para o design em vez de fazer com que o design se ajuste a imagens menores devido à velocidade da página ou aos tempos de carregamento.
Como usar imagens WebP no WordPress
O WebP é suportado nativamente nos navegadores Chrome e Opera e em muitas ferramentas de edição de imagens. Você ainda pode se deparar com um problema de segurança com o WordPress. Existem várias maneiras de usar o WebP com o WordPress. Você pode converter seus arquivos, mas a melhor opção é usar um plugin.
Plugins de Conversão WebP
Uma das melhores coisas sobre o uso de imagens do WebP como designer ou desenvolvedor é que você não precisa fazer o trabalho de criar os arquivos. Em vez disso, você só precisa instalar um plug-in de conversão. Você fará o upload de suas imagens normais nos formatos JPEG ou PNG e o plug-in converterá esses arquivos em WebP para entregar as imagens aos seus visitantes.
A vantagem desse método é que você só precisa manipular os tipos de arquivo aos quais já está acostumado, e os visitantes que não podem usar o WebP ainda receberão os tipos de arquivo originais. Aqueles que podem receber o tipo de arquivo WebP verão tempos de carregamento mais rápidos.
Outro método é permitir que você envie arquivos WebP para o seu site. Esse método não é recomendado, pois nem todos os navegadores suportam esse formato. Isso significa que alguns de seus visitantes não poderão visualizar suas imagens.
Existem vários plugins gratuitos e premium que convertem imagens para o WebP. Aqui está uma olhada em algumas opções gratuitas.
EWWW Image Optimizer
O EWWW Image Optimizer é um plug-in gratuito com um recurso de conversão de WebP. Ele gera a versão WebP de seus JPEGs e PNGs. Ele inclui muitas opções, como regras de reconfiguração compatíveis com o Apache, e uma opção alternativa de reescrita do WebP. É compatível com caches e CDNs e funciona com o plug-in Cache Enabler de KeyCDN.
Este é provavelmente o mais fácil de usar. Os recursos internos do WebP permitem usar a conversão com perdas para JPEGs e sem perdas para PNGs, e a conversão é automática. Tudo o que você precisa fazer é instalar o plug-in e ativar o recurso na guia WebP. Nenhuma outra configuração é necessária.
ShortPixel Image Optimizer
O ShortPixel Image Optimizer é um plugin gratuito que converte qualquer JPEG, PNG ou GIF para WebP. Ele usa compactação com perdas e sem perdas. Ele também funciona com plugins de cache que são compatíveis com o WebP. Ele fornece imagens WebP para os navegadores que podem visualizá-los e os outros formatos para aqueles que não podem.
Ele também tem uma opção para adicionar as imagens do WebP nas páginas front-end usando HTML. Para fazer isso, você pode usar a tag em vez da tag normal ![]()
. Para configurá-lo para converter imagens automaticamente, basta ativar o recurso na guia Avançado. Você pode restaurar imagens se quiser.
WebP Express
O WebP Express é um plug-in gratuito que produz imagens com menos da metade do tamanho dos JPEGs. Ele roteia JPEG e PNGs para um conversor de imagem a ser convertido ou para a imagem já convertida. Ele funciona independentemente de como as imagens chegaram ao servidor. Ele funciona com a biblioteca de mídia, galerias e imagens de temas referenciadas com CSS.
Ele não funciona com o servidor Microsoft IIS ou WAMP e não foi testado com vários sites. Isso requer alguma configuração para os métodos de conversão, mas você tem vários para escolher. As imagens usarão o método de conversão no topo primeiro e se esse falhar, ele irá percorrer a lista até encontrar um método que funcione com a imagem. Você pode arrastá-los na ordem em que deseja usá-los.
Opti MozJpeg Guetzli WebP
O Opti MozJpeg Guetzli WebP é um plug-in gratuito criado com o Google Pagespeed Insights em mente. Ele usa os codificadores de imagem Mozilla MozJpeg, Google Guetzli e Google WebP para converter suas imagens. Os codificadores podem ser instalados localmente ou você pode usar o cliente ssh integrado. Ele acessa os codificadores remotamente usando uma conexão ssh com a máquina virtual do autor.
Ele pode converter todos os PNGs de canais não-alfa em JPEGs. Faz o backup de suas imagens antes de fazer alterações. Você pode reverter suas imagens quando quiser.
Exemplos de WebP
Para os meus exemplos, eu queria mostrar algumas diferenças de qualidade e tamanho. Estou salvando a mesma imagem em vários formatos e níveis de qualidade para comparar. Na verdade, estou mostrando capturas de tela das imagens no meu editor de imagens. Estou usando o Paint.NET com um plugin WebP. Essas imagens são reduzidas em tamanho um pouco mais quando eu as carrego para este site, então elas podem parecer um pouco mais diferentes umas das outras do que elas realmente fazem, mas espero que elas ofereçam uma boa comparação.
Aqui está uma imagem que tirei do Unsplash. Este é o arquivo JPEG, reduzido para 800 pixels de largura e salvo com 98% de qualidade. É um arquivo de 237kb.
Aqui está a mesma imagem salva como PNG. É um arquivo de 1.09mb.
Aqui está a mesma imagem salva como um WebP. Também é salvo com 98% de qualidade. É um arquivo de 199kb.
Aqui está o mesmo arquivo WebP salvo em 34%. É um arquivo de 35kb. É difícil ver qualquer diferença entre as imagens.
Terminando Pensamentos
Essa é a nossa olhada no que é o WebP e o que é um arquivo WebP. Este formato reduz consideravelmente os tamanhos dos arquivos de imagem, economizando muito espaço e melhorando os tempos de carregamento. A principal desvantagem é que é compatível apenas com alguns navegadores. Felizmente, você pode usar um plug-in que converte sua biblioteca atual em WebP para aqueles que usam navegadores compatíveis enquanto veicula os tipos de arquivo comuns àqueles que não podem visualizar o formato WebP.
O WebP é um formato interessante. Já que é do Google, espero que acabe pegando. Tem sido em torno desde 2010, por isso está se movendo lentamente. Economias em tamanho de arquivo e velocidade de carregamento fazem valer a pena usar plugins para converter imagens para servir aos visitantes que podem usá-las. É velocidade livre.
Artigo Original