wordpress-498510-1663217.cloudwaysapps.com

Como usar imagens WebP no WordPress [Guia Definitivo e Funcional ATUALIZADO 2020]

Contato
Contato

Entre para nossa lista e receba
conteúdos exclusivos em primeira mão!

    Antes de começarmos a colocar a mão na massa gostaria de explicar o que são imagens WebP com um breve resumo para entendermos melhor sobre o assunto, se você se preocupa com o desempenho de seu site WordPress é imprescindível que você entenda de uma vez e aplique em seus sites.

    Hospedagem WordPress CloudWays

    O que é webP?

    O webP é um formato de imagem desenvolvido pelo Google que fornece compressão sem perdas e perdas superiores para imagens na web. A imagem webP pode ser menor em tamanho do que a imagem JPEG em até 40% com qualidade perfeita. Isso pode ter um impacto significativo no desempenho do seu site e na utilização da largura de banda. Como você pode ver (abrir imagens na nova guia para verificar a qualidade), eu poderia economizar até 51% usando o formato .webp em vez da imagem JPEG sem perder qualidade.

    Imagem JPEG – 693KB

    Imagem WebP – 333 KB

    Prós e contras de usar WebP

    A WebP tem muitos benefícios em relação a outros formatos, como JPEG, PNG ou GIF.

    • Tamanho de arquivo menor
    • Um formato para todos os tipos – JPEG, PNG e GIF podem ser convertidos em webp
    • Maior qualidade – Apesar do tamanho menor, você obterá uma qualidade de alto nível para suas imagens.

    Contras:

    • Suporte do navegador – Somente o Chrome e o Opera suportam a webp. Mas não se preocupe, você pode dizer ao WordPress que exiba JPEG ou PNG caso a webp não seja suportada nos navegadores dos visitantes.

    O que é Dropshipping? Como começar em 2019? [GUIA DETALHADO]

    Como usar imagens WebP no WordPress:

    1 – Usando o Plugin WebP Express (o mais funcional e grátis)

    Instale o plugin Webp Express, para isso navegue até o menu plugins, adicionar novo plugin e busque por Webp Express By Bjørn Rosell. Depois de instalado e ativado, navegue até o menu Configurações e Webp Express:

    Agora vamos configurá-lo:

    No primeiro bloco onde está escrito “Operation mode:” deixe selecionado a opção “Varied Imagens Responses“.
    No modo “Respostas de imagem variada”, o WebP Express cria regras de redirecionamento para imagens, de modo que uma solicitação de jpeg resultará em uma webp – mas apenas se a solicitação vier de um navegador habilitado para webp. Se um webp já existir, ele será veiculado imediatamente. Caso contrário, é convertido e, em seguida, adicionado. 

    Logo após em GENERAL, coloque as opções conforme a imagem abaixo:

    1. Scope: Uploads and Themes
    2. Image types to work on: Both jpegs and pngs
    3. Destination folder: In Separate Folder
    4. Destination structure: Document Root
    5. Cache-Control header (coloque em Custom e cole o código): public, max-age:86400, stale-while-revalidate=604800, stale-if-error=604800

    Em Redirection rules deixe as opções “Enable direct redirection to existing converted images?” e “Enable redirection to converter?” selecionados conforme a imagem abaixo:

    No bloco Conversion em Jpeg options:

    1. WebP encoding: Auto
    2. Quality for lossy: Fixed Quality > 70
    3. Quality for lossless: Apply preprocessing “Near lossless” quality: 65

    Em PNG options:

    1. WebP encoding: Auto
    2. Quality for lossy: 75 Alpha quality: 75
    3. Quality for lossless: Apply preprocessing “Near lossless” quality: 65

    Metadata: Copy all metadata to webp

    Em Conversion method, ative a opção GD Extension. Caso não esteja disponível essa opção, converse com seu provedor de hospedagem solicitando a ativação, pois essa extensão será a responsável pela conversão das imagens JPG e PNG em imagens WEBP, sem a extensão só irá funcionar se for feito o upload manualmente de imagens webp.
    Selecione a opção “Convert on upload“.
    Na opção “Bulk convert” vamos falar sobre mais pra frente, por enquanto essa opção não precisa fazer nada.

    Ative a opção Alter HTML.
    Ativar isso altera o código HTML, de modo que as imagens de webp sejam veiculadas em navegadores compatíveis com webp. É recomendável habilitar isso mesmo quando o redirecionamento também estiver ativado, para que as respostas de imagem variadas sejam usadas apenas para as imagens que não podem ser substituídas em HTML. As respostas variadas geralmente levam a um cache mais baixo em proxies e CDNs. E se os usuários fizerem o download dessas imagens, eles terão extensão jpg / png, mesmo que sejam webp.

    1. Replace image URLs: Escolha essa opção
    2. Only do the replacements in webp enabled browsers: Marque esta opção
    3. Em Where to replace marque a opção: The complete page (using output buffering)

    Feito! Agora vá em “Save settings and force new .htaccess rules” e salve sua configuração.

    Agora vamos configurar o cloudflare

    No Cloudflare acesse a opção do menu Page Rules e clique em Create Page Rule adicione a seguinte configuração:

    Onde está o meu domínio, você substitui pelo seu site e logo em seguida clique em Save and Deploy.

    Agora para finalizar nossa configuração, volte para as configurações do WebP Espress e cliquem Bulk Convert.

    Agora o plugin irá converter todas as suas imagens, vale a pena fazer isso fora do horário comercial, já que pode levar bastante tempo dependendo do seu servidor.

    => Otimizar seu site WordPress [GUIA PRÁTICO]

    2 – Use o plugin ShortPixel Image Optimizer

    Use o plugin ShortPixel Image Optimizer  para otimizar suas imagens e convertê-las para WebP em suas instalações do WordPress.
    Quando você fizer a instalação do plugin ShortPixel Image Optimizer, você poderá habilitar o WebP usando um dos seguintes métodos:

    Configuração do servidor:

    Você precisará adicionar o seguinte trecho de configuração ao seu arquivo de configuração .htaccess ou nginx.

    .htaccess:
    <IfModule mod_rewrite.c>
    	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]
    </IfModule>
    
    <IfModule mod_headers.c>
    	Header append Vary Accept env=REDIRECT_accept
    </IfModule>
    
    AddType image/webp .webp
    Configuração nginx:
    # http config block
    map $http_accept $webp_ext {
        default "";
        "~*webp" ".webp";
    }
    
    # server config block
    location ~* ^/wp-content/.+\.(png|jpg)$ {
        add_header Vary Accept;
        try_files $uri$webp_ext $uri =404;
    }

    Observe: este método NÃO funciona com um CDN
    Com o fragmento de configuração adicionado, os arquivos PNG e JPEG agora serão reescritos como WebP. No entanto, a extensão do arquivo em si não muda. Um arquivo PNG ainda aparecerá como um .png e um JPEG ainda aparecerá como um .jpeg no URL da imagem.
    Para verificar se a sua imagem está no formato WebP, você pode navegar até o URL da imagem, abrir o Chrome Developer Tools e navegar até a guia Rede. Ao clicar no arquivo de imagem, será aberto o separador de cabeçalhos de resposta para esse arquivo que mostra que o Content-Type é imagem / webp

    3 – Use o plugin Optimus Image Optimizer

    Você pode baixar o plugin Optimus Image Optimizer do repositório do WordPress. Você vai precisar de uma licença premium se você quiser converter suas imagens em WebP. Uma vez instalado, você pode ativar a “Creation of WebP files” (Criação de arquivos WebP) nas configurações do plugin.

    Criar arquivos de Imagens WEBP

    Depois que ativar a conversão de imagens para imagens Webp, ele criará uma imagem adicional para tudo o que converte. Portanto, se você fizer o upload de um arquivo PNG ou JPG, agora também há uma versão .webp da sua imagem. Lembre-se de que o PNG / JPG ainda é necessário porque eles ainda são usados ​​para exibir navegadores sem suporte. O Optimus faz a compactação sem perdas, portanto, seus arquivos PNG e JPG também são compactados.

    WebP Png JPG

    Há também uma opção de otimizador em massa caso você já tenha compactado suas imagens antes e ainda precise convertê-las em WebP.

    Otimizar todas imagens

    4 – Plugin Enabler Cache:

    Este é o método recomendado porque você poderá usar imagens WebPs no WordPress

    Site lento? Aprenda 19 truques para deixar seu site WordPress bem mais rápido

    Passos:

    1. Baixe e ative o plugin Enabler Cache
    2. Vá para Settings -> Cache Enablere verifique a opção destacada abaixo
    webP-images-in-WordPress-cache-enabler

    Bônus

    Seguem alguns sites que podem te ajudar na conversão de imagens.

    Convertio

    Convertio Conversor Online de ArquivosConvertio é um site ou melhor uma ferramenta online para converter centenas de ficheiros totalmente online e de maneira bem fácil, basta arrastar o arquivo para o site, ou clicando no botão para carregar. São mais de 309 diferentes formatos de documentos, imagens, folhas de cálculo, ebooks, arquivos e etc.

    Converta facilmente sua imagem PNG, JPG, GIF ou qualquer outro tipo de imagem em imagens WebP.

    Ezgif.com

    Ezgif Conversor Online de Arquivos WebP, PNG, MNG e FLIF animadosO Ezgif.com é um conjunto de ferramentas simples e gratuito projetado principalmente para criar e editar GIFs animados, mas também suporta edição e realizam conversões para muitos outros formatos de imagem, incluindo WebP, PNG, MNG e FLIF animados, bem como alguns recursos básicos. edição de vídeo.

     

    Conclusão:

    Quando você decide usar imagens do webP no WordPress, sem sombra de dúvidas é uma das melhores decisões que você fará para o desempenho do seu site. Se você gostou desse post e se realmente te ajudou não deixe de compartilhar com seus amigos. Até mais!

    Faça o download deste post inserindo seu e-mail abaixo

    Não se preocupe, não fazemos spam.

    Compartilhe:
    Compartilhar no facebook
    Compartilhar no twitter
    Compartilhar no linkedin
    Compartilhar no pinterest
    Compartilhar no tumblr
    Compartilhar no whatsapp

    21 comentários em “Como usar imagens WebP no WordPress [Guia Definitivo e Funcional ATUALIZADO 2020]”

      1. Michael Campos

        Normalmente eles ficam na pasta raiz de sua hospedagem, ou seja, dentro da pasta /public ou /public_html ou /www depende de como sua hospedagem funciona. Mas se por um acaso eles não existam, você poderá criá-los e subir para a pasta raiz. Para criar é bem fácil, é só abrir o bloco de notas, adicionar as sentenças que está post e salvar, na hora de renomear e só colocar .htacess ou nginx.conf e salvar.

      2. Normalmente eles ficam na pasta raiz de sua hospedagem, ou seja, dentro da pasta /public ou /public_html ou /www depende de como sua hospedagem funciona. Mas se por um acaso eles não existam, você poderá criá-los e subir para a pasta raiz. Para criar é bem fácil, é só abrir o bloco de notas, adicionar as sentenças que está post e salvar, na hora de renomear e só colocar .htacess ou nginx.conf e salvar.

      1. Na verdade vc só pode usar 2. ShortPixel com enable cache ou Optimus com enable cache. Você instala o plugin primeiro e depois ajusta o htacess ou nginx

    1. Jadir Tosta Junior

      Olá MIchael, espero que esteja bem.

      Adorei a dica e já implantei, obrigado por tirar seu tempo para preparar um conteúdo bacana e útil como esse.

      Estive lendo sobre páginas AMP, o templante do seu site é nesta estrutura? É bem parecido. Veja se dá para preparar um post sobre templates AMP.

      Estou pesquisando sobre isso, mas, não é minha praia, VEJA:

      https://amp-wp.org/showcases/?template_mode=native

      https://wordpress.org/plugins/addthis/

      https://amp.dev/pt_br/documentation/guides-and-tutorials/?format=websites

      https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup?format=websites

      https://amp.dev/documentation/guides-and-tutorials/?format=stories

      https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/?format=stories

      Abraço.

    2. Thiago de Oliveira

      Olá Michel, pode me tirar uma dúvida? Eu usei o Imagify, ele criou as imagens webp, otimizou as .png e .jpg, porém o site ainda continua sem usar imagens webp, não sei como faço para o site usar as webp criadas. Sabe me informar?

    3. Pingback: Otimizar seu site WordPress [GUIA PRÁTICO] - Blog do Michael

    4. Michell Albuquerque

      Oi Michael, fiquei com uma dúvida. No caso meu servidor é hostGator, tenho que fazer a configuração igual vc fez no CloudFlare??

    5. Olá Michael,
      Primeiramente parabéns pelo tutorial incrível.
      Só tive um pequeno probleminha, fiz todas as configurações idênticas a mostrada aqui no site,
      e ocorreu tudo bem, o Plugin está usando o “Imagick (PHP extension)” pra fazer a conversão dos novos arquivos
      E a imagem WebP está aparecendo no meu site normal,

      O problema é que na hora de salvar a imagem, ela está vindo em WebP e isso é ruim pra mim pois meu site é praticamente feito de imagens, e edito elas o tempo todo.

      E se os usuários fizerem o download dessas imagens, eles terão extensão jpg / png, mesmo que sejam webp.

      Pode me dar uma luz, obrigado desde já 🙂

        1. Entendi, é que eu vi lá no posto aí achei que fosse possível. Mas obrigado por responder.

          Outra dúvida que eu queria tirar, depois que eu implantei esse sistema, as imagens estão demorando muito pra carregar, e estão usando muito processamento do meu servidor, tem diferença usar o “Imagick (PHP extension)” ou outro script pra converter, algum é mais leve que os outros?

    6. Pedro Henrique Knoll Giacometo

      Olá Michael,
      Você recomenda alguma alternativa gratuita ao Webp Express? (uso nginx e minha instalação é multisite – parece que o plugin ainda não está muito redondo nestes casos)

      Obrigado

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *