WordPressにアップロードした画像の圧縮率をサイズごとに個別に設定できるプラグインを作りました!

WordPress には画像をアップロードする時に自動的にいくつかサイズにリサイズしてくれる機能があります。
この機能のお陰で大きなサイズの画像をアップロードしても自動的に最適なサイズにリサイズされた画像が使用されてページの読み込みが重くならずに済みますね。

しかし、WordPress で自動的にリサイズされる画像の圧縮率は基本的にはどのサイズでも固定で個別に設定することができません。その圧縮率も JPEG で82で固定です。(変更するには hook というものでプログラムを書いて変更する必要があります)
おおよそバランスの良い圧縮率といわれていますが、写真を見せたいサイトでは品質が不足したり、逆にサムネイルなどの小さな画像では過剰品質です。

そこで、ページの高速化と見せる写真の品質を両立させるためにサイズごとに個別に圧縮率を設定できるプラグインを作成しました!
ついでに Google が開発している高圧縮の WebP という画像も自動生成できるようにしましたので、詳細を解説したいと思います。

ダウンロードやインストールはこちらから!

まずは、あなたの WordPress サイトにインストールしていきましょう!
以下よりダウンロードしてアップロードするか、プラグインの新規追加から当プラグインを探してインストールして下さい。

キーワード欄に「Still BE Image Quality Control」と入れて下さい。

すると下の画像のようにプラグインが見つかると思うので “今すぐインストール” というボタンをクリックしてインストールして “有効化” して下さい。

WordPress 公式ディレクトリに登録済みです!「Still BE Image Quality Control」で検索して下さい!

有効化すると次の画像アップロード時からは圧縮品質がこのプラグインのデフォルトに変更され、(サーバが対応している場合) WebP が自動生成されるようになります。

プラグインの機能

このプラグインには以下の機能が実装されています。

設定は、管理画面 → 設定 → 画像の圧縮品質 から行います。プラグインページにある “無効化” リンクの隣の “設定” から移動することもできます。

画像の圧縮率をサイズ、種類ごとに個別に設定

メインの機能です。このプラグインを有効化すると自動的に最適なデフォルトの圧縮率に設定します。

圧縮率の設定テーブル

インストール直後は WordPress にはじめから設定されているリサイズ用のサイズ (thumbnail, medium, medium_large, large, 1536×1536, 2048×2048) には圧縮率が設定されます。
上の画像だと pre-load というサイズは、デフォルト値がなくインストール直後は空欄になります。

JPEG の圧縮率の目安は、80を基準にキレイにしたい場合は~90くらいの範囲で調整してみて下さい。容量を抑えたい場合は60~くらいにすると良いです。
90よりも大きいとファイルサイズがかなり大きくなるので一度テストしてみてファイルサイズを確認することをお薦めします。
60よりも小さいとファイルサイズは小さくなりますが、ブロックノイズが目立つなど品質がかなり悪くなるので設定しない方が無難です。

※上の画像で pre-load の品質が40になっていますが、これはこの画像がぼかした状態で表示されて本画像が読み込まれるまでの間のみ使用しているためです。ぼかさない普通の画像としてはとても使えません。

PNG の圧縮率は9が最適です。最ものファイルサイズが小さくなりますが、可逆圧縮のため品質は変わりません。
ただし、サイズの大きな PNG を圧縮すると結構時間が掛かるので、(イラストなどの) サイズの大きな PNG を多数扱うサイトの場合は5~6くらいに下げると快適になります。
これはサーバの処理能力や扱う画像によって変わるのでご自分の使い方に合わせて検討して下さい。

WebP の圧縮率はデフォルトでは JPEG と同じに設定しています。こうすれば WebP が使用できるユーザには WebP が配信されるのでよりファイルサイズが小さくなり高速化して快適になります。

圧縮率が未設定の場合のデフォルト値と元画像のWebPの圧縮率の設定

上記テーブルで未設定の場合のデフォルト値を設定できます。

また、オリジナルのアップロード画像の WebP を生成する際の品質もここで設定します。

デフォルトの品質設定と元画像の WebP 品質

安全なファイル名の保証

ファイル名に日本語などの全角文字や空白が入っていると思わぬ不具合やバックアップ時に苦労するので、アップロード時にチェックして URL に使用しても安全なファイル名に変換しておきます。
デフォルトで ON です。

日本語で WordPress を使う際に超定番の WP Multibyte Patch が入っていれば気にしなくてもいいんですが、こちらでも安全のために組み込んでいます。

※ファイル名がはじめから問題ない場合は、名前の置換は行いません。

EXIF データから Alt を自動設定

JPEG ファイルをアップロードする時に EXIF から Alt を自動設定することができます。
デフォルトでは OFF になっています。

EXIF データには、撮影時の設定 (絞り、シャッター速度、ISO、焦点距離、撮影者情報など) が含まれるのでそれを基に Alt (代替テキスト) を自動生成して設定します。
SEO では、装飾以外の画像には Alt を設定することが推奨されています。本当は何が映っている画像かを設定するべきなんですが、代わりに設定値を「ILCE-6300, 30mm, f/4, 1/160s, ISO100 | Photo by YAMAMOTO DAISUKE」のように設定します。

品質レベルの接頭尾を追加

WordPress で自動リサイズされた画像には、画像サイズを表す数値が追加されることになっています。
オリジナルが original.jpg だったら、original-1024×768.jpg などのようにサイズが追加されます。

これに加えて、品質レベルを表す数値を追加することができます。これにより実際にどんな品質で圧縮されたかをファイル名から判断することができます。(主に Web 制作者向け機能です)
original-1024×768-q80.jpg のように品質レベルが追加されます。

デフォルトでは OFF です。

インターレース/プログレッシブを有効化

インターレースやプログレッシブのフラグを有効にすることができます。
デフォルトで ON です。

このフラグを立てて画像を生成すると荒い画像がまず表示されて徐々に精彩に表示されるというようになります。
通信環境の悪いユーザにもとりあえず画像が表示されるのでレイアウト崩れが多少軽減される利点があります。

ただし、画像を描画するための負荷がフラグが立っていない場合に比べて、およそ3倍程度と大きくなるので画像を大量に扱うサイトでは OFF にすると良いかもしれません。
今のデバイスはモバイル機器でも十分な処理性能があるのでそこまで気にしなくてもいいですが、ユーザの負荷が高くなることだけは覚えておいて下さい。

※ WebP はその負荷を許容しないため、インターレースやプログレッシブのような機能はありません。

WebP 生成の有効化

WebP を自動生成することができます。
デフォルトで ON です。(WebP の生成が行えるかの判定が “利用可能” となっている場合のみ有効)

WebP は JPEG や PNG、GIF に代わる次世代の画像圧縮規格で Google が開発しています。
JPEG のような非可逆圧縮 (圧縮のたびに劣化する) や PNG のような可逆圧縮 (圧縮を繰り返しても劣化しない) をサポートし、透過やアニメーションもサポートしています。

※ WebP の可逆圧縮は、WordPress が標準で採用している画像処理ライブラリ Imagick や GD ではサポートされていないようです。後述の cwebp を使う必要があります。(2021年現在)

同じ品質の画像を生成する場合、一般的に JPEG や PNG よりも WebP の方がファイルサイズが小さくなります。
WordPress 5.8 からは WebP が正式にサポート形式として採用されるようです。

WebP への変換は Google が提供する Squoosh という Web アプリが便利です。変換前後の比較を行えたり設定を細かく調整することができます。
当プラグインでは、この変換を自動的に行います。(細かなオプションは cwebp がプラグインとして採用できなかったのでできません)

自動生成された WebP は、”元の画像の拡張子を含むファイル名.webp” という名前で保存されます。
有効化している場合は、.htaccess でユーザのブラウザが WebP を使用可能か判定してOKの時には元の画像の代わりに WebP を配信するようにしています。
WordPress の記事やページで WebP を指定する必要はありません。(これによって WebP 非対応ブラウザで画像が見れないという問題が回避されます)

設定をリセットする

設定をすべて初期値に戻すことができます。

再圧縮を実行

アップロード時に圧縮率を設定してリサイズするので、プラグインをインストールしただけでは既にアップロード済みの画像は変更されません。
そこで、画像を現在の設定で圧縮する機能を付けています。

画像の圧縮はサーバへの負荷が高いので、次の画像の圧縮が始まるまで1秒のインターバルを設けています。

“画像 ID の一覧を取得する” ボタンで変換する画像 ID を確認できます。
ID が取得出来たら “リサイズ画像を再生成する” ボタンで変換を開始します。1枚あたり数秒くらいは掛かるので画像の枚数 x10 秒くらいを見ておくと良いと思います。
(画像サイズやリサイズ画像の種類数によります)

変換中はページを閉じないようにして下さい。下の画像のように 1800 枚ほどあると5時間弱くらい掛かりそうです。

変換に時間が掛かるサイトの場合、途中で一時的に止めることができないと不便なので途中経過の保存機能を実装しようと考えています。
アップデートまでお待ちいただけると助かります!

Version 0.6.0 にて中断機能を追加しました!
中断ボタンで一時停止するか、再生成中にページを離れると完了したファイルの次のファイルから始めることができるようになりました!
ぜひアップデートして下さいね!

灰色になっている画像は変換済みになります。
設定ページを開くと続きから始めることができます。(はじめからやり直す場合は画像 ID を取得し直して下さい)

cwebpによる高度なWebP圧縮オプションの有効化

最後に WebP を生成する際に cwebp というプログラムが利用できる場合に有効化する方法を紹介します。

cwebp は Google が提供するプログラムでサーバで有効な場合のみ使えますが、cwebp を使うためにshell_exec()というサーバコマンドを扱う関数を使用します。
そのため、セキュリティホールになる可能性を否定できず、WordPress 公式のプラグインディレクトリには登録できませんでした。

自己責任で以下の ver 0.5.0 をダウンロードしていただいて、アップロードして上書きして下さい。
(エスケープ処理などもしていますが、公式ディレクトリでは不可でした)

https://still-be.com/download/stillbe-image-quality-control-v0.5.0.zip

ver 0.5.0 では以下のオプションが有効になります。cwebp が使えると可逆圧縮が可能になったり、Near-Lossless という可逆圧縮に近い品質で可逆圧縮よりもファイルサイズが小さい圧縮方法も選択できます。
(いずれもサーバが対応している場合のみ)

フック

このプラグインでは様々な hook を用意しているのでプログラム上から制御することも可能です。
テーマやプラグインから制御したい場合にご利用下さい。

特定の条件でのみ設定値を変えたりすることができます。
以下順不同です。

apply_filters( ‘stillbe_image_quality_autoset_alt_uploaded_jpeg_exif’, bool $enabled, array $metadata )

EXIF から Alt を自動設定するかの論理値を返します。true と判定できる値を返すと自動設定されます。

$enabled には設定値が入ります。設定値のフィルター優先度は 1 です。

$metadata にはアップロードしたファイルのメタデータが入ります。

apply_filters( ‘stillbe_image_quality_autoset_alt_credit_prefix’, string $prefix )

Alt に自動設定する文字列の内、撮影者情報の前につく文字列を返します。

初期値は ‘ | Photo by ‘ です。

apply_filters( ‘stillbe_image_quality_autoset_alt_pre_save’, string $alt, array $metadata, int $attachment_id, string $context )

Alt を設定する直前の文字列を返します。

$context は ‘update’ or ‘create’ です。
初回アップロード時以外は ‘update’ になります。

apply_filters( ‘stillbe_image_quality_control_enable_webp’, bool $enabled )

WebP の自動生成の有効化設定を返します。true と判定できる値を返すと自動生成されます。

$enabled には設定値が入ります。設定値のフィルター優先度は 1 です。

apply_filters( ‘stillbe_image_quality_list’, array $qualities )

Image Editor クラス内での圧縮品質の一覧の配列を返します。

デフォルトは以下の配列です。
これに、設定画面での設定値が追加された形になります。

array(
	'thumbnail_jpeg'    => 65,
	'thumbnail_png'     => 9,
	'thumbnail_webp'    => 65,
	'medium_jpeg'       => 75,
	'medium_png'        => 9,
	'medium_webp'       => 75,
	'medium_large_jpeg' => 80,
	'medium_large_png'  => 9,
	'medium_large_webp' => 80,
	'large_jpeg'        => 80,
	'large_png'         => 9,
	'large_webp'        => 80,
	'1536x1536_jpeg'    => 85,
	'1536x1536_png'     => 9,
	'1536x1536_webp'    => 85,
	'2048x2048_jpeg'    => 90,
	'2048x2048_png'     => 9,
	'2048x2048_webp'    => 90,
	'default_jpeg'      => 90,
	'default_png'       => 9,
	'default_webp'      => 90,
	'original_webp'     => 95,
);

配列のキーは、”{size_name}_{type}” になります。

apply_filters( ‘stillbe_image_quality_default_list’, array $qualities )

Image Editor クラス内での圧縮品質の一覧の配列を返します。
‘stillbe_image_quality_list’ フックよりも前に呼ばれ、設定画面での設定値はこのフックで設定されます。(優先度は 1 です)

apply_filters( ‘stillbe_image_quality_control_convert_safename’, bool $enabled )

URL に使用しても安全なファイル名に変換するかの論理値を返します。true と判定できる値を返すと自動設定されます。

$enabled には設定値が入ります。設定値のフィルター優先度は 1 です。

apply_filters( “stillbe_uploaded_image_{$mime_type}_name”, string $wp_generated_name )

保存するファイル名を返します。

画像サイズなどの suffix や拡張子が含まれたファイル名です。

{$mime_type} は、image/jpeg や image/png などの MIME タイプです。

apply_filters( ‘stillbe_image_quality_control_suffix_options’, string $optional_suffix )

ファイル名の最後 (拡張子の直前) に追加する suffix を返します。

$optional_suffix は初期値は ” (空文字) です。

apply_filters( “stillbe_image_quality_control_suffix_options_{$image_editor}”, string $optional_suffix )

ファイル名の最後 (拡張子の直前) に追加する suffix を返します。’stillbe_image_quality_control_suffix_options’ フックの直後に実行されます。

$image_editor には選択された画像処理ライブラリの名前が入ります。’gd’ もしくは ‘imagick’ です。

apply_filters( ‘stillbe_image_quality_control_suffix_q_value’, bool $enabled )

圧縮率の品質を表す suffix をファイル名に追加するかの論理値を返します。true と判定できる値を返すと自動設定されます。

$enabled には設定値が入ります。設定値のフィルター優先度は 1 です。

apply_filters( ‘stillbe_uploaded_image_webp_name’, string $webp_name )

WebP を保存するファイル名を返します。

変更すると自動での WebP 配信ができなくなります。(WebP 対応ブラウザに JPEG や PNG の代わりに WebP を自動配信する場合)

apply_filters( ‘stillbe_image_quality_control_enable_interlace’, bool $enabled )

インターレースやプログレッシブのフラグを追加するかの論理値を返します。true と判定できる値を返すと自動設定されます。

$enabled には設定値が入ります。設定値のフィルター優先度は 1 です。

まとめ

以上、WordPress でアップロードする時の圧縮率を個別に設定できるプラグインの紹介でした。

とりあえずインストールしておけば最適化されると思いますので是非使ってみて下さい!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください