今現在では、webサイト上の画像や写真などは、拡張子がjpgではなくwebpやavifが多くなってきました。webpやavifは従来のjpgに比べて画像劣化が少なくファイルサイズが小さくなります。よって、ページ表示速度が速くなることが期待できます。特に、画像を多く取り扱っているサイトにおいてはより効果を感じることと思われます。
そこで、以前からサイト運営をしてきてjpgなどの拡張子にて画像をアップロードしている場合は、FTPツールなどにて全ての画像をダウンロードして、ローカルで一旦保存し以下のサルワカ道具箱やSquooshなどのサイトを利用したり、アプリケーションにて画像をwebp変換後に再度アップロードし直しすなどの手間がかかると思われます。プラグインなどにおいても対応可能かもしれませんが、できる限りプラグインを使わずにしたい方も多いと思われます。
プラグインを使わずにjpg画像をwebp画像に一括変換する方法です。
WordPressにおいてはfunction.phpに関数などのコードを追加することで、後からある程度のカスタマイズが可能です。ある程度というよりかなりのカスタマイズなどができると思われます。
そこで、以下にfunction.php内に以下のコードを追加することで既にアップロードしてあるjpg画像やjpg写真を、サーバー上でWordPressに行わせることができます。
/**
* 既存の JPG / PNG ファイルを WebP に一括変換（元画像は残す）
* 実行トリガー：管理者が管理画面にアクセスしたとき（初回のみ）
*/
add_action( 'admin_init', 'convert_existing_images_to_webp' );
function convert_existing_images_to_webp() {
// 管理者のみ実行
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
// 二重実行防止（1日に1回だけ）
$last_run = get_transient( 'convert_existing_images_to_webp_last_run' );
if ( $last_run ) {
return;
}
set_transient( 'convert_existing_images_to_webp_last_run', time(), DAY_IN_SECONDS );
$upload_dir = wp_get_upload_dir();
$base_dir = trailingslashit( $upload_dir['basedir'] );
// jpg / jpeg / png を再帰的にスキャン
$iterator = new RecursiveIteratorIterator(
new RecursiveDirectoryIterator( $base_dir, RecursiveDirectoryIterator::SKIP_DOTS )
);
foreach ( $iterator as $file ) {
if ( $file->isFile() ) {
$ext = strtolower( $file->getExtension() );
if ( in_array( $ext, array( 'jpg', 'jpeg', 'png' ), true ) ) {
$file_path = $file->getPathname();
$file_info = pathinfo( $file_path );
$webp_path = $file_info['dirname'] . '/' . $file_info['filename'] . '.webp';
// 既に webp が存在すればスキップ
if ( file_exists( $webp_path ) ) {
continue;
}
// 画像読み込み
if ( $ext === 'png' ) {
$image = @imagecreatefrompng( $file_path );
if ( $image ) {
imagepalettetotruecolor( $image );
imagealphablending( $image, true );
imagesavealpha( $image, true );
}
} else {
$image = @imagecreatefromjpeg( $file_path );
}
if ( ! $image ) {
continue;
}
// WebP 生成（品質80）
imagewebp( $image, $webp_path, 80 );
imagedestroy( $image );
}
}
}
}
上記は、WordPressの管理画面を開いた際に自動的に既にアップロードされているjpg画像やjpg写真をwebp形式の拡張子に一括変換するコードになります。
機能の概要としましては、以下のようになっています。
| 項目 | 内容 |
|---|---|
| 対象ディレクトリ | wp-content/uploads/ 以下すべて |
| 対象拡張子 | .jpg, .jpeg, .png |
| 出力形式 | 同名 .webp を生成（例：sample.jpg → sample.webp） |
| 元画像 | 削除せず残す |
| 品質 | 80（必要に応じて変更可） |
| 実行タイミング | 管理者が管理画面を開いたとき、自動で1日1回だけ実行 |
| 二重実行防止 | set_transient() により1日1回のみ動作 |
| セーフティ | 既に .webp が存在する場合はスキップ |
使い方は、管理画面を開くことで1日に1回実行されるようになっています。
一度だけ即時実行したい場合は（もし「管理画面を開かなくても今すぐ変換を走らせたい」場合）、
以下の関数呼び出しを一度だけ追記し、実行後に削除して大丈夫です。
add_action( 'init', 'convert_existing_images_to_webp' );※実行が完了しましたら、上記の1行は削除してください。
その他、上記コードの任意カスタマイズ部分としましては、以下になります。
- 品質を変更したい場合： imagewebp( $image, $webp_path, 80 ); の 80 を 70〜90 などに変更。
- 実行頻度を変更したい場合：DAY_IN_SECONDS を HOUR_IN_SECONDS に変更で1時間ごとに再スキャン可能。
各々において、あったカスタマイズしてみてくださいね。function.phpファイルのバックアップは先に必ず行ってからにしてくださいね。
最後にそれぞれの画像拡張子の特徴や違い（できること）などを以下にまとめてみます。
| WebP | JPEG | PNG | GIF | |
|---|---|---|---|---|
| 圧縮方式 | 非可逆圧縮 可逆圧縮 を選べる | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
| 透過処理 | ○ | × | ○ | △ |
| 表現できる色 | 1670万 | 1670万 | 256〜1670万 | 256 |
| アニメーション 表示 | ○ | × | × | ○ |
Googleが開発した拡張子webpなので、Googleが作成した以下Squooshというサイトにてもwebp画像変換ができます。
あなたにおすすめ
関連記事
-
-
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…
-
-
日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン
ある程度、年式がたった車においてはディーラーオプションナビ（DOP）やメーカーオプションナビ（MOP）の地図データが古くなったり、ナビのモニタインチ数が大きくなったりします。地図データが古くなるのはも…
-
-
車のキーナンバー確認方法。キーレス紛失や壊れた時
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
ポチップ 
ポチップ 入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
- カーメイトのエンジンスターターでエラー15表示と対処方法
- エクストレイルT32マイナーチェンジ後ステアリング外し方
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法
- アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）
- アイドリングストップシステム異常警告灯表示対処方法
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR2032
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法144
- カーメイトのエンジンスターターでエラー15表示と対処方法142
- 車のキーナンバー確認方法。キーレス紛失や壊れた時115
- 日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン100
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく98
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）92
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR203287
- アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた78
- エクストレイルT32マイナーチェンジ後ステアリング外し方73
- アイドリングストップシステム異常警告灯表示対処方法71
新着コメント