WordPress + WebP (WP Smush & Converter for Media – Optimize images | Convert WebP & AVIF)

[kombajnik]

Hello, i have smush pro plugin.
I want to enable webp support to speed up my website more (im using this too viewtopic.php?t=717 thx!)

At step 1 i need to select my webserver nginx or apache (what should i set?)
Then i choose apache then i have options automatic install or manual install, if i choose automatic then get error:

We tried different rules but your server still isn't serving WebP images. Please contact your hosting provider for further assistance. You can also see our troubleshooting guide or contact support for help.

When i choose manually install then i have something like this:

Copy the generated code below and paste it at the top of your .htaccess file (before any existing code) in the root directory.

# BEGIN SMUSH-WEBP
<IfModule mod_rewrite.c>

RewriteEngine On

RewriteCond %{DOCUMENT_ROOT}/wp-content/smush-webp/disable_smush_webp !-f

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/wp-content/smush-webp/$1.webp -f

RewriteRule wp-content/uploads/(.*\.(?:png|jpe?g))$ wp-content/smush-webp/$1.webp [NC,T=image/webp]
</IfModule>



<IfModule mod_headers.c>

Header append Vary Accept env=WEBP_image

</IfModule>



<IfModule mod_mime.c>

AddType image/webp .webp

</IfModule>
# END SMUSH-WEBP

Next, click Check Status button below to see if it's working.

Troubleshooting

If .htaccess does not work, and you have access to vhosts.conf or httpd.conf, try this:

Look for your site in the file and find the line that starts with <Directory> - add the code above that line and into that section and save the file.
Reload Apache.
If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.

Still having trouble? Get Support.

When i put this code in /home/user/web/mywebsite.com/publuc_html and .htaccess i get info

The server rules have been applied but the server doesn't seem to be serving your images as WebP. We recommend contacting your hosting provider to learn more about the cause of this issue.

when at first step i choose nginx they told me to put

# BEGIN SMUSH-WEBP
location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {

add_header Vary Accept;

set $image_path $2;

if (-f "/home/USER/web/domain.com/public_html/wp-content/smush-webp/disable_smush_webp") {

break;

}

if ($http_accept !~* "webp") {

break;

}

expires max;

try_files /wp-content/smush-webp/$image_path.webp $uri =404;

}
# END SMUSH-WEBP

in server configuration so i adding this in server section in /home/user/conf/web/domain.com.nginx.conf and reload nginx then dont smush dont detect this change

is any possibility to enable webp on wordpress? thx

[isscbta]

To ensure proper functionality, follow these steps to copy and edit the template in the specified directory:

In your SSH, as root, run:

Code: Select all

cd /usr/local/vesta/data/templates/web/nginx/

Copy, for example, the force-https.stpl and force-https.tpl files using the following commands:

Code: Select all

cp force-https.stpl force-https-webp.stpl
cp force-https.tpl force-https-webp.tpl

Edit the force-https-webp.stpl file using a text editor of your choice. Make the necessary changes according to the documentation or your requirements (add that block mentioned earlier):

Code: Select all

# BEGIN SMUSH-WEBP
location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {
add_header Vary Accept;
set $image_path $2;
if (-f "/home/USER/web/domain.com/public_html/wp-content/smush-webp/disable_smush_webp") {
break;
}
if ($http_accept !~* "webp") {
break;
}
expires max;
try_files /wp-content/smush-webp/$image_path.webp $uri =404;
}
# END SMUSH-WEBP

Execute the command to test the Nginx configuration:

Code: Select all

nginx -t

If the configuration test is successful, reload the Nginx service using the following command:

Code: Select all

service nginx reload

Open your myVesta hosting panel.
Locate and navigate to the section or settings for editing the Proxy Template for the desired domain.
Choose the newly created template, force-https-webp, from the available options.

By following these steps, you should be able to correctly copy and edit the template, configure Nginx, and update the Proxy Template for your domain in myVesta hosting panel.

[kombajnik]

To ensure proper functionality, follow these steps to copy and edit the template in the specified directory:

In your SSH, as root, run:

Code: Select all

cd /usr/local/vesta/data/templates/web/nginx/

Copy, for example, the force-https.stpl and force-https.tpl files using the following commands:

Code: Select all

cp force-https.stpl force-https-webp.stpl
cp force-https.tpl force-https-webp.tpl

Edit the force-https-webp.stpl file using a text editor of your choice. Make the necessary changes according to the documentation or your requirements (add that block mentioned earlier):

Code: Select all

# BEGIN SMUSH-WEBP
location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {
add_header Vary Accept;
set $image_path $2;
if (-f "/home/USER/web/domain.com/public_html/wp-content/smush-webp/disable_smush_webp") {
break;
}
if ($http_accept !~* "webp") {
break;
}
expires max;
try_files /wp-content/smush-webp/$image_path.webp $uri =404;
}
# END SMUSH-WEBP

Execute the command to test the Nginx configuration:

Code: Select all

nginx -t

If the configuration test is successful, reload the Nginx service using the following command:

Code: Select all

service nginx reload

Open your myVesta hosting panel.
Locate and navigate to the section or settings for editing the Proxy Template for the desired domain.
Choose the newly created template, force-https-webp, from the available options.

By following these steps, you should be able to correctly copy and edit the template, configure Nginx, and update the Proxy Template for your domain in myVesta hosting panel.

I made this based on wprocket-hosting template
now have this in plugin

"The server rules have been applied but the server doesn't seem to be serving your images as WebP. We recommend contacting your hosting provider to learn more about the cause of this issue."

[isscbta]

The issue likely lies within the smush-related block itself. Here is an example configuration of the WebP block added to the force-https.stpl template for the "Converter for Media – Optimize images | Convert WebP & AVIF" plugin, which we have thoroughly tested:

Code: Select all

server {
    listen      %ip%:%proxy_ssl_port% ssl http2;
    server_name %domain_idn% %alias_idn%;
    # #ssl_on;
    ssl_certificate      %ssl_pem%;
    ssl_certificate_key  %ssl_key%;
    error_log  /var/log/%web_system%/domains/%domain%.error.log error;

    location / {
        proxy_pass      https://%ip%:%web_ssl_port%;
        location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
            root           %docroot%;
            if ($http_accept !~* "image/webp") {
                break;
            }
            add_header Vary Accept;
            expires 365d;
            try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
        }
        location ~* ^.+\.(%proxy_extentions%)$ {
            root           %sdocroot%;
            access_log     /var/log/%web_system%/domains/%domain%.log combined;
            access_log     /var/log/%web_system%/domains/%domain%.bytes bytes;
            expires        max;
            # try_files      $uri @fallback;
        }
    }

    location /error/ {
        alias   %home%/%user%/web/%domain%/document_errors/;
    }

    location @fallback {
        proxy_pass      https://%ip%:%web_ssl_port%;
    }

    location ~ /\.ht    {return 404;}
    location ~ /\.svn/  {return 404;}
    location ~ /\.git/  {return 404;}
    location ~ /\.hg/   {return 404;}
    location ~ /\.bzr/  {return 404;}

    disable_symlinks if_not_owner from=%docroot%;

    include %home%/%user%/conf/web/*nginx.%domain_idn%.conf_letsencrypt;
    include %home%/%user%/conf/web/s%proxy_system%.%domain%.conf*;
}
root@butterfly:/usr/local/vesta/data/templates/web/nginx# cat webp-force-https.tpl
server {
    listen      %ip%:%proxy_port%;
    server_name %domain_idn% %alias_idn%;
    location / {
        rewrite ^(.*) https://%domain_idn%$1 permanent;
    }
include %home%/%user%/conf/web/*nginx.%domain_idn%.conf_letsencrypt;
}

Below is the corresponding .tpl file containing the appropriate content:

Code: Select all

server {
    listen      %ip%:%proxy_port%;
    server_name %domain_idn% %alias_idn%;
    location / {
        rewrite ^(.*) https://%domain_idn%$1 permanent;
    }
include %home%/%user%/conf/web/*nginx.%domain_idn%.conf_letsencrypt;
}

Ensure that you have correctly added the appropriate user and domain in the smush block:

Code: Select all

if (-f "/home/USER/web/domain.com/public_html/wp-content/smush-webp/disable_smush_webp")

[kombajnik]

Thx! Working on this plugin which u told

[kombajnik]

Hmm not 100% working xD

idk why some of images loading via webp (background images) but for example other images are load normal as png with initiator webpc-passtrhu.php ?

[isscbta]

When converted to webp, not all images are smaller, so this plugin preserves those in their original format. It is a question that should be directed to the plugin creator rather than to us - since the server parses webp, everything is fine when it comes to the server-side.

[spoidyjan]

Hello,
If WebP isn't working well, you can also make images smaller to speed up your website. You can try Online Image Compressor tool to reduce file size without losing quality.