Converter for Media – Otimização de imagens | Conversão para WebP e AVIF

FAQ

Como obter suporte técnico? (antes de pedir ajuda)

Antes de adicionar um novo tópico, leia todas as outras perguntas nas Perguntas frequentes e outros tópicos no fórum de suporte primeiro. Talvez alguém tenha tido um problema semelhante e tenha sido resolvido.

Ao adicionar um tópico, siga estes passos e responda a cada um deles:

1. Você tem algum erro na página de configurações do plugin? Leia este tópico se tiver algum erro.

2. URL do seu site.

3. Captura de tela da aba Central de ajuda na tela de configurações do plugin – faça uma captura de tela de TODA a página.

4. Por favor, faça o teste, que está descrito nas Perguntas frequentes, na pergunta “Como verificar se o plugin funciona?”. Envie uma captura de tela do Devtools com os resultados do teste.

Lembre-se de incluir as respostas para todas as perguntas adicionando um tópico. É muito mais fácil e agiliza a solução do seu problema.

Configuração para Nginx

Para o servidor Nginx que não oferece suporte às regras .htaccess, é necessária uma configuração adicional do servidor Nginx para que o plugin funcione corretamente.

Siga os 4 passos abaixo (faça todos eles):

Passo 1

Encontre o arquivo de configuração em um dos caminhos (lembre-se de selecionar o arquivo de configuração usado pelo seu vhost):
– /etc/nginx/sites-available/ ou /etc/nginx/sites-enabled/
– /etc/nginx/conf.d/

e adicione este código (adicione estas linhas no início do bloco server { ... } block) – lembre-se de adicionar estas regras antes de qualquer outro location {} rules:

# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
    set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_avif
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

Aqui está um exemplo de como é uma configuração do Nginx adicionada corretamente (este é um exemplo de configuração do Nginx, mas na maioria dos casos é semelhante). Observe onde estão colocadas as regras marcadas com uma moldura vermelha.

Passo 2

Em seguida, adicione suporte para os tipos MIME necessários, se eles não forem suportados. Edite o arquivo de configuração:
– /etc/nginx/mime.types

e adicione este código (adicione estas linhas dentro do bloco types { ... }):

image/webp webp;
image/avif avif;

Passo 3

Depois de fazer as alterações, lembre-se de reiniciar a máquina:

systemctl restart nginx

Em caso de problemas, entre em contato conosco no fórum de suporte. Vamos tentar ajudar.

Passo 4

Veja também a pergunta “Configuração do Proxy Nginx” nas Perguntas frequentes abaixo.

Configuração do Proxy Nginx

Se na página de configurações do plugin você encontrar o erro de configuração do servidor com um código de erro: bypassing_apache, rewrites_not_executed ou rewrites_cached, significa que há um problema com o Proxy reverso do Nginx para arquivos estáticos ou Nginx Caching para arquivos estáticos.

Para resolver esse problema, procure regras desse tipo em um dos principais arquivos de configuração do Nginx para o domínio (a lista de extensões na condição de localização pode variar, portanto, procure semelhanças):

location ~* ^.+\.(css|js|jpg|jpeg|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires max;
...

ou

location ~* ^.+\.(css|js|jpe?g|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires 1M;
    try_files $uri @proxy;
...

Se você encontrar essas regras, remova os seguintes formatos delas:
– jpg e jpeg ou jpe?g
– png
– gif
– webp

Depois de fazer as alterações, lembre-se de reiniciar o serviço:

systemctl restart nginx

Erro na tela de configurações do plugin?

Se você tiver um erro na tela de configurações do plugin, antes de tudo, leia-o com atenção. Eles são exibidos quando há um problema com a configuração do seu servidor ou site.

As mensagens são projetadas para reduzir o número de solicitações de suporte repetidas. Economiza o seu e o nosso tempo. Leia este tópico para obter mais informações.

Erro ao converter?

Você pode obter vários tipos de erros durante a conversão. Em primeiro lugar, leia atentamente o seu conteúdo. Na maioria das vezes, você pode resolver esse problema sozinho. Tente fazer isso ou entre em contato com o administrador do servidor.

Se você receber um erro: Arquivo "%s" não existe. Verifique o caminho do arquivo. significa que a função file_exists() em PHP retornou false usando o caminho de arquivo fornecido na mensagem de erro. Verifique este caminho e certifique-se de que está correto.

Se você receber um erro: O arquivo "%s" está ilegível. Verifique as permissões do arquivo. significa que a função is_readable() em PHP retornou false usando o caminho de arquivo fornecido na mensagem de erro. Verifique as permissões do arquivo e o diretório no qual o arquivo está localizado.

Se você receber um erro: "%s" não é um arquivo de imagem válido. significa que o arquivo está danificado de alguma forma. Baixe o arquivo para o disco, salve-o novamente usando qualquer programa gráfico e adicione-o novamente à página. Se o erro se aplicar a imagens individuais, então ignore – apenas as imagens originais serão carregadas, não o WebP.

Se você receber um erro: A imagem "%s" convertida em .webp é maior que o original e o arquivo .webp convertido foi excluído. significa que a imagem original pesava menos que WebP. Isso acontece quando as imagens foram compactadas antes. Desative a opção “Remoção automática de arquivos em formatos de saída maiores que o original” nas configurações do plugin para forçar sempre o uso do WebP.

Quais são os requisitos do plugin?

Praticamente todas as hospedagens atendem a esses requisitos. Você deve usar PHP no mínimo 7.0 e ter a extensão GD ou Imagick instalada. A extensão deve suportar formato WebP. Se você tiver um erro dizendo que a biblioteca GD ou Imagick não está instalada, mas você a instalou, provavelmente eles estão configurados incorretamente e não tem suporte WebP.

São extensões nativas do PHP necessárias, usadas entre outros pelo WordPress para gerar miniaturas. Seu servidor também deve ter os módulos mod_mime, mod_rewrite e mod_expires ativados.

Um exemplo da configuração correta do servidor pode ser encontrado aqui. O link para sua configuração atual pode ser encontrado na aba Central de ajuda na tela de configurações do plugin.

Observe os itens marcados em vermelho. Se os valores marcados em vermelho não aparecerem no seu caso, significa que seu servidor não atende aos requisitos técnicos. Preste atenção ao valor WebP Support para a biblioteca GD e WEBP na lista de extensões suportadas para a biblioteca Imagick.

Em uma situação em que seu servidor não atenda aos requisitos técnicos, entre em contato com o administrador do servidor. Não podemos ajudá-lo. Não nos contate sobre este assunto, porque este é um problema de configuração do servidor, não do plugin.

Além disso, a API REST deve estar habilitada e funcionar sem restrições adicionais. Se você tiver algum problema com ele, entre em contato com o desenvolvedor que criou seu site. Ele deve encontrar facilmente o problema com a API REST não funcionando.

Como verificar se o plugin funciona?

Você pode encontrar mais informações sobre como o plugin funciona em nosso manual.

Como alterar o caminho para uploads?

Isso é possível usando os seguintes tipos de filtros para alterar os caminhos padrão. É uma solução para usuários avançados. Se não for, pule esta pergunta.

Caminho para o diretório de instalação raiz do WordPress (ABSPATH por padrão):

add_filter( 'webpc_site_root', function( $path ) {
    return ABSPATH;
} );

Caminhos para diretórios (relativo ao diretório raiz):

add_filter( 'webpc_dir_name', function( $path, $directory ) {
    switch ( $directory ) {
        case 'uploads':
            return 'wp-content/uploads';
        case 'webp':
            return 'wp-content/uploads-webpc';
        case 'plugins':
            return 'wp-content/plugins';
        case 'themes':
            return 'wp-content/themes';
    }
    return $path;
}, 10, 2 );

Observe que o diretório /uploads-webpc deve estar no mesmo nível de aninhamento que /uploads, /plugins e /temas diretórios.

Prefixo na URL do diretório /wp-content/ ou equivalente (usado em .htaccess):

add_filter( 'webpc_htaccess_rewrite_path', function( $prefix ) {
    return '/';
} );

Para o seguinte exemplo de estrutura personalizada do WordPress:

...
├── web
    ...
    ├── app
    │   ├── mu-plugins
    │   ├── plugins
    │   ├── themes
    │   └── uploads
    ├── wp-config.php
    ...

Use os seguintes filtros:

add_filter( 'webpc_site_root', function( $path ) {
    return 'C:/WAMP/www/project/web'; // your valid path to root
} );
add_filter( 'webpc_htaccess_rewrite_path', function( $prefix ) {
    return '/';
} );
add_filter( 'webpc_dir_name', function( $path, $directory ) {
    switch ( $directory ) {
        case 'uploads':
            return 'app/uploads';
        case 'webp':
            return 'app/uploads-webpc';
        case 'plugins':
            return 'app/plugins';
        case 'themes':
            return 'app/themes';
    }
    return $path;
}, 10, 2 );

Depois de definir os filtros, vá para Configurações -> Converter for Media no painel de administração e clique no botão Salvar alterações. Arquivos .htaccess com regras apropriadas devem ser criados nos diretórios /uploads e /uploads-webpc.

Como excluir caminhos da conversão?

Para excluir diretórios selecionados, use o seguinte filtro:

add_filter( 'webpc_supported_source_directory', function( bool $status, string $directory_name, string $server_path ): bool {
    $excluded_directories = [ 'my-directory' ];
    if ( in_array( $directory_name, $excluded_directories ) ) {
        return false;
    }
    return $status;
}, 10, 3 );

Para excluir arquivos selecionados, use o seguinte filtro (neste caso com o sufixo “-skipwebp” em um nome de arquivo, por exemplo, image-skipwebp.png):

add_filter( 'webpc_supported_source_file', function( bool $status, string $file_name, string $server_path ): bool {
    $excluded_suffix = '-skipwebp';
    if ( strpos( $file_name, $excluded_suffix . '.' ) !== false ) {
        return false;
    }
    return $status;
}, 10, 3 );

O argumento $server_path é o caminho absoluto do servidor para um diretório ou arquivo. Dentro dos filtros, você pode aplicar regras mais complicadas conforme necessário.

Os filtros são executados antes que as imagens sejam convertidas – elas não suportam mais as imagens convertidas. Você deve excluí-las manualmente se elas não devem ser convertidas.

Suporte para diretórios personalizados

O plugin suporta os seguintes diretórios por padrão:
– /gallery
– /plugins
– /themes
– /uploads

Se você deseja adicionar suporte para um diretório personalizado, adicione o seguinte código ao arquivo functions.php no diretório do seu tema (use um nome de diretório correto em vez de custom-directory):

add_filter( 'webpc_source_directories', function ( $directories ) {
    $directories[] = 'custom-directory';
    return $directories;
} );

Lembre-se que este diretório deve estar localizado no diretório /wp-content.

Como executar a conversão manualmente?

Por padrão, todas as imagens são convertidas quando você clica no botão Iniciar otimização em massa. Além disso, a conversão é automática quando você adiciona novos arquivos à sua Biblioteca de mídia.

Lembre-se que nosso plugin leva em consideração as imagens geradas pelo WordPress. Existem muitos plugins que geram, por exemplo, imagens de tamanho diferente ou em versão diferente.

Se você gostaria de integrar com seu plugin, que gera imagens por conta própria, você pode fazê-lo. Nosso plugin oferece a possibilidade desse tipo de integração. Isso funciona para todas as imagens no diretório /wp-content.

É uma solução para usuários avançados. Se você deseja integrar com outro plugin, é melhor entrar em contato com o autor desse plugin e fornecer a ele informações sobre as ações disponíveis em nosso plugin. Isso ajudará você a encontrar uma solução mais rapidamente.

Você pode executar manualmente a conversão dos arquivos selecionados, pode usar a ação para a qual passará um array com uma lista de caminhos (eles devem ser caminhos absolutos do servidor):

do_action( 'webpc_convert_paths', $paths, true );

Um método alternativo é iniciar manualmente a conversão do anexo selecionado, passando o ID do post da Biblioteca de mídia. Lembre-se de executar esta ação após registrar todos os tamanhos de imagem (ou seja, após executar a função add_image_size):

do_action( 'webpc_convert_attachment', $post_id, true );

Para excluir arquivos convertidos manualmente, use a seguinte ação, fornecendo como argumento uma matriz de caminhos de servidor absolutos para os arquivos (isso excluirá os arquivos convertidos manualmente):

do_action( 'webpc_delete_paths', $paths );

Suporte para WP-CLI

O plugin suporta WP-CLI, que permite uma conversão de imagem mais rápida no nível do servidor. Mais informações sobre como começar a usar o WP-CLI podem ser encontradas no Manual. Os comandos suportados são descritos abaixo.

Verificando quantas imagens máximas para conversão existem no site:

wp converter-for-media calculate

Convertendo todas as imagens:

wp converter-for-media regenerate

Convertendo todas as imagens (com a opção “Forçar a conversão de todas as imagens novamente”):

wp converter-for-media regenerate --force

O plugin suporta CDN?

Os arquivos do site (arquivos WordPress) e as imagens da Biblioteca de mídia devem estar no mesmo servidor. Se estiverem, tudo deve funcionar bem.

Se apenas suas imagens estiverem em outro servidor CDN, infelizmente a operação correta é impossível, porque essas imagens são gerenciadas por outro servidor.

Lista atual de servidores CDN suportados:
– BunnyCDN (consulte as instruções antes de usar)