Images to WebP

描述

Statistics say that WebP format can save over a half of the page weight without losing images quality.
Convert PNG, JPG and GIF images to WebP and speed up your web, save visitors download data, make your Google ranking better.

  • automated test after plugin activation to make sure it will work on your server
  • works with all types of WordPress installations: domain, subdomain, subdirectory, multisite/network
  • 可在Apache 或 NGiNX上工作
  • image URL will be not changed so it works everywhere, in <img> src, srcset, <picture>, even in CSS backgrounds and there is no problem with cache
  • original files will be not touched
  • set quality of converted images
  • auto convert on upload
  • only convert image if WebP filesize is lower than original image filesize
  • bulk convert existing images inside /wp-content/ folders to WebP ( you can choose folders )
  • bulk convert only missing images
  • 与“ Fly Dynamic Image Resizer”插件配合使用

Hooks for developers

itw_extensions

Maybe you want to support also less famous JPEG extension like jpe, jfif or jif

add_filter( 'itw_extensions', 'extra_itw_extensions', 10, 1 );
function extra_itw_extensions( $extensions ){
    $extensions[] = 'jpe';
    $extensions[] = 'jfif';
    $extensions[] = 'jif';
    return $extensions;
}

itw_sizes

Maybe you want to disable WebP for thumbnails

add_filter( 'itw_sizes', 'disable_itw_sizes', 10, 2 );
function disable_itw_sizes( $sizes, $attachmentId ){
    unset( $sizes['thumbnail'] );
    return $sizes;
}

itw_htaccess

Maybe you want to modify htaccess rules somehow

add_filter( 'itw_htaccess', 'modify_itw_htaccess', 10, 2 );
function modify_itw_htaccess( $rewrite_rules ){
    // do some magic here
    return $rewrite_rules;
}

iwt_disabled_folders

Maybe you want to disable/enable some other folders for bulk convert

add_filter( 'iwt_disabled_folders', 'modify_iwt_disabled_folders', 10, 1 );
function modify_iwt_disabled_folders( $disabled ){
    // do some magic here
    return $disabled;
}

$images_to_webp->convert_image()

或许你想使用其他插件自动生成 WebP

add_action( 'XXPLUGIN_image_created', 'XX_images_to_webp', 10, 2 );
function XX_images_to_webp( $image_path ){
    global $images_to_webp;
    $images_to_webp->convert_image( $image_path );
}

屏幕截图

安装

  1. Upload images-to-webp directory to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

常见问题

Plugin requirements

It should work almost everywhere 😉
PHP 5.6 or higher
GD or Imagick extension with WebP support
Enabled serve modules: mod_mime, mod_rewrite

WebP images stored location

WebP images are generated in same directory as original image. Example:
original img: /wp-content/uploads/2019/11/car.png
webp version: /wp-content/uploads/2019/11/car.png.webp

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 click on Disable cache 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.

Apache .htaccess

插件应该可以自动更新所需规则到您的.htaccess。
如果无法自动更新,则会出现带有说明的屏幕。
无论如何,这是它看起来该有的样子:

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} "/wp-content/"
    RewriteCond %{REQUEST_FILENAME} "\.(jpg|jpeg|png|gif)$"
    RewriteCond %{REQUEST_FILENAME}\.webp -f
    RewriteRule ^(.+)$ $1\.webp [NC,T=image/webp,E=webp,L]
</IfModule>

NGiNX 配置

激活插件后,将显示说明屏幕。
无论如何,这是它看起来该有的样子:

You need to add this map directive to your http config, usually nginx.conf ( inside of the http{} section ):

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

then you need to add this to your server block, usually site.conf or /nginx/sites-enabled/default ( inside of the server{} section ):

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

评价

2021年8月6日
If you want to use this plugin, then you have to know a little about programming, because many errors occur during the plugin operation, and the plugin developer does not take any part in fixing them. It is quite obvious that the very name of the plugin implies that it is enough to download and install the plugin for it to work. But you can't do that with this plugin.
2021年2月18日
NEW REVIEW: Works like charm rn, developer is nice and really helpful. Big thumbsup. OLD REVIEW: Doesn't load WebP and doesn't show them in the media library. Seems to be converting just fine and going to the URL (imgurlblabla.png.webp) seems to be working too. Just doesn't load WebP.
2021年1月2日
Плагин отличный! Сначала не активировался пока не убрал в настройках хостинга из "статических файлов" форматы картинок - jpg,jpeg,png,gif,webp. После этого все активировалось! Многое зависит от хостинга, но с чем столкнулся когда убрал их из статики - пришлось потом вручную добавить правила кеширования для них: ExpiresActive On #кэшировать изображения на год: (Чтобы не ругался pagespeed гугла) ExpiresByType image/x-icon "access plus 365 days" ExpiresByType image/jpeg "access plus 365 days" ExpiresByType image/png "access plus 365 days" ExpiresByType image/gif "access plus 365 days" ExpiresByType image/webp "access plus 365 days"
2020年7月9日
Nginx config file doesn't allow location block to be inserted directly, i have to put inside a server block. The test is successful but i can't activate the plugin as it always redirects me to the 'instruction' page where it says to copy those few lines in the config files. I checked the code and it is because the code is basically "if the server is nginx wp_die" and the plugin dies there showing the information page only, without activating.
阅读所有12条评价

贡献者及开发者

“Images to WebP” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

“Images to WebP”插件已被翻译至3种本地话语言。 感谢所有译者为本插件所做的贡献。

将“Images to WebP”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码,查看SVN仓库,或通过RSS订阅开发日志

更新日志

1.9

  • Tested on WP 5.8
  • added some nonce checks and more security validations
  • better nginx instructions

1.8

  • Tested on WP 5.7
  • add more CURL options
  • fix backslashes for localhosts

1.7

  • Tested on WP 5.6
  • fixed problem on some multisites

1.6

  • Tested on WP 5.4
  • added support for Fly Dynamic Image Resizer plugin

1.5

  • notice when test image is not accessible

1.4

  • new test method

1.3

  • fixed text domain for translations

1.2

  • added instructions for NGiNX

1.1

  • make it works in multisite and subdirectory installs

1.0

  • First version