Converter for Media – 画像最適化 | WebP & AVIF に変換

説明

WebP および AVIF 画像を提供することで、簡単な画像最適化ツールを使用してウェブサイトを高速化します。標準の JPEG、PNG、GIF フォーマットのファイルを WebP および AVIF フォーマットに置き換えることにより、品質を落とすことなくページ重量を半分以上節約することができます。

プラグインをインストールした後、あなたはもう何もする必要はありません。あなたの現在の画像は、新しい形式に変換されます。弊社の画像オプティマイザーによる画像の最適化が終了すると、ユーザーは自動的に新しい、元のものよりもはるかに軽い画像を受け取ることになります。

今日では、90%以上のユーザーが WebP 形式をサポートするブラウザを使用しています。ウェブサイトの読み込み時間は、その重さと画像の最適化の度合いに大きく左右されます。私たちの WebP コンバータを使用すると、すぐに多くの努力なしで、数秒でスピードアップできます!

負荷を軽減してください。より最適化されたウェブサイトは、Google のランキングにも影響することを忘れないでください。画像の最適化は非常に重要です。

AVIF サポート

PRO バージョンでは、画像の出力形式として AVIF を使用できます。 AVIF 形式は新しい拡張機能で、WebP の後継です。 AVIF を使用すると、さらに高いレベルの画像圧縮を実現できます。画像の最適化後の変換後の画像の品質は、WebP よりも優れています。

どのように動作しますか?

  • プラグインをインストールしたばかりの方は、ワンクリックで画像を最適化することができます。webp 生成後の画像サイズは小さくなります!
  • メディアライブラリに新たに追加される画像は、自動的に変換されます。
  • 弊社のイメージオプティマイザは、あなたのオリジナル画像を一切変更しません。これは、あなたとあなたのファイルのためのセキュリティを意味しています。
  • ブラウザが画像を読み込むとき、このプラグインはその画像が WebP 形式をサポートしているかどうかを調べます。対応している場合は、WebP 形式の画像が読み込まれます。
  • プラグインはデフォルトモードではリダイレクトを行わないため、URL は常に同じです。 画像の MIME タイプのみが image/webp に変更されます。
  • リダイレクトがないということは、キャッシュの問題がなく、Web サイトの操作が高速でトラブルのないことを意味します。 仕組みについて詳しく知りたい場合は、以下のプラグイン FAQをご覧ください。
  • 画像が img HTML タグとして表示されるか、background-image を使用するかは問題ではありません。 それは常に動作します!
  • .htaccess ファイルからのルールによる書き換えがブロックされている場合、PHP ファイル経由で画像をロードするモードが利用可能です。 その後、画像の URL が変更されますが、動作ロジックはデフォルトモードの場合と同じです。
  • 画像最適化後の最終的な結果は、ユーザーがダウンロードするデータが半分以下になり、ウェブサイト自体の読み込みも速くなることです!
  • 失うものは何もありません – もしあなたがプラグインを削除する必要がある場合、それはすべての後に自身を削除します。何の痕跡も残しませんので、安心して確認いただけます。

WebP の変換 – それは未来志向の画像最適化です!

画像を最適化して、あなたのウェブサイトを今すぐ新しいレベルに引き上げましょう!プラグインをインストールして、画像の最適化によってより速くロードされたウェブサイトをお楽しみください。きっとあなたとユーザーは感謝するはずです。

追加のディレクトリのサポート

/uploads ディレクトリだけでなく、/plugins および /themes ディレクトリからも WebP 変換と画像の最適化を行うことができます。これにより、WebP 形式との完全な統合が可能になります!

プラグイン開発のサポート

弊社は、このプラグインの開発に何時間も費やしています。技術サポートも多くの時間を必要としますが、弊社はあなたに最高のプラグインを提供したいので、それを行っています。 弊社は新しいプラグインのインストールを毎回楽しんでいます。

評価したい場合は、PRO バージョンを試すことができます。 さらに、さらに優れた画像最適化結果を実現できる追加機能にアクセスできます。

下記の FAQ もお読みください。弊社と一緒にいてくれてありがとう!

スクリーンショット

  • プラグイン設定の一般タブ
  • プラグイン設定の「詳細」タブ
  • 画像の一括最適化
  • メディアライブラリの最適化統計
  • Ability to manually undo optimization of selected image

インストール

  1. プラグインファイルを /wp-content/plugins/webp-converter-for-media ディレクトリにアップロードするか、WordPress のプラグイン画面から直接インストールしてください。
  2. WordPress 管理パネルの プラグイン 画面からプラグインを有効にします。
  3. 設定 -> 設定 -> メディアコンバーター画面でプラグインを設定します。
  4. ボタン一括最適化開始をクリックし、待ちます。
  5. このチュートリアルを使用して、すべてが正常に動作するかどうかを確認します。

以上です!あなたのウェブサイトはすでに速く読み込まれています!

FAQ

技術サポートを受けるには?(助けを求める前に)

新しいスレッドを追加する前に、この FAQ の他のすべての質問と、サポート フォーラムの他のスレッドをお読みください。もしかしたら、同じような悩みを抱えていた人がいて、それが解決していたかもしれません。

スレッドを追加するときは、次の手順に従って、それぞれに返信してください。

1. プラグイン設定ページに誤りはありませんか?エラーがある場合は、このスレッドをお読みください。

2. ウェブサイトの URL。

3.プラグイン設定画面の「ヘルプセンター」タブのスクリーンショット – ページ全体のスクリーンショットを撮影してください。

4.「プラグインが動作するかどうかを確認するにはどうすればよいですか?」という質問の FAQ に記載されているテストを行ってください。テスト結果とともに開発ツールのスクリーンショットを送信してください。

スレッドを追加して、すべての質問への回答を含めることを忘れないでください。それははるかに簡単で、問題の解決を加速します。

Nginx の設定

.htaccess ルールに対応していない Nginx サーバーでは、プラグインを正しく動作させるために追加の Nginx サーバー設定が必要です。

以下の4つのステップ(すべて行ってください)を踏んでください:

ステップ 1

いずれかのパスで設定ファイルを見つけます(仮想ホストで使用される設定ファイルを選択することを忘れないでください)
/etc/nginx/sites-available/ または /etc/nginx/sites-enabled/
/etc/nginx/conf.d/

そしてこのコードを追加します (これらの行を server { ... } ブロックの先頭に追加します)他の location {} より前にこれらのルールを追加することを忘れないでください ルール:

# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
    set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_avif
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

Here is an example of what a properly added Nginx configuration looks like (this is an example Nginx configuration, but in most cases it looks similar). Note where the rules marked with a red frame are placed.

ステップ 2

次に、必要な MIME タイプがサポートされていない場合は、サポートを追加します。設定ファイルを編集します。
/etc/nginx/mime.types

そしてこのコードを追加します (これらの行を types { ... } ブロック内に追加します):

image/webp webp;
image/avif avif;

ステップ 3

変更後は、忘れずにマシンを再起動してください。

systemctl restart nginx

問題が発生した場合は、サポートフォーラムでご連絡ください。私たちは助けるために努力します。

ステップ 4

また、下記 FAQ の質問「Nginx Proxy の設定について」もご参照ください。

Nginx プロキシの設定

If in the plugin settings page you see the Server configuration error with an error code: bypassing_apache, rewrites_not_executed or rewrites_cached, it means a problem with Nginx Reverse Proxy fof static files or Nginx Caching fof static files.

この問題を解決するには、ドメインの主な Nginx 設定ファイルの1つでこのタイプのルールを探します(場所条件の拡張子のリストは異なる場合があるので、類似性を探します)。

location ~* ^.+\.(css|js|jpg|jpeg|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires max;
...

もしくは

location ~* ^.+\.(css|js|jpe?g|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires 1M;
    try_files $uri @proxy;
...

そのようなルールを見つけた場合は、その中から以下のフォーマットを削除してください:
jpg and jpeg or jpe?g
png
gif
webp

変更後は、忘れずにサービスを再起動してください。

systemctl restart nginx

プラグインの設定画面でエラーになるのですが ?

プラグイン設定画面でエラーが発生した場合は、まず内容をよくお読みください。サーバーまたは Web サイトの構成に問題がある場合に表示されます。

メッセージは、繰り返されるサポート リクエストの数を減らすように設計されています。あなたと弊社の時間を節約します。詳細については、このスレッドをお読みください。

変換中にエラーが発生しました?

変換時にいくつかの種類のエラーが発生することがあります。まず、その内容を注意深く読んでください。ほとんどの場合、自分で解決することができます。試してみてください。または、サーバー管理者に連絡してください。

エラーが発生した場合:ファイル "%s" は存在しません。ファイル パスを確認してください。 は、PHP の file_exists() 関数を意味します。エラーメッセージで指定されたファイル パスを使用して false を返しました。 このパスを調べて、正しいことを確認してください。

エラーが発生した場合:ファイル "%s" は読み取れません。ファイルのアクセス許可を確認してください。 は、PHP の is_readable() 関数を意味します。エラー メッセージで指定されたファイル パスを使用して false を返しました。ファイルのアクセス権と、ファイルが置かれているディレクトリを確認してください。

エラーが発生した場合:"%s" は有効なイメージ ファイルではありません。は、ファイルが何らかの形で破損していることを意味します。ファイルをディスクにダウンロードし、任意のグラフィック プログラムを使用して再度保存し、ページに再度追加します。エラーが個々の画像に適用される場合は無視できます。WebP ではなく、元の画像のみが読み込まれます。

エラーが発生した場合:.webp に変換された画像 "%s" は元の画像よりも大きく、変換された .webp ファイルは削除されました。 は、元の画像の重量が WebP よりも軽いことを意味します。これは、画像が以前に圧縮されている場合に発生します。常に WebP を使用するようにするには、プラグイン設定で「元のサイズより大きい出力形式のファイルを自動的に削除する」 オプションを無効にします。

プラグインの要件は?

実際、すべてのホスティングがこれらの要件を満たしています。 PHP 7.0 以上を使用し、GD または Imagick 拡張機能をインストールする必要があります。 拡張機能は WebP 形式 をサポートする必要があります。 GD または Imagick ライブラリがインストールされていないというエラーが表示された場合、それらはおそらく正しく構成されておらず、 WebP をサポートしていません。

これらは必須のネイティブ PHP 拡張機能であり、とりわけ WordPress がサムネイルを生成するために使用します。サーバーでは、モジュール mod_mimemod_rewrite、および mod_expires も有効にする必要があります。

正しいサーバー設定の例は、こちらで確認できます。現在の設定へのリンクは、プラグイン設定画面の「ヘルプセンター」タブで確認できます。

赤でマークされた項目に注意してください。 赤でマークされた値がケースに表示されない場合は、サーバーが技術的要件を満たしていないことを意味します。GD ライブラリの WebP サポート の値と、Imagick ライブラリの サポートされている拡張機能のリストの WEBP に注意してください。

お使いのサーバーが技術的な要件を満たしていない状況では、サーバー管理者にお問い合わせください。弊社では対応しかねます。この件は、プラグインではなく、サーバーの設定の問題ですので、弊社へのお問い合わせはご遠慮ください。

また、REST API を有効にして、追加の制限なしで動作させる必要があります。 問題がある場合は、ウェブサイトを作成した開発者にお問い合わせください。 彼は、REST API が機能しないという問題を簡単に見つけるはずです。

プラグインが動作するかどうかを確認するには?

プラグインの動作については、弊社マニュアルに詳しく記載されています。

アップロードパスを変更するには?

これは、以下のタイプのフィルターを使用して、デフォルトのパスを変更することが可能です。上級者向けの解決方法です。そうでない方は、この質問を読み飛ばしてください。

WordPress のルートインストールディレクトリへのパス (ABSPATH デフォルト)

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

ディレクトリへのパス (ルートディレクトリからの相対パス)

add_filter( 'webpc_dir_name', function( $path, $directory ) {
    switch ( $directory ) {
        case 'uploads':
            return 'wp-content/uploads';
        case 'webp':
            return 'wp-content/uploads-webpc';
        case 'plugins':
            return 'wp-content/plugins';
        case 'themes':
            return 'wp-content/themes';
    }
    return $path;
}, 10, 2 );

/uploads-webpc ディレクトリは、/uploads/plugins、および /themesディレクトリと同じネストレベルでなければならないことに注意してください。

/wp-content/ ディレクトリの URL のプレフィックスまたは同等の ( .htaccess で使用)

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

以下のサンプルカスタム WordPress の構成について:

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

以下のフィルターを使用します:

add_filter( 'webpc_site_root', function( $path ) {
    return 'C:/WAMP/www/project/web'; // your valid path to root
} );
add_filter( 'webpc_htaccess_rewrite_path', function( $prefix ) {
    return '/';
} );
add_filter( 'webpc_dir_name', function( $path, $directory ) {
    switch ( $directory ) {
        case 'uploads':
            return 'app/uploads';
        case 'webp':
            return 'app/uploads-webpc';
        case 'plugins':
            return 'app/plugins';
        case 'themes':
            return 'app/themes';
    }
    return $path;
}, 10, 2 );

管理パネル内の設定 -> メディアコンバーターに移動し、フィルターを設定したら設定を保存ボタンをクリックします。適切なルールを含む .htaccess ファイルをディレクトリ /uploads および /uploads-webpc に作成する必要があります。

変換対象からパスを除外するには?

選択したディレクトリを除外するには、次のフィルターを使用します:

add_filter( 'webpc_supported_source_directory', function( bool $status, string $directory_name, string $server_path ): bool {
    $excluded_directories = [ 'my-directory' ];
    if ( in_array( $directory_name, $excluded_directories ) ) {
        return false;
    }
    return $status;
}, 10, 3 );

選択したファイルを除外するには、次のフィルターを使用します。(この場合、ファイル名に接尾辞「-skipwebp」が付いています。)

add_filter( 'webpc_supported_source_file', function( bool $status, string $file_name, string $server_path ): bool {
    $excluded_suffix = '-skipwebp';
    if ( strpos( $file_name, $excluded_suffix . '.' ) !== false ) {
        return false;
    }
    return $status;
}, 10, 3 );

引数 $server_path は、ディレクトリまたはファイルへの絶対サーバーパスです。 フィルター内では、必要に応じてより複雑なルールを適用できます。

フィルターは画像が変換される前に実行され、変換された画像には対応しなくなります。変換されるべきでない画像は手動で削除する必要があります。

カスタムディレクトリのサポート

このプラグインは、デフォルトで以下のディレクトリをサポートしています:
/gallery
/plugins
/themes
/uploads

カスタムディレクトリのサポートを追加する場合は、次のコードをテーマ ディレクトリの functions.php ファイルに追加します (custom-directory の代わりに正しいディレクトリ名を使用してください):

add_filter( 'webpc_source_directories', function ( $directories ) {
    $directories[] = 'custom-directory';
    return $directories;
} );

このディレクトリは、/wp-contentディレクトリに配置されなければならないことを忘れないでください。

手動で変換するにはどうしたら良いですか ?

デフォルトでは、一括最適化開始 ボタンをクリックすると、すべての画像が変換されます。 さらに、新しいファイルをメディア ライブラリに追加すると、変換が自動的に行われます。

このプラグインは、WordPressによって生成された画像を考慮に入れていることを忘れないでください。例えば、異なるサイズや異なるバージョンの画像を生成するプラグインはたくさんあります。

自身で画像を生成するプラグインと統合したい場合は、それを行うことができます。 私たちのプラグインは、このタイプの統合の可能性を提供します。 これは /wp-content ディレクトリ内のすべての画像で機能します。

これは、高度なユーザーのためのソリューションです。他のプラグインと統合したい場合は、そのプラグインの作者に連絡し、私たちのプラグインで利用できるアクションについての情報を与えるのが最善です。これは、あなたがより速く解決策を見つけるのに役立ちます。

選択したファイルの変換を手動で実行できます。パス(サーバーの絶対パスである必要があります)のリストを含む配列を渡すアクションを使用できます。

do_action( 'webpc_convert_paths', $paths, true );

別の方法は、メディアライブラリから投稿 ID を渡して、選択した添付ファイルの変換を手動で開始することです。すべての画像サイズを登録した後 (つまり、add_image_size 関数を実行した後)、このアクションを実行することを忘れないでください:

do_action( 'webpc_convert_attachment', $post_id, true );

手動で変換されたファイルを削除するには、次のアクションを使用して、ファイルへの絶対サーバーパスの配列を引数として指定します (これにより、手動で変換されたファイルが削除されます)

do_action( 'webpc_delete_paths', $paths );

WP-CLI のサポート

このプラグインは WP-CLI をサポートしており、サーバー レベルからのより高速な画像変換を可能にします。 WP-CLI を使い始める方法の詳細については、ハンドブックを参照してください。サポートされているコマンドは次のとおりです。

変換用の画像が最大何枚あるのかを確認中:

wp converter-for-media calculate

すべての画像を変換中:

wp converter-for-media regenerate

すべての画像を変換する (「すべての画像を再度強制的に変換する」オプションを使用):

wp converter-for-media regenerate --force

プラグインは CDN をサポートしていますか?

ウェブサイトのファイル( WordPress のファイル)とメディアライブラリの画像は、同じサーバーにある必要があります。同じサーバー上にあれば、すべてうまくいくはずです。

画像だけが別の CDN サーバーにある場合、その画像は別のサーバーで管理されているため、残念ながら正しい動作は得られません。

Current list of supported CDN servers:
– BunnyCDN (refer to the instructions before use)

評価

2023年10月2日
I used this plugin on all my sites to convert images to Webp and it works fine. The site's speed gets better after the conversion.
838件のレビューをすべて表示

貢献者と開発者

Converter for Media – 画像最適化 | WebP & AVIF に変換 はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Converter for Media – 画像最適化 | WebP & AVIF に変換” は20ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Converter for Media – 画像最適化 | WebP & AVIF に変換” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

5.11.1 (2023-10-02)

  • [Fixed] Duplicated rewrite rules for .jpeg files
  • [Changed] Error message for rewrites_not_executed error in server configuration

5.11.0 (2023-09-27)

  • [Added] Ability to manually optimize selected images in Media Library
  • [Added] Ability to manually undo optimization of selected images in Media Library

5.10.1 (2023-09-10)

  • [Fixed] Detection of bypassing_apache error in server configuration

5.10.0 (2023-09-09)

  • [Fixed] Removing files from /uploads-webpc directory after uninstalling plugin
  • [Changed] Error message for rewrites_not_working error in server configuration
  • [Changed] Verification of correct operation of rewrites from .htaccess file
  • [Added] Changes to improve performance of plugin
  • [Added] Changes to improve loading time of plugin settings

See changelog.txt for previous versions.