運営している WordPress ブログのアップロードフォルダが 3GB 程に巨大化したため、EWWW Image Optimizer プラグインで WebP 化してダイエットしました。
やったことは下記の３つです。
- 不要な自動生成画像を削除
- 元画像の縮小
- 画像の WebP 化
様々なサイズの不要な画像自動生成を停止する
WordPress の投稿に写真をアップロードすると、下記のようなサイズの画像が自動生成されます。
これらは、WordPress 標準機能や、使っているテーマによって自動生成のサイズが決められています。
- sampleimage-160×160.jpg
- sampleimage-520×300.jpg
- sampleimage-768×1024.jpg
- sampleimage-940×1253.jpg
これらの画像の自動生成は私的には不要なので、下記の設定で停止します。
- WordPress の「設定」→「メディア」でサイズを全てゼロに設定。
- WordPress の「設定」→「EWWW Image Optimizer」→「リサイズ」→「リサイズを無効化」で画像の生成を無効化する。
これで、今後アップロードする画像の自動生成は停止されますが、以前にアップロードした自動生成画像はサーバーに残ったままとなります。
WinSCP で以前の不要な自動生成画像を削除する
Windows の FTP クライアントソフト「WinSCP」は指定ディレクトリ以下の一括検索ができるので、こちらを利用して、不要な自動生成画像を削除します。
※ ファイルはバックアップを取った上で削除してください。
- WinSCP の「コマンド」→「ファイルの検索」を選択。
- WinSCP の「ファイルマスク」で「
*-500x*.*」などで検索。 - 検索結果を確認して、不要な自動生成画像を削除します。
EWWW Image Optimizer で元画像をリサイズして WebP 画像を生成する
- WordPress の「設定」→「EWWW Image Optimizer」→「画像のリサイズ」で幅 900 ピクセル・高さ 1,350 ピクセルの画像を指定。
※ お使いのテーマのコンテンツ幅に合わせてサイズを設定してください。 - WordPress の「メディア」→「一括最適化」で「最最適化を矯正」を選択して、一括最適化します。
※ 一括最適化でリサイズすると、メインビジュアルなどのリサイズしたくない画像もリサイズされるのでご注意ください。
WebP 対応ブラウザ閲覧時には WebP 画像を配信するように設定する
- WordPress の「設定」→「EWWW Image Optimizer」→「WebP 変換」をチェックする。
- 「WebP の配信方法」で「リライトルールを挿入する」をクリックして .htaccess にリライトルールを挿入する。
- .htaccess を開いて、挿入されたリライトルールを .htaccess の先頭に移動する。
将来的に、世の中の全てのブラウザが WebP に対応したら JPG を削除ようにしたい。
アイキャッチ画像のリンクが切れるので元画像を参照させる
アイキャッチ画像などが、自動生成の w768, w940 画像を参照していたので、リンク切れで表示されなくなる。
ということで、下記のリライトルールを .htaccess の先頭に挿入する。
# 768w などの自動画像生成を停止したので、サムネイルは元画像を使う。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} (.+)-([0-9]+)x([0-9]+)\.(jpe?g|png|gif)$
RewriteRule (.+)-([0-9]+)x([0-9]+)\.(jpe?g|png|gif)$ $1\.$4.webp [T=image/webp,L]
</IfModule>
以上で作業は完了です。
uploads フォルダの容量は 3GB から 1.2GB 程度に小さくなりました。わーい！ヽ(｀▽´)/
