WebP Converter for Media – WordPress plugin

Please always adding your thread, read all other questions in the FAQ of plugin and other threads in support forum first. Perhaps someone had a similar problem and it has been resolved.

When adding a thread, follow these steps and reply to each of them:

1. Do you have any error on the plugin settings page? If so, which one? Have you consulted your server administrator or developer? If not, please do it first.

2. URL of your website. If your site is not publicly available, add it to test environment.

3. Does your server meet the technical requirements described in the FAQ? Please send configuration of your server (link to it can be found on the settings page of plugin in the section “We are waiting for your message”) – please take a screenshot of the ENTIRE page and send it to me.

4. Do you use CDN? If so, please see the question “Does the plugin support CDN?” in plugin FAQ.

5. Check if in /wp-content/uploads-webpc directory are all files that should be converted.

If not, please enable WP_DEBUG_LOG in your wp-config.php (more about debugging: https://codex.wordpress.org/WP_DEBUG). That’s what you should have in this file:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Then follow these steps:

1. Go to administration panel and go to plugin settings page.
2. Run Google Chrome and enable Dev Tools (F12).
3. Go to the Network tab and select filtering for XHR (XHR and Fetch).
4. Click button Regenerate All on the plugin settings page (do not close the console during this time).
5. Go to Dev Tools and find request that is marked in red. Click on them and go to Preview tab.
6. Take screenshot of all information presented there.
7. Please check also if you have any errors in /wp-content/debug.log?

Send a screenshot from console if an error occurred while converting images. Of you have errors in /wp-content/debug.log send their?

6. If in the previous step it turned out that you have files, please do the test, which is described in the FAQ in question How to check if plugin works?. Please send a screenshot of Devtools with test results.

7. Content of your .htaccess files from directories /wp-content, /wp-content/uploads and /wp-content/uploads-webpc (pasting the code using the CODE shortcode in the editor).

8. Do you use any plugin filters or actions from this FAQ? If so, list them all.

9. What plugin version are you using? If it is not the latest then update and check everything again.

10. Used WordPress version.

11. A list of all the plugins you use. Have you tried checking the plugin operation by turning off all others and activating the default theme? If not, please try whenever possible. This is very important because other plugins or themes can cause problems. Therefore, we recommend disabling all necessary plugins and enabling the default theme.

Please remember to include the answers for all 11 questions by adding a thread. It is much easier and accelerate the solution of your problem.

If you have an error on the plugin settings screen, first of all please read it carefully. They are displayed when there is a problem with the configuration of your server or website.

The messages are designed to reduce the number of support requests that are repeated. It saves your and our time. If you have information in the message that you should contact the administrator of your server, please do so.

When contacting the administrator, give him all the information available in the message. If you still cannot solve the problem, please contact us.

We want to solve as many similar problems as possible automatically. This eliminates the need to wait for our response and you can try to solve the problem alone. This is very important for us.

You can get several types of errors when converting. First of all, carefully read their content. For the most part, you can solve this problem yourself. Try to do this or contact the server administrator.

If you get an error: File "%s" does not exist. Please check file path. means that the file_exists() function in PHP returned false using the file path given in the error message. Check this path and make sure it is correct.

If you get an error: File "%s" is unreadable. Please check file permissions. means that the is_readable() function in PHP returned false using the file path given in the error message. Check the permissions for the file and the directory in which the file is located.

If you get an error: "%s" is not a valid image file. means that the file is damaged in some way. Download the file to disk, save it again using any graphics program and add again to the page. If the error applies to individual images then you can ignore it – just the original images will load, not WebP.

In the case of the above problems, contacting the support forum will be useless. Unfortunately, we are unable to help you if your files are damaged. You have to fix it yourself. If you have previously used other tools that changed the original files and damaged them, you will do nothing more.

Remember that it happens that other plugins can cause problems with accessing files or the REST API. Please try to disable all other plugins and set the default theme to make sure that it is not one of them that causes these types of problems.

Practically every hosting meets these requirements. You must use PHP at least 7.0 and have the GD or Imagick extension installed. The extension must support WebP format. If you have an error saying that the GD or Imagick library are not installed, but you have it installed then they are probably incorrectly configured and do not have WebP support.

They are required native PHP extensions, used among others by WordPress to generate thumbnails. Your server must also have the modules mod_mime, mod_rewrite and mod_expires enabled.

An example of the correct server configuration can be found here. Link to your current configuration can be found in the administration panel, on the management plugin page in the section “We are waiting for your message” (or using the URL path: /wp-admin/options-general.php?page=webpc_admin_page&action=server).

Note the items marked in red. If the values marked in red do not appear in your case, it means that your server does not meet the technical requirements. Pay attention to the WebP Support value for the GD library and WEBP in the list of supported extensions for the Imagick library.

In a situation where your server does not meet the technical requirements, please contact your server Administrator. We are not able to help you. Please do not contact us about this matter, because this is a server configuration problem, not a plugin.

Also REST API must be enabled and work without additional restrictions. If you have a problem with it, please contact the Developer who created your website. He should easily find the issue with the REST API not working.

The size of the image is a limited. Its resolution cannot be bigger than 8192 x 8192px. This is due to the limitations of the PHP library.

Please remember that Safari and Internet Explorer do not support the WebP format. Therefore, using these browsers you will receive original images.

You can find more about WebP support by browsers here.

The plugin uses rules in the .htaccess file to redirect from the original image to an image in WebP format. Verifies whether the WebP file exists and whether your browser supports the WebP format. It does this every time you try to load an image.

When you enter from a WebP supporting device, it will redirect. However, when someone uses a browser that does not support WebP, the redirection will not work and you get the original file.

However, if you see corrupted images on browsers that do not support WebP, it means that your server uses cache for rewrites from the .htaccess file. Then the plugin will not work properly because the server instead of reading the rules from the .htaccess file every time uses its cache and does the redirection automatically.

How can you check it? When you turn off the plugin, the rewrites from the .htaccess file are removed, which means you should see the original images on every browser. If this is not the case and you see forced redirects to WebP files, it means that your server remembers the redirects you made earlier and uses cache.

In this situation, please contact your server administrator. Each configuration is different. It can be e.g. module mod_pagespeed or other similar. This functionality must be turned off so that the server reads and executes the rules from the .htaccess file each time the images are loaded. This cannot be ignored because it will cause problems.

After installing the plugin, you should convert all existing images.

In the WordPress admin panel, on the Settings -> WebP Converter subpage there is a module that allows you to process all your images.

It uses the WordPress REST API by downloading addresses of all images and converting all files gradually.

This process may take few or more than ten minutes depending on the number of files.

It should be done once after installing the plugin. New images from the Media Library will be converted automatically. For other images, e.g. from the /themes directory, you must start manual conversion after adding new images.

When you have installed plugin and converted all images, follow these steps:

1. Run Google Chrome and enable Dev Tools (F12).
2. Go to the Network tab and select filtering for Img (Images).
3. Refresh your website page.
4. Check list of loaded images. Note Type column.
5. If value of webp is there, then everything works fine.
6. Remember that this plugin does not change URLs. This means that e.g. link will have path to .jpg file, but .jpg.webp file will be loaded instead of original .jpg.
7. In addition, you can check weight of website before and after using plugin. The difference will be huge!
8. More information: here

Please remember that URLs will remain unchanged. When you open the image in a new tab or look at its URL, you’ll see the original URL. When you try to save the image to disk (e.g. by clicking Save as…) the original image will be saved.

WebP is only used when loading a image on a website. This is done by the rules from the .htaccess file, on the server side, without the visible URL change to the image. Yes, it can be called magic 🙂

That is why the plugin should be tested in Dev Tools. If the Type of file is WebP, then everything is working properly. You can also turn off the plugin for a moment and check the weight of your website, then turn it on and test again. The difference should be visible.

The operation of the plugin for non-advanced users may sometimes be less understood, but everything is fine. Thanks to this, regardless of whether your browser supports WebP or not, everything works without problems.

Only images from the /uploads directory are automatically converted. If you use other plugins that also save images in the /uploads directory then this may not work. Therefore, check the plugin settings and try converting all images again.

If the converted image in WebP format is larger than the original, the browser will use the original file. This converted file will be deleted. Therefore, you can also see files other than WebP on the list. When this happens, you will receive information in debug.log.

If you want to force the use of WebP files, uncheck the Automatic removal of WebP files larger than original option in the plugin settings. Then click on the Regenerate All button to convert all images again.

Remember that this plugin supports images from the /wp-content directory, e.g. files downloaded from the Media Library. Redirections will not work if your images are downloaded from another domain, i.e. from an external service.

When checking the operation of the plugin, e.g. in Dev Tools, pay attention to the path from which the files are downloaded and which directories you have enabled in the settings of plugin.

All WebP images are stored in the /wp-content/uploads-webpc/ directory. Inside the directory there is the same structure as in the original /wp-content directory. The files have original extensions in the name along with the new .webp.

In case the location of the original file is as follows: /wp-content/uploads/2019/06/example.jpg then its converted version will be in the following location: /wp-content/uploads-webpc/uploads/2019/06/example.jpg.webp.

In case the location of the original file is as follows: /wp-content/themes/my-theme/public/img/example.jpg then its converted version will be in the following location: /wp-content/uploads-webpc/themes/my-theme/public/img/example.jpg.webp.

Original images are not changed. If you remove plugins, only WebP files will be deleted. Your images are not changed in any way.

This is possible using the following types of filters to change default paths. It is a solution for advanced users. If you are not, please skip this question.

Path to the root installation directory of WordPress (ABSPATH by default):

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

Path to /uploads directory (relative to the root directory):

add_filter('webpc_uploads_path', function($path) {
  return 'wp-content/uploads';
});

Directory path with converted WebP files (relative to the root directory):

add_filter('webpc_uploads_webp', function($path) {
  return 'wp-content/uploads-webpc';
});

Note that the /uploads-webpc directory must be at the same nesting level as the /uploads, /plugins and /themes directories.

Prefix in URL of /wp-content/ directory or equivalent (used in .htaccess):

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

For the following sample custom WordPress structure:

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

Use the following filters:

add_filter('webpc_uploads_root', function($path) {
  return 'C:/WAMP/www/project/webp'; // your valid path
});
add_filter('webpc_uploads_path', function($path) {
  return 'app/uploads';
});
add_filter('webpc_uploads_webp', function($path) {
  return 'app/uploads-webpc';
});
add_filter('webpc_uploads_prefix', function($prefix) {
  return '/';
});

After setting the filters go to Settings -> WebP Converter in the admin panel and click the Save Changes button. .htaccess files with appropriate rules should be created in the directories /uploads and /uploads-webpc.

By default, all images are converted when you click on the Regenerate All button. In addition, conversion is automatic when you add new files to your Media Library.

Remember that our plugin takes into account images generated by WordPress. There are many plugins that generate, for example, images of a different size or in a different version.

If you would like to integrate with your plugin, which generates images by yourself, you can do it. Our plugin provides the possibility of this type of integration. This works for all images in the /wp-content directory.

It is a solution for advanced users. If you would like to integrate with another plugin, it’s best to contact the author of that plugin and give him information about the actions available in our plugin. This will help you find a solution faster.

You can automatically run the option to regenerate all new images. This is useful when you use external plugins that generate images themselves. To do this, use the following code:

do_action('webpc_regenerate_all', $paths);

Below is an example of how to use this action to automatically regenerate images after changing the theme:

add_action('init', function()
{
  do_action('webpc_regenerate_all');
});

To manually start converting selected files, you can use the action to which you will pass an array with a list of paths (they must be absolute server paths):

do_action('webpc_convert_paths', $paths);

An alternative method is to manually start converting the selected attachment by passing the post ID from the Media Library. Remember to run this action after registering all image sizes (i.e. after running the add_image_size function):

do_action('webpc_convert_attachment', $postId);

In addition, you can edit the list of files that will be converted. For example, to add some to the exceptions. To do this, use the following filter, which by default returns a list of all paths:

add_filter('webpc_attachment_paths', function($paths, $attachmentId) {
  return $paths;
}, 10, 2);

Argument $paths is array of absolute server paths and $attachmentId is the post ID of attachment, added to the Media Library.

To delete manually converted files, use the following action, providing as an argument an array of absolute server paths to the files (this will delete manually converted files):

do_action('webpc_delete_paths', $paths);

Manually editing the rules in the .htaccess file is a task only for experienced developers. Remember that the wrong rules can cause your website to stop working.

Below is a list of filters that allow you to modify all rules. Remember that it’s best to use your own rule set rather than edit parts of exists. This will ensure greater failure-free after plugin update.

Returning an empty string will delete these rules the next time you save the plugin settings. You must do this after each filter edit.

Rules for redirects: (returns rules for mod_rewrite module):

add_filter('webpc_htaccess_mod_rewrite', function($rules, $path) {
  return '';
}, 10, 2);

Argument $path is absolute server path for .htaccess file (/wp-content/.htaccess or /wp-content/uploads/.htaccess).

Rules for image/webp MIME type: (returns rules for mod_mime module):

add_filter('webpc_htaccess_mod_mime', function($rules) {
  return '';
});

Rules for Browser Caching: (returns rules for mod_expires module):

add_filter('webpc_htaccess_mod_expires', function($rules) {
  return '';
});

All rules from the files /wp-content/.htaccess, /wp-content/uploads/.htaccess and /wp-content/uploads-webpc/.htaccess: (returns rules for modules: mod_rewrite, mod_mime and mod_expires):

add_filter('webpc_htaccess_rules', function($rules, $path) {
  return '';
}, 10, 2);

Argument $path is absolute server path for .htaccess file.

This option allows you to speed up page loading time for returning users because they do not need to re-download files from the server. The plugin allows this by using the module mod_expires.

It is enabled by default. If you do not want to use this functionality, you can turn it off at any time.

Unfortunately not. This is due to the logic of the plugin’s operation. Plugins that enable integration with the CDN servers modify the HTML of the website, changing URLs for media files. This plugin does not modify URLs. Replacing URLs in the HTML code is not an optimal solution.

The main problem when changing URLs is cache. When we modify the image URL for WebP supporting browser, then use the browser without WebP support, it will still have the URL address of an image in .webp format, because it will be in the cache.

While in the case of the img tag you can solve this problem, in the case of background-image it is possible. We wanted full support so that all images would be supported – no matter how they are displayed on the website.

Therefore in this plugin for browsers supporting the WebP format, only the source of the file is replaced by using the mod_rewrite module on the server. The URL for image remains the same. This solves the whole problem, but it is impossible to do when the files are stored on the CDN server.

If you are using a CDN server, find one that automatically converts images to WebP format and properly sends the correct image format to the browser.

Please edit the configuration file:

/etc/nginx/mime.types

and add this code:

types {
  # ...

  image/webp webp;
}

Then please find your configuration file in the path (default is default file):

/etc/nginx/sites-available/

and add below code in this file:

server {
  # ...

  location ~ /wp-content/(?<path>.+).(?<ext>jpe?g|png|gif)$ {
    if ($http_accept !~* "image/webp") {
      break;
    }
    add_header Vary Accept;
    expires 365d;
    try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
  }
}

Yes, with one exception. In this mode it is not possible to automatically generate the contents of .htaccess files.

Please manually paste the following code at the beginning of .htaccess file in the /wp-content directory:

# BEGIN WebP Converter
# ! --- DO NOT EDIT PREVIOUS LINE --- !
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.jpg.webp -f
  RewriteRule (.+).jpg$ /wp-content/uploads-webpc/$1.jpg.webp [NC,T=image/webp,E=cache-control:private,L]
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.jpeg.webp -f
  RewriteRule (.+).jpeg$ /wp-content/uploads-webpc/$1.jpeg.webp [NC,T=image/webp,E=cache-control:private,Lp]
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.png.webp -f
  RewriteRule (.+).png$ /wp-content/uploads-webpc/$1.png.webp [NC,T=image/webp,E=cache-control:private,L]
</IfModule>
# ! --- DO NOT EDIT NEXT LINE --- !
# END WebP Converter

And the following code at the beginning of .htaccess file in the /wp-content/uploads-webpc directory:

# BEGIN WebP Converter
# ! --- DO NOT EDIT PREVIOUS LINE --- !
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
</IfModule>
# ! --- DO NOT EDIT NEXT LINE --- !
# END WebP Converter

Yes. The plugin is completely free.

However, working on plugins and technical support requires many hours of work. If you want to appreciate it, you can provide us a coffee. Thanks everyone!

Thank you for all the ratings and reviews.

If you are satisfied with this plugin, please recommend it to your friends. Every new person using our plugin is valuable to us.

This is all very important to us and allows us to do even better things for you!