Como veicular imagens WebP em vez de JPG ou PNG com WordPress

O Google está no topo da cadeia alimentar da Internet. A empresa influencia (ou dita) muito do que acontece online. E seu novo formato de imagem, WebP, continua essa tendência. Com a velocidade de carregamento da página sendo cada vez mais importante (principalmente por causa do Google Page Rank), os desenvolvedores e designers consideram a compactação de imagens a maneira mais fácil de reduzir o tempo de carregamento. As imagens WebP do Google são aproximadamente 30% menores do que as imagens JPG ou PNG típicas e mantêm uma qualidade equivalente. E o melhor de tudo, você não precisa se preocupar em converter suas imagens em WebP manualmente.

Neste artigo, mostraremos como usar esse novo formato de imagem com o WordPress, embora ainda não seja compatível por padrão.

Vamos lá.

Inscreva-se no nosso canal no Youtube

Usando Optimole para servir WebP no WordPress

WebP, como formato de imagem, não é compatível por padrão no WordPress. Você pode fazer upload de uma imagem .webp, mas de forma muito parecida com um arquivo SVG, você receberá mensagens de erro. E, novamente, como usar arquivos SVG com WordPress, há uma solução alternativa fácil por meio do plug-in para fazer seu site WP dar zoom na hora.

Dos serviços WebP que experimentamos, nosso favorito é o Optimole. Tivemos a maior sorte em fazê-lo funcionar com o mínimo de ajustes, por isso queremos orientá-lo sobre como configurá-lo e tornar sua instalação do WordPress compatível com WebP da forma mais indolor possível.

Primeiro, obviamente, você vai querer baixar e instalar o próprio plugin. Está no repositório WP.org e é totalmente gratuito. Assim como o serviço baseado em API que o alimenta (até certo ponto). Embora seja possível converter imagens tradicionais em WebP rapidamente usando PHP, nem todo host da web dá essa permissão ao seu servidor. Se você tiver essa permissão, também poderá usar o plug-in WebP Express . Você obtém muito controle com ele, mas é um que requer mais ajustes para funcionar sem problemas.

Depois de instalar e ativar o Optimole em seu site WordPress, você encontrará uma nova opção de menu em Mídia - Optimole .

Sua chave de API Optimole

Antes de acessar quaisquer definições ou configurações, você precisa ter uma conta Optimole. Se você já configurou um, pode clicar no botão Já tenho uma chave de API . Caso contrário, registre-se e envie a chave de API por e-mail . A conta básica para uma chave API é gratuita e você obtém cerca de 5.000 visitas nessa camada. Se você precisar de mais do que isso, existem níveis de preços disponíveis.

A Optimole define uma visita como “ qualquer pessoa que visite o seu site uma vez [. . .] Cada usuário é contado apenas uma vez. Não importa o que eles façam no seu site, quantas imagens baixem ou quantas páginas visitem; é apenas um usuário. Se eles saem do seu site e voltam no mesmo dia, ainda são apenas um usuário. ”

Depois que as visitas medidas acabam, apenas as imagens WebP param de ser veiculadas. Suas próprias imagens não. Você encontrará a chave de API em seu painel do Optimole na parte superior.

Basta colá-lo de volta no painel do WordPress e você estará pronto para começar a exibir imagens WebP com o WordPress.

Seus painéis do Optimole WordPress

No painel do WordPress, você obtém algumas informações básicas sobre a otimização do WebP. Isso permite que você solucione problemas e avalie o sucesso real da aceleração. Dessa forma, você pode entrar e ajustar várias configurações.

Primeiro, você vê a conta anexada à API e, na parte inferior da tela, o plug-in exibe as imagens otimizadas mais recentemente. Você pode ver como as imagens WebP que foram veiculadas são muito menores em relação às originais que você carregou para o WordPress.

Em seguida, há a guia Possíveis problemas no topo. Ninguém gosta de ver a guia destacada, mas também todos nós precisamos ver quais conflitos podem surgir.

O principal problema que enfrentamos é com outros plug-ins de compressão e entrega de imagens. Como você pode ver na imagem acima, o plugin Jetpack funciona de maneira semelhante ao Optimole por meio do APIT Photon, para que eles possam bater cabeças. Para nós, isso se manifestou como nenhuma imagem sendo entregue ao visitante. Não tivemos problemas com outros serviços de compactação como TinyPNG ou Smush.

Usando os painéis

Se você quiser informações mais detalhadas sobre como está o desempenho do seu site com o WebP, o painel externo do Optimole tem essas informações para você.

Em vez de apenas 9,5x menor, você pode ver os tamanhos reais dos arquivos que foram veiculados. Bem como quais arquivos são eles próprios ao longo de um período de 30 dias.

Você também pode definir marcas d'água no painel do Optimole (ou WP) para que, quando alguém receber um WebP do seu site WordPress, seu logotipo seja exibido automaticamente. É um processo simples e você obtém controle sobre opacidade, localização e assim por diante.

Você pode essencialmente fazer as mesmas coisas em ambos os painéis. Tanto na guia Configurações no WordPress, ou visitando o painel externo em Optimole. Depende inteiramente do que você está mais confortável, bem como do nível de dados de que você precisa em um determinado momento.

Além disso, você será capaz de controlar o nível de compactação, carregamento lento e quando / se certas imagens serão servidas como WebP com base em nomes de arquivos. Você encontrará tudo isso na guia Configurações de Mídia - Otimização .

Empacotando

A melhor parte de usar o WebP com sites WordPress é que você não precisa trabalhar manualmente com os arquivos. Sem uploads extras, sem tempo de compactação extra, nada. Devido à forma como as APIs funcionam, todos os cálculos e processos são executados em tempo real. O Google realmente tornou a Internet mais rápida usando WebP em vez de JPG ou PNG. O maior benefício, porém, é que as imagens mantêm a mesma qualidade, mesmo com seus tamanhos sendo significativamente reduzidos. Pode ser autossuficiente da parte do Google fazer com que você use o formato deles para acelerar o seu site para que eles possam classificá-lo em uma posição mais elevada. A experiência do usuário final também é melhor. E isso é o que importa no final.

O que você acha de fornecer imagens WebP aos visitantes do seu site?

Imagem apresentada por artigo por vladwel / shutterstock.com