検索
Close this search box.

WordPress画像をWebPに変換 Converter for Media Nginx設定

Nginx サイトのWordPress のページ表示速度に重要な画像の圧縮を半分自動でwebp形式にするプラグインの設定方法

Nginx と Converter for Media

プラグイン Converter for Media を使用するには、ウエブサーバーの設定が必要です.

この記事は、Nginx を使っているサーバーのことについて記します.

画像形式の WebP へ変換する訳とは

画像形式には、一般的には圧縮率の高い [ jpg / jpeg ] や背景を透明を選択できる [ png ] が用いられることが多いと思います.

Google が押し進めるインターネットを効率的に使うには、画像のデーターを高品質を担保しながら圧縮を高める必要性から、独自の [ WebP ] という画像形式のファイルを押し進めています.

何故ならば、ウエブサイトのパフォーマンスを高めるには、データー量を少なくしてページを高速に表示をさせることが最も効果的と言えるからです.

ただし、WebP形式だけでは問題があります.

[ jpg / jpeg ] や [ png ] よりも同じ画質ならば圧縮率が高いとされますが、ブラウザが [ WebP ] に対応していない場合は、Web ページの画像は表示されずブランクとなるので、注意が必要です.

Converter for Media は相手のブラウザによって出力する画像形式を選択する機能があるので心配する必要はなさそうです.

WebP は、画質を保ったままファイルサイズを小さくできる画像フォーマットです.

JPEGのように圧縮率が高いため、Webサイトへの負担や読み込みにかかる時間を軽減できます。
PNGのように背景の透過が可能なので、写真の背景を透明にしたいときに、最も圧縮効果を発揮できると考えます.

プラグイン Converter for Media

WebP および AVIF 画像を提供することにより、簡単な画像オプティマイザを使用して Web サイトを高速化します。
標準の JPEG、PNG、および GIF 形式のファイルを WebP および AVIF 形式に置き換えることで、品質を損なうことなくページの重量を半分以上節約できます。

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

現在、ユーザーの 90% 以上が WebP 形式をサポートするブラウザーを使用しています。
Web サイトの読み込み時間は、その重量と画像の最適化のレベルに大きく依存します。
WebP コンバーターを使用すると、手間をかけずに数秒で高速化できます。

これは、大量のデータをダウンロードする必要のないユーザーと、負荷の少ないサーバーの両方に利益をもたらします。
より適切に最適化されたウェブサイトは、Google ランキングにも影響することに注意してください。画像の最適化は非常に重要です。

無料でConverter fo Media を使うのであれば WebP のみ対応ですが、Pro版にすれば、AVIF 画像にも対応できます.

AVIF」は「AV1 Image File Format」の略称で、Webp よりも圧縮されWebP と同様にGIFのような透過画像にも対応しています.
さらに、アニメーションにも対応しているので、 Web ページでは今後主流になる画像フォーマットだと思います.

Converter fo Media のインストール

プラグインの新規追加から検索に、 [ Converter fo Media  ] 入力して、インストール

converter for media install

Converter for Media の設定

プラグインの画面に移って、プラグイン Converter for Media の確認をします.

設定は、プラグインの画面からSettings をクリックするか、設定画面からConverter for Media を選択する.

plugin_media

Server configuration error

サーバーの設定をしないと動かないようです.

server_conf_error

nginx.conf mime.types の編集

FAQ をのぞくと Nginx を使っている場合は

Configuration for Nginx
For Nginx server that does not support .htaccess rules, additional Nginx server configuration is required for the plugin to function properly.

Nginx の構成
.htaccess ルールをサポートしない Nginx サーバーの場合、プラグインが適切に機能するには、追加の Nginx サーバー構成が必要です。

Find the configuration file in one of the paths (remember to select configuration file used by your vhost):

パスの 1 つで構成ファイルを見つけます (仮想ホストで使用される構成ファイルを選択することを忘れないでください)。

– /etc/nginx/sites-available/ or /etc/nginx/sites-enabled/
– /etc/nginx/conf.d/

and add this code (add these lines at the beginning of the server { … } block) – remember to add these rules before any other location {} rules:

このコードを追加します (これらの行を server { … } ブロックの先頭に追加します) – これらのルールは、他の場所 {} ルールの前に追加することを忘れないでください:

server {….} ブロックの最初の location ルールの前あたりに記述すれば動作しました.

				
					# BEGIN WebP 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 WebP Converter for Media
				
			

Then add support for the required MIME types, if they are not supported. Edit the configuration file:

次に、必要な MIME タイプがサポートされていない場合は、サポートを追加します。 構成ファイルを編集します

– /etc/nginx/mime.types

and add this code (add these lines inside the types { … } block):

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

Nginx のバージョンによっては、すでに記述されています.

				
					image/webp webp;
image/avif avif;
				
			

マイム【MIME】 読み方:まいむ 《multipurpose Internet mail extensions》電子メールで、文字のほか、画像や音声、動画などさまざまなデータを転送するための規格。

After making changes, remember to restart the machine:

変更を行った後、必ずマシンを再起動してください。

				
					systemctl restart nginx
				
			

ここでは、ダッシュボードの Converter for Media プラグインの setting のエラーは、まだ消えないので焦らないでください.

次の設定でエラーが消えるはずです.

サーバー設定後 Converter for Media 設定

Nginx の場合

Image loading mode 

◉ pass Thru ( without rewrites in .htaccess files or Nginx configuration )

をチェック

Save Changes で設定を保存すると、server configuration error のメッセージが初めて消えます.

変換ボタン Regenerate All

Force convert all images again どちらでも良いかな

Converter for Media プラグインをインストールした後
最初の一回は
[ Regenerate All ] ボタンでコンバートしてください.

ワンクリックですべての既存の画像を変換します!
このツールは、WordPress REST API を使用して、すべての画像のアドレスをダウンロードし、すべてのファイルを段階的に変換します。
これは、ファイルの数に応じて、数分から数時間かかるプロセスです。
この処理中は、ブラウザ ウィンドウを閉じないでください。

この操作は、プラグインのインストール後に 1 回だけ実行する必要があります。
メディア ライブラリからの新しい画像は自動的に変換されます。
他の画像の場合。
メディア ライブラリ以外の /themes または /uploads ディレクトリから新しい画像を追加した後、手動で変換を開始する必要があります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

converter_for_media nginx

記事の見出し番号

関連記事

最新記事

iframe

iframeを使って、他サイトをページに表示させることができます。

例)スクロール効果

スクロールの効果のサンプルページです。印象に残るページの参考にしていただけると良いですね。Elementorより。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。