WebP Converter for Media

Descripcion

Speed up your website by serving WebP images. By replacing files in standard JPEG, PNG and GIF formats with WebP format, you can save over a half of the page weight without losing quality.

When installing a plugin you do not have to do anything more. Your current images will be converted into a new format. Users will automatically receive new, much lighter images than the original ones.

As of today, nearly 80% of users use browsers that support the WebP format. The loading time of your website depends to a large extent on its weight. Now you can speed up it in a few seconds without much effort!

This will be a profit both for your users who will not have to download so much data, but also for a server that will be less loaded. Remember that a better optimized website also affects your Google ranking.

How does this work?

  • By adding images to your media library, they are automatically converted and saved in a separate directory.
  • If you have just installed the plugin, you can convert all existing images with one click.
  • Images are converted using PHP GD or Imagick extension (you can modify the compression level).
  • When the browser tries to download an image file, the server verifies if it supports image/webp files and if the file exists.
  • If everything is OK, instead of the original image, the browser will receive its equivalent in WebP format.
  • The plugin does not change image URLs, so there are no problems with saving the HTML code of website to the cache and time of its generation does not increase. It does not matter if the image display as an img HTML tag or you use background-image. It works always!
  • Image URLs are modified using the module mod_rewrite on the server, i.e. the same, and thanks to this we can use friendly links in WordPress. Additionally, the MIME type of the sent file is modified to image/webp.
  • The final result is that your users download less than half of the data, and the website itself loads faster!

WebP images are the future!

Raise your website to a new level now! Install the plugin and enjoy the website that loads faster. Surely you and your users will appreciate it.

Support to the development of plugin

We spend hours working on the development of this plugin. Technical support also requires a lot of time, but we do it because we want to offer you the best plugin. We enjoy every new plugin installation.

If you would like to appreciate it, you can provide us a coffee. If every user bought at least one, we could work on the plugin 24 hours a day!

Please also read the FAQ below. Thank you for being with us!

Screenshots

  • Screenshot of the options panel
  • Screenshot when regenerating images

Installacion

  1. Upload the plugin files to /wp-content/plugins/webp-converter-for-media directory, or install plugin through the WordPress plugins screen directly.
  2. Activate plugin through Plugins screen in WordPress Admin Panel.
  3. Use Settings -> Settings -> WebP Converter screen to configure the plugin.
  4. Click on the button Regenerate All.
  5. Check if everything works fine.

That’s all! Your website is already loading faster!

FAQ

How to get technical support? (before you ask for help)

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.

This will save time repeating the same issues many times and solving the same problems. If you do not find anything and you still have a problem, then contact us.

We will be grateful if you appreciate our time and try to find an answer that may already be somewhere. And if it’s not here, please describe your problem to us.

Please remember one thing – we work on it in our free time, with passion. We will be grateful for keeping culture and patience. We are not always able to respond immediately.

We want to help everyone very much, but we need cooperation between both sides. This is very important. We may have a deal like this?

And most importantly – do not leave the thread unanswered. If you add a thread, follow when you get a reply. Then let us know if we have helped you or not. This helps us improve technical support.

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

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

2. 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.

3. Do you use CDN? If so, please see the question « Does the plugin support CDN? » in plugin FAQ.

4. Do you use other plugins to optimize images? Please disable them and check this plugin without them. Remember not to combine several optimization plugins because they can be mutually exclusive.

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. Content of your .htaccess files from directories /wp-content/uploads and /wp-content/uploads-webp (pasting the code using the CODE shortcode in the editor).

7. What plugin version are you using? If it is not the latest then update and check everything again. Please also provide the version of WordPress and the list of plugins you use.

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

And if we would help and would like to thank us, you can provide us a coffee.

What are requirements of plugin?

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.

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 your server does not meet the technical requirements, please contact your server Administrator.

Please do not add threads regarding server configuration in the support section. Surely the server Administrator will be able to do it best.

He is the most competent to solve such problems. Due to the huge amount of possible server environments, we are not able to help you with its configuration.

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.

What are restrictions?

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.

What to do after installing plugin?

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. All images added later will be converted automatically.

How to check if plugin works?

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. The difference will be only in the Type of file. This does not mean that the plugin does not work.

If the file type 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.

Why are some images not in WebP?

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.

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.

Where are converted images stored?

All WebP images are stored in the /wp-content/uploads-webpc/ directory. Inside the directory there is the same structure as in the original uploads 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/2019/06/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.

How to change path to uploads?

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';
});

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

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

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.

How to run manually conversion?

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.

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.

How to change .htaccess rules?

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) {
  return '';
});

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 /uploads/.htaccess and /uploads-webp/.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.

What is Browser Caching?

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.

Does plugin support CDN?

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 added to the media library 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.

Configuration for Nginx

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 ~ (?<root>.+)/uploads/(?<path>.+)\.(?<ext>jp?g|png|gif)$ {
    if ($http_accept !~* "image/webp") {
      break;
    }
    add_header Vary Accept;
    expires 365d;
    try_files $root/uploads-webpc/$path.$ext.webp $uri =404;
  }
}
Configuration for Multisite Network

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/uploads 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 [T=image/webp]
  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 [T=image/webp]
  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 [T=image/webp]
</IfModule>
# ! --- DO NOT EDIT NEXT LINE --- !
# END WebP Converter

And the following code at the beginning of .htaccess file in the /wp-content/uploads-webp 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
Is the plugin completely free?

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!

Reviews

26 març 2020
- Updated WP install - Verified PHP 7.0 - Installed and activated plugin - Click "generate images" Returns error message: "An error occurred while connecting to REST API. Please try again" So it's a GoDaddy server issue. I'm not calling GoDaddy. Not worth it. One more WP failure.
18 març 2020
A man cares about his plug-in. He spends his time fixing bugs and improving his work. The plugin is working fine.
Read all 54 reviews

Contributors & Developers

“WebP Converter for Media” is open source software. The following people have contributed to this plugin.

Contributors

“WebP Converter for Media” has been translated into 3 locales. Thank you to the translators for their contributions.

Translate “WebP Converter for Media” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2.2 (2020-04-08)

  • [Changed] Moving rules for modules mod_mime and mod_expires to /uploads-webp/.htaccess file
  • [Changed] New argument for filter webpc_htaccess_rules with server path of file

1.2.1 (2020-04-07)

  • [Removed] Filter webpc_option_disabled
  • [Fixed] Converting images multiple times when uploading to media library
  • [Added] Action webpc_convert_paths to convert images by paths
  • [Added] Action webpc_convert_attachment to convert images by Post ID

1.2.0 (2020-04-05)

  • [Changed] Moving rules from .htaccess file in root directory of WordPress to /wp-content/uploads directory
  • [Added] Ability to disable automatic removal of WebP files larger than original
  • [Added] Error validation for a non-writable .htaccess file
  • [Added] Filter webpc_uploads_root to change path for root installation directory of WordPress

1.1.2 (2020-03-03)

  • [Added] Zero padding at end for odd-sized WebP files using GD library

1.1.1 (2020-02-13)

  • [Changed] Unknown error handling when converting images
  • [Added] Ability to skip converting existing images when Regenerate All
  • [Added] Button for simple checking of server configuration

1.1.0 (2020-02-10)

  • [Fixed] Support for WordPress installation in subdirectory
  • [Fixed] Error detecting WebP support by Imagick

1.0.9 (2020-01-03)

  • [Added] Limit of maximum image resolution limit using GD library

1.0.8 (2019-12-19)

  • [Fixed] File deletion for custom paths with converted WebP files
  • [Changed] Rules management in .htaccess file when activating or deactivating plugin
  • [Added] Error detection system in server configuration
  • [Added] Blocking image conversion when GD or Imagick libraries are unavailable

1.0.7 (2019-12-17)

  • [Changed] Rewrite rules in .htaccess file
  • [Added] Custom path support for original uploads files
  • [Added] Custom path support for saving converted WebP files
  • [Added] Filter webpc_uploads_path to change path for original uploads files
  • [Added] Filter webpc_uploads_webp to change path for saving converted WebP files

1.0.6 (2019-11-06)

  • [Changed] Way of generating file path (without ABSPATH)
  • [Added] Automatic deletion of converted files larger than original

1.0.5 (2019-09-16)

  • [Added] Information on available FAQ

1.0.4 (2019-07-11)

  • [Changed] Limits of maximum execution time

1.0.3 (2019-06-26)

  • [Added] Additional security rules

1.0.2 (2019-06-25)

  • [Changed] Error messages
  • [Added] Tab in Settings page about server configuration

1.0.1 (2019-06-23)

  • [Changed] Securing access to REST API
  • [Added] Error handler for undefined GD extension

1.0.0 (2019-06-16)

  • The first stable release