Mod_Pagespeed WordPress Uploaded WebP image not optimize and serving

[Chathu07]

Hi all,

I have WordPress sites running Ubuntu 20.04, Nginx setup. This server Nginx is configured to serve webP images as a default image format. (Moreover, now WordPress 5.8 officially supports webP images).

Therefore I have disabled mod_pagespeed webP image conversion. Right now, I convert images using the EWWW image optimizer (link ). Therefore my "/wp-content/upload/" has webP images and JPG.

If I enabled the following filters, mod_pagespeed still applies these filters to PNG and JPG files, not the webP.

pagespeed EnableFilters insert_image_dimensions, resize_rendered_image_dimensions,sprite_image,resize_mobile_images;

How do I configure mod_pagespeed to apply the above filters to WebP images?

[Lofesa]

How the webp images are loaded? if these images are loaded by javascript, then pagespeed anly do some optimization by IPRO, and IPRO don´t allow all the filters, only some.

[Chathu07]

Hi Lofesa,

Thank you for your reply.

I have added image/webp webp; to mime.types file.

Then in the HTTP block, I added this one.

http{

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

}

Then sites-available directory each .conf file (inside the server block) I added the following code.

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

[Lofesa]

Hi And the webp images are served?

In the map you have "~*webp" , the ~ tell us to make it case insensitive, "*" any string, webp the string "webp", but I´m not sure if this must be: "~*webp*" because the webp string in the accept header can be in the middle ( f.e. accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8 from chrome). In the try_files $uri$webp_suffix you are searching for some like https://yoursite.com/image.jpg.webp. Your webp files are called in this way?

For sure sprite_images don´t work with webp. From the docs : "The 'Sprite Images' filter detects GIF and PNG images used as backgrounds in CSS". This filter need rewrite_css enabled, but other filters may work, I never used webp images other than the converted by pagespeed.

But first you need to be sure webp images are served for you server, then enable pagespeed and take a look on whats happens.

[danielslyman]

I have the same issues, I also used EWWW and I would much prefer have my webp formats ready to go and not converted on the fly. However, regardless of which filter I use, PageSpeed seems to ignore the Nginx directive. Any tips on how to set an ignore/exclude rule for this?

[Lofesa]

What nginx directive is ignored?

[danielslyman]

  location ~* ^.+\.(png|jpe?g|gif)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
    add_header Access-Control-Allow-Origin "*";
    expires max;
    access_log off;
  }

essentially I have my webp images in the same directory as jpg images. It basically checks whether picture.jpg.webp is available, if so, it is server, if not it will server picture.jpg instead.

I already tried everything I can think of, even with:

pagespeed RewriteLevel PassThrough; pagespeed ForbidFilters rewrite_images; pagespeed ForbidFilters recompress_images;

somehow that Nginx directive is still ignored. Any tips? Thanks for taking the time!

in case this is relevant, this is in my /etc/nginx.conf:

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

[Lofesa]

So the issue is pagespeed still rewrite or recompress images? I think the rigth way is

pagespeed DisableFilters rewrite_images, recompress_images; pagespeed ForbidFilters rewrite_images, recompress_images;

As I understand the 1st statement disable the filters and the 2nd forbid the use of these filters in any other way, like url parameters or http headers.

Maybe the docs is a bit confussing in their redaction as far as you can read "To turn off specific filters and forbid ...."

But I can't understand why the problem comes here, with the RewriteLevel PassThrough only filters explicity enabled must work. If you have only pagespeed RewriteLevel PassThrough; and no others directives nothing must happend with the files.