Webp Support in Easyengine V4

[Prateek-Mishra]

I want to serve Webp images to my visitors.

I have installed WebP Converter for Media plugin to convert all my media library to Webp.

As for the Configuration part, I need to add the following code to the Nginx config file.

map $http_accept $load_avif {
    ~image/avif "/wp-content/uploads-webpc/$path.$ext.avif";
}
map $http_accept $load_webp {
    ~image/webp "/wp-content/uploads-webpc/$path.$ext.webp";
}

server {
    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        add_header Vary Accept;
        add_header Cache-Control "private" always;
        expires 365d;
        try_files $load_avif $load_webp $uri =404;
    }
    # ...
}

I added the code inside a Webp.conf file which I placed inside the sitecom_config_nginx/_data/custom/

When trying to restart Nginx I got map directive is not allowed here error.

How can I make this work?

I'm on the latest version of EE which is v4.5.3

[uebmaster]

I have the same problem with smush pro plugin, i don't know why that directives are not allowed in user.conf file, althought i am adding the code in .../sitename/config/nginx/custom/user.conf (that's the right place for custom configs).

The only way I got smush to recognize that I added the rules to nginx was by adding the rules to the server block of the main.conf file (.../sitename/config/nginx/conf.d/main.conf)

I added it right after they declared the favicon location

after that i restarted the site and smush recognized that the rules had been added,
The site still didn't show the webp images, so what I did was add a map to the main nginx configuration file (.../sitename/config/nginx.conf) and that worked

Below, I show you part of the files:

/opt/easyengine/sites/SITENAME/config/nginx/conf.d/main.conf

`

Add your custom config in custom/user.conf

ALL CHANGES IN THIS FILE WILL BE LOST AFTER EasyEngine Update

upstream php {
server SITENAME_php:9000;
}

upstream redis {
server global-redis:6379;
keepalive 10;
}

server {
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

    root /var/www/htdocs;

    server_name SITENAME.COM;

    index index.php index.html index.htm;

    # Redis NGINX CONFIGURATION
    set $skip 0;
    # POST requests and URL with a query string should always go to php
    if ($request_method = POST) {
            set $skip 1;
    }
    if ($query_string != "") {
            set $skip 1;
    }
    # Don't cache URL containing the following segments
    if ($request_uri ~* "(/ee-admin/|/wp-admin/|/xmlrpc.php|wp-.*.php|index.php|/feed/|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
            set $skip 1;
    }
    # Don't use the cache for logged in users or recent commenter or customer with items in cart
    if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in|woocommerce_items_in_cart") {
            set $skip 1;
    }
    # Use cached or actual file if they exists, Otherwise pass request to WordPress
    location / {
            try_files $uri $uri/ /index.php?$args;
    }

    location /redis-fetch {
            internal  ;
            set  $redis_key $args;
            redis_pass  redis;
    }

#OTHERS CONFIGS

    # NGINX CONFIGURATION FOR COMMON LOCATION
    # Basic locations files
    location = /favicon.ico {
            access_log off;
            log_not_found off;
            expires max;
    }


   # BEGIN SMUSH-WEBP
    location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {
        add_header Vary Accept;
        set $image_path $2;
        if (-f "/opt/easyengine/sites/**SITENAME**/app/htdocs/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

#OTHERS CONFIGS
`

/opt/easyengine/sites/SITENAME/config/nginx/nginx.conf

`
user www-data;
worker_processes auto;
worker_rlimit_nofile 100000;
pid /run/nginx.pid;

events {
worker_connections 10240;
multi_accept on;
}

http {
##
# EasyEngine Settings
##

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 30;
types_hash_max_size 2048;

server_tokens off;
reset_timedout_connection on;

# Limit Request
limit_req_status 403;
limit_req_zone $binary_remote_addr zone=one:10m rate=1r/s;

# Proxy Settings
set_real_ip_from      0.0.0.0/0;
real_ip_header  X-Forwarded-For;

client_max_body_size 100m;

#OTHERS CONFIGS

##
# Conditional variables
##

map $http_accept $webp_suffix {
default   "";
"~*webp"  ".webp";
}


##
# Openfile Cache
##

#OTHERS CONFIGS
`

After this the webp images works.

Anyway, i think this configs must be in user.conf, cause when you upgrade EE this configs will be deleted and you need to do it again and again.

I hope this help you.

NOTE: search for SITENAME in the text cause it must be the name of your sitename, althought i think that the only place where you need to write it manually is in the rules for nginx.conf

PS: I wrote "i have" at beggining cause I just made it work while writing my progress on the spot lol xD