JPEGアップロード時にSmartJPEGを呼び出し画像を軽量化するWordPressプラグインを開発しました

ウェブ担当の嶋です。

画像を軽量化し、ウェブサイトの表示速度を改善する「SmartJPEG」の Ver.2.0 をリリースしました。対応画像フォーマットに「WebP」を追加するとともに、静止画連番ファイルからアニメーション GIF 画像を生成するなど付加機能が更に充実しています。

そしてこの新しいバージョンのリリースタイミングに合わせて、オープンソースの CMS である「WordPress」から SmartJPEG を呼び出し、アップロードするJPEG画像を SmartJPEG で自動的に処理する「SmartJPEG WordPress プラグイン」をリリースしました。

このプラグインを利用することで、WordPress で使用するJPEG画像のファイルサイズを削減することができ、表示速度の向上が期待できます。特にレスポンシブデザイン対策で実際に表示される画像よりも大きめの画像をアップロードしているような WordPress サイトには効果的です。

ご覧になっているこの「OPTPiX Labs Blog」も WordPress で構築しています。このエントリーの作成に合わせてプラグインを導入し、今後の記事で SmartJPEG で処理された JPEG 画像が使われるように設定を行いましたので、画像のサンプルとともに、プラグインについて解説させていただきます。

WordPress に画像をアップロードしたときに行われている処理

プラグインの説明の前に、WordPress に画像をアップロードしたときにどのような処理が行われているのかを簡単にご説明します。

WordPress に画像をアップロードすると、オリジナルの画像はアップロードフォルダ（通常は /wp-content/uploads/）に保存されます。同じタイミングで、保存された画像を元に3つのサイズの画像が生成されます。3つのサイズは WordPress の「設定」→「メディア」から設定できます。

WordPress のメディアアップロードの設定画面

上記は WordPress の管理画面にある設定画面です。幅と高さが指定できるようになっていますが、リサイズ時はいずれか一方の長辺が上限値になるようリサイズされます。（サムネイルについてはトリミングも設定可能）また、設定値よりも画像サイズが小さかった場合は生成を行わない仕組みになっています。

ちなみに数値を「0」にするとこれらの画像の生成は行われなくなります。

この処理を含め、WordPress が画像の変換や生成を行う場合、デフォルトでは「GD」と呼ばれる画像変換エンジンが使用されています。

SmartJPEG WordPress プラグインを入れたときの処理

SmartJPEG WordPress プラグインを有効にした上で JPEG 画像をアップロードすると、JPEG 画像はSmartJPEG で処理されてから保存されるようになります。変換時の画質はプラグインの設定画面で 7段階から選べるようになっています。

また、上記のメディアの設定で指定したサムネイルなどの画像生成についても SmartJPEG が行うようになります。WordPress 標準のサイズのほか、SmartJPEG WordPress プラグインの設定画面で生成する画像サイズの追加も可能です。

なお、JPEG以外の画像（PNGやGIF）については、WordPress標準のGDで処理が行われます。

編集者は SmartJPEG を使っていることを意識せずに利用できる

先程「JPEG 画像をアップロードすると SmartJPEG で処理してから保存される」と書きましたが、この処理は通常の画像アップロード時の処理を SmartJPEG が肩代わりするような形で行われています。

ですので、記事を書いている人は SmartJPEG での処理を意識して行う必要がありません。

今までどおり WordPress の記事に画像を貼り付けるのと全く同じ手順で作業するだけで SmartJPEG の恩恵を受けることができるので、管理担当者以外の複数のメンバーで記事の投稿を行っているような WordPress サイトでも容易に導入することができます。

SmartJPEG WordPress プラグインで変換した画像のサンプル

それでは実際に SmartJEPG で変換した画像をご覧いただきましょう。元画像は WordPress のプロセスを通さず、直接サーバーにアップロードしたものを使用しています。

レイアウトの関係で、元画像に対しブラウザによる縮小処理が入ってしまっています。画像をクリック、もしくはタップすると別ウインドウで画像だけが開きますのでご確認ください。

サンプル1

サンプル2

サンプル3

画像の内容に応じて適切に軽量化する SmartJPEG

SmartJPEG の設定が同じであっても、海辺の画像と花火の画像とではファイルサイズの削減率が異なります。特に最も画質重視の設定の場合、海辺の画像が 27.1%の削減率なのに対し、花火の画像は 7.7%の削減率にとどまっています。

これはSmartJPEGが、画像によって軽量化の度合いを自動調整しているためです。

海辺の画像のようにシンプルな色合いの画像は強めに軽量化をかけて容量削減しても画像の「荒れ」はあまり目立ちません。しかし、花火の画像のように細かい線や色が散りばめられた画像はちょっと軽量化を強めにかけるだけでザラついたようなノイズが目立ってしまいます。

従来、このような画像ファイル軽量化の「さじ加減」は、デザイナーが画像ごとに試行錯誤しながら調整するしかありませんでした。当然人の手を使うので時間はかかりますし、画像が変更されればまたやり直しとなってしまいます。

SmartJPEG は変換元の画像がどんな画像なのかを解析し、自動的に「この画像はこれくらい軽量化しても大丈夫(見た目が損なわれない)か」を判断し、最適な値で JPEG 圧縮を行います。このため、アップロードのたびに人間が調整したりしなくとも、美しく軽い JPEG 画像をかんたんに使用することができるのです。

プラグインのダウンロードは OPTPiX ヘルプセンターから

SmartJPEG WordPress プラグインは OPTPiX ヘルプセンターからダウンロードできます。WordPress の管理画面上から zip ファイルをアップロードするか、プラグインフォルダに直接配置し、「有効」にすることでご利用いただけます。

ただし、SmartJPEG のインストールが別途必要となります。WordPress が SmartJPEG を呼び出すことができない場合は、画像をアップロードしてもエラーが表示されてしまいますのでご注意ください。

SmartJPEG WordPress プラグインダウンロードページ（OPTPiX ヘルプセンター）

SmartJPEG は WordPress 以外でも活用できます

今回ご紹介したのは SmartJPEG を WordPress から呼び出すプラグインについてですが、WordPress を使っていないサイトであっても、SmartJPEG をシステムに組み込むことで画像の軽量化を行うことが可能です。またこの場合はオプションで PNG やアニメーションGIFなどの軽量化にも対応します。

ご自身のサイトに SmartJPEG を導入した際に、どれくらいの軽量化が図れるのかのレポートについても承っております。EC サイトや不動産物件サイトなどサムネイルも含め使用する画像が多いサイトでどれくらい効果が期待できるのかを、当社のスペシャリストが実際に軽量化した画像とあわせて解説いたします。

ご興味がございましたら、SmartJPEG のサイトからご申し込みください。