Resolved EWWW Image Optimizer, WebP format, nginx and Plesk

[Tomek]

I want to use EWWW Image Optimizer to convert all graphics to WebP format on my wordpress websites.

Refer to the EWWW documentation (EWWW IO and WebP Images - EWWW I.O. Documentation), I have to do these things:

First, we need to add a map directive to your global config, usually /etc/nginx/nginx.conf:

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

next

Modify the mime.types file (also in /etc/nginx/) to tell Nginx about this new file type. Look for this line, and add it if you can't find it:

image/webp webp;

and then

The last change is to setup a location block within your server block to handle PNG and JPG images that might have WebP versions. If you only have one server block, it is usually located in /etc/nginx/sites-enabled/default. Add this within the server {} section:

location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}

Is it safe? Do automatic updates from Plesk do not overwrite these settings?

 

[IgorG]

As far I remember, to get WebP you preferred to use Google pagespeed module instead of EWWW Image Optimizer - #12. Why did you abandon this idea now?

 

[Tomek]

Hi Igor,

yes, I prefer Google pagespeed module instead of EWWW Image Optimizer and it was my first choice.
However, to do this, I need to compile nginx with additional modules according to the great UFHH01 instruction:
Contribution - How to compile NGINX with additional modules ( pagespeed / cache_purge / headers-more / and others.

For my websites only, this solution is ok. But I can't host the clients sites on the not official and unsupported nginx installation.

Then I tried to use the PageSpeed Insights extension, which supports the PageSpeed Apache Module.
But to make it work, I had to disable the serving of static files by nginx.
Apache without nginx is too slow. In my tests the apache response time is 0.56 seconds, when for nginx it is less than 0.2 seconds.

If I want to stay with Plesk, the only option for me is unfortunately EWWW Image Optimizer.

 

[IgorG]

Please tell me, does the default settings for WebP in EWWW Image Optimizer not work? I do not understand why you need to set something up in nginx additionally? Have you tried to enable EWWW Image Optimizer settings for WebP?

 

[Tomek]

Yes, I tried.

I turned on WebP conversion in settings (screenshot 1),

I added the necessary rules to the .htaccess file (screenshot 2),

images in webp format have been generated (screenshot 3).

And it does not work.

Website where I test it: Kamerzysta Bochnia | tel. 660 325 429 - Wideofilmowanie i Fotografowanie Małopolska

I have disabled all plugins (except EWWW Image Optimizer)
and clodflare to see if there is any conflict, but that did not help.

Edit.
I have enabled "Smart static files processing Serve" without "static files directly by nginx". But even disabled "Smart static files processing " did not help.

 

[dyrer]

I am up on a similar problem I want to add this code

location ~* \.(txt|xml|js)$ {
    expires 8d;
}

location ~* \.(css)$ {
    expires 8d;
}

location ~* \.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|svg)$ {
    expires 8d;
}

location ~* \.(jpg|jpeg|png|gif|swf|webp)$ {
    expires 8d;
}

Where should I put it?
I have enabled Serve static files directly by nginx
and applied
Image 2017-11-18 at 12.11.04 PM.png

 

[IgorG]

Where should I put it?

To /etc/nginx/nginx.conf

 

[dyrer]

It wont break in future Plesk upgrades?

 

[Tomek]

follow up

 

[Tomek]

?

 

[virtubox]

Yes, I tried.

I turned on WebP conversion in settings (screenshot 1),

I added the necessary rules to the .htaccess file (screenshot 2),

images in webp format have been generated (screenshot 3).

And it does not work.

Website where I test it: Kamerzysta Bochnia | tel. 660 325 429 - Wideofilmowanie i Fotografowanie Małopolska

I have disabled all plugins (except EWWW Image Optimizer)
and clodflare to see if there is any conflict, but that did not help.

Edit.
I have enabled "Smart static files processing Serve" without "static files directly by nginx". But even disabled "Smart static files processing " did not help.

With EWWW, you should not need to edit the .htaccess. Just click on "Insert rewrite rules" and that's it.
Then check with your browser developers tools and you should see webp images :

But do not enable "static files directly by nginx " because in this case, you .htaccess will not be used to process static files.

Then the last step is to add the directive to allow browser cache for webp in "additional nginx directives " :

# Cache static files
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|webp)$ {
  add_header "Access-Control-Allow-Origin" "*";
  access_log off;
  log_not_found off;
  expires max;
}

 

[Tomek]

With EWWW, you should not need to edit the .htaccess. Just click on "Insert rewrite rules" and that's it.
Then check with your browser developers tools and you should see webp images :

But do not enable "static files directly by nginx " because in this case, you .htaccess will not be used to process static files.

Then the last step is to add the directive to allow browser cache for webp in "additional nginx directives " :

# Cache static files
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|webp)$ {
  add_header "Access-Control-Allow-Origin" "*";
  access_log off;
  log_not_found off;
  expires max;
}

thanks for the reply

I tried this way also, but it does not work for me.

 

[virtubox]

thanks for the reply

I tried this way also, but it does not work for me.

You can also use the map directive with nginx to serve webp images conditionally if web browser support them.

add the line in /etc/nginx/mime.types :

“image/webp webp”

Then create a file webp.conf in /etc/nginx/conf.d/ with the following content :

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

Then in your additionals nginx directives add :

location ~* ^/wp-content/.+\.(png|jpg)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

There is a pretty good documentation about webp usage with nginx : Recipe: serve WebP with nginx conditionally · uhop/grunt-tight-sprite Wiki · GitHub

 

[virtubox]

thanks for the reply

I tried this way also, but it does not work for me.

It probably require to add webp extension in the list of static files processed by Nginx, then to add the previous configuration. I will try each configuration and keep you update.

 

[trialotto]

@virtubox and @Tomek,

In the post of @virtubox there is a typo, the map block should be

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

otherwise the rule

try_files $uri$webp_suffix $uri =404;

won't know what to do with the variable $webp_suffix declared in that line.

Regards.........

 

[coscyris]

was this wortking for anyone?
i tried the following under obsidian 18.0.27:

1. add the line in /etc/nginx/mime.types
“image/webp webp”

2. create a file webp.conf in /etc/nginx/conf.d/ with the following content :
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}

3.in your additionals nginx directives add :
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}

4. entered rewrite rules in ewww

not working for me, ewww still shows a red png instead of a green webp image


Any suggestions would be highly appreciated.

Thanks in advance

 

[virtubox]

was this wortking for anyone?
i tried the following under obsidian 18.0.27:

1. add the line in /etc/nginx/mime.types
“image/webp webp”

2. create a file webp.conf in /etc/nginx/conf.d/ with the following content :
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}

3.in your additionals nginx directives add :
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}

4. entered rewrite rules in ewww

not working for me, ewww still shows a red png instead of a green webp image


Any suggestions would be highly appreciated.

Thanks in advance

Hello @coscyris,
You can try this configuration for the step 3 :

# webp rewrite rules for jpg and png images
# try to load alternative image.png.webp before image.png
location /wp-content/uploads {
    location ~ \.(png|jpe?g)$ {
        add_header Vary "Accept-Encoding";
        access_log off;
        log_not_found off;
        expires max;
        try_files $uri$webp_suffix $uri =404;
    }
}

# webp rewrite rules for EWWW testing image
location /wp-content/plugins/ewww-image-optimizer/images {
    location ~ \.(png|jpe?g)$ {
        add_header Vary "Accept-Encoding";
        access_log off;
        log_not_found off;
        expires max;
        try_files $uri$webp_suffix $uri =404;
    }
}

 

[coscyris]

works like a charm!
thanks a million!

 

[Shoka]

web images convert .png or other to.webp Can this be make in plesk?