WEBサイトで表示されている画像は、ファイルサイズが大きければ大きいほど、表示しきるまでの時間が長くなってしまいます。せっかく見に来てくれた訪問者も、いつまでもグルグルと読込みが続いていれば待ってくれないでしょう。
自分に置き換えて考えれば簡単に想像できますね。分からないことがあって今すぐ知りたい。検索して早く助かりたい。そんな状況で”グルグルページ”に到着したら、他のサイトを探してみたくなるものです。
そんな時に重宝するのが画像圧縮サービス。WEBサービスもWordPressプラグインもたくさんありますが、その中でも特にWordPressプラグイン【Compress JPEG & PNG images】を紹介します。
Compress JPEG & PNG imagesの特徴
【Compress JPEG & PNG images】は、アップロード画像を圧縮してくれるWordPressプラグイン。あの有名なWEBサービスTinyPNG のプラグインバージョンです。
パンダかわいい。
TinyPNGはしっかり画像圧縮してくれる割に、綺麗な状態を維持してくれることで有名なサービスですね。私にとっては“綺麗さを保つ”というのはとても大切な要素でした。
一度使ってみると分かると思いますが処理結果は非常に優秀で、圧縮に関しても、画像によってはファイルサイズを半分以下にしてくれることも多いです。
という声が聞こえてきそうですが、ブログレベルでの使用には問題ないと言えます。不安であれば、一度WEBサービスの方で試してみることをおすすめします。もちろん無料で利用できます。
で、WEBサービスのほうを使い続けてもいいんですが、画像ごとに毎回アップロード→ダウンロードを繰り返すのは・・・さすがにちょっと面倒ですよね。その点、プラグインをインストールしておけば
というメリットがあります。魅力たっぷり。
Compress JPEG & PNG imagesの導入
さて、そんな便利なプラグイン。WEBサービス同様無料で利用できるんですが、1ヶ月で利用できる画像の枚数制限があります。その枚数制限は…500枚。ええ、十分です。問題ないんです。
500枚を超えたとしても勝手に課金されることも無いので安心です。基本的に無料で使って、万が一超えてしまうことがあれば、WEBサービスの方を使えばいいだけですね。
APIキーの取得
利用するにはまず、APIキー（認証キーのようなもの）を取得します。
「TinyPNG – Developer API 」ページに名前とメールアドレスを入力して「Get your API key」をクリックすると、入力したアドレスにリンク付きのメールが届きます。
メールの「Visit your Dashboard now」ボタンをクリック→リンク先でAPIキーをコピーしておきます。パンダかわいい。
このページはTinyPNGのマイアカウントページのようなものなので、念のためブックマークしておきましょう。ここではAPIキーのほか、今月自分が、プラグインで何枚の画像を圧縮したかの確認もできます。
後述しますが、圧縮した枚数はWordPressの設定画面でも確認できるので、実際にはあまり訪れる機会はありません。再設定が必要になった時にAPIキーを見に行くぐらいでしょう。
プラグインのインストール
管理画面「プラグイン」→「新規追加」で「Compress JPEG & PNG images」を検索。インストールして有効化すると、「設定」→「メディア」の中に項目が追加されています。
まずは「TinyPNG account」項目内の「Already have an account?」の欄に先ほどのAPIキーをペースト。保存すると晴れて利用できるようになります。
Compress JPEG & PNG imagesの設定
プラグインで追加された項目の全体像はこんな感じ （クリックで拡大）
TinyPNG account欄
一番上の「TinyPNG account」欄は先ほどのAPIキー貼り付け欄。なおここでは、現時点での、今月に圧縮した画像枚数が確認できます。無料で利用できるのは500枚まで。では2番目の項目から見ていきましょう。
File compression欄
ここでは圧縮対象とする画像を設定できます。一番上の「Original image」はアップロードするオリジナル画像。その下の「サムネイル」「中」「大サイズ」は、WordPressがデフォルトで自動生成している画像サイズ。アップロードした画像とは別途、生成されている画像ですね。
という人はこちらを参考に。 WordPressを使う上で必ず知っておきたい内容です。
ではその下に並んでいるサイズに関して。「size1」から「size4」は私が使用しているテーマ側からの命令で自動生成されているサイズたちです。トップページのスライダーや、サムネイル画像などに使用されているものですね。なので、この辺りは使用しているテーマによって項目に違いがある部分です。
さらにその下に並ぶ「5 size」から「8 size」は、【Simple Image Sizes】というプラグインで、記事に挿入できる選択肢を自分で増やしているため、表示されています。挿入画像サイズの選択肢が増えると色々と便利なので、こちらもおすすめです。
「Simple Image Sizes」の設定と使い方はこちら
上の記事内でも触れていますが、私はWordPressでデフォルト設定されている自動生成画像は不要のため、生成を解除しています。なので実際の「File compression」欄は下のような状態になっています。（※「サムネイル」「中」「大サイズ」欄が表示されていない状態）
小さい画像は、ファイルサイズはそこまで大きくなりません。そのため私は「Original image」のみチェックを入れていますが、もちろん必要に応じてチェックを入れてください。
小さい画像でも、画像形式によってはファイルサイズは大きくなるので注意が必要です。JPEG、GIF、PNG形式の違いと使い分けはこちらで説明
なお、ここのチェックを全て外せば、それ以降にアップロードした画像への圧縮は行われません。のでとても便利です。
Original image欄
この4つのチェックボックスは、先ほどの「File compression」欄で「Original image」にチェックを入れている場合のみ現れます。
Resize and compress the orginal image
ここにチェックを入れない状態であれば、アップロードされたオリジナルサイズの画像に無条件で圧縮が行われます。
チェックを入れた場合、下の「幅の上限」または「高さの上限」欄で指定したいずれかのサイズを超えた場合のみ、圧縮に加えて、指定したサイズへのリサイズも行われることになります。
例えば「幅の上限」「高さの上限」をともに1000に設定し、幅×高さが1200×600の画像をアップロードした場合は、「幅の上限」の設定を超えるため、オリジナル画像は1000×500にリサイズされ、さらに圧縮されます。（縦横比は維持される）
同じ設定で、幅×高さが800×999の画像をアップロードした場合であれば、「幅の上限」も「高さの上限」も超えていないので圧縮のみ行われ、リサイズは行われません。
ここで設定することで、“欲しいサイズ”かつ”圧縮されている”画像を手に入れられるようになっているわけですね。ただし、月ごとの圧縮可能枚数は半減しますし、「Simple Image Sizes」を使っていれば、欲しいサイズは既に欲しいだけ作れてしまっているので、その場合ほぼ必要としない項目となります。
Preserve creation date and time
「Preserve creation date and time in the original image (JPEG only)」にチェックを入れると、画像形式がJPEG形式の場合のみ、画像に組み込まれている作成日情報を保存しておくことができます。
Preserve copyright information
「Preserve copyright information in the original image」にチェックを入れると、画像に組み込まれている著作権情報を保存しておくことができます。
Preserve GPS location
「Preserve GPS location in the original image (JPEG only)」にチェックを入れると、画像形式がJPEG形式の場合のみ、画像に組み込まれている位置情報を保存しておくことができます。
既にライブラリ内にある画像の圧縮
ここまでの設定は、“設定を保存した以降にアップロードされた画像”に対して有効になります。つまり、既にメディアライブラリ内にある画像には適用されていません。（いきなり適用されても怖い）このプラグインでは、そんな画像たちに対して【一括圧縮】と【個別圧縮】をすることも可能です。
ライブラリ内画像の一括圧縮
これまで設定した圧縮を、メディアライブラリ内の全ての画像に適用したい場合、WordPress管理画面「メディア」→「Bulk Optimization」から進んだ画面で、「Start Bulk Optimization」ボタンを押すことで可能です。
可能ではありますが、手放しでおすすめは出来ません。今までの記事画像全てに影響する処理です。大量の画像を一気に圧縮していくわけですから、その中の数枚に不具合が生じることだって無いとは言えませんよね。不具合の確認も大変になりそうです。
また、無料で圧縮できる月間画像数は500枚。上の画像例では、メディアライブラリ内に1092枚の圧縮対象画像があるため、有料となる旨が表示されています。
ライブラリ内画像の個別圧縮
一括圧縮はちょっと怖いですが、メディアライブラリ画面から個別に選んで圧縮することもできます。これは嬉しい機能です。メディアライブラリから圧縮したい画像を選んで、「Compress」ボタンを押すだけで…
簡単に圧縮できます。で、ついでに注目しておきましょう。「Total savings 70%」とありますね。つまり「70%もダイエットに成功したよ！」ということ。
この画像のオリジナルファイルサイズは787kb。圧縮後の画像を調べてみると、216kb。実際には73%の圧縮に成功しています。そんなに圧縮してたらあからさまに画質に違いが出てきそうですよね。ちょっと比べてみましょう。
上がオリジナル画像。下が圧縮後の画像です。どうでしょう。70%もの違いを感じられますか？環境や目の肥え具合によって異なる意見もあるかもしれませんが、私にはRetinaディスプレイで比較しても70%もの情報量の違いを感じられません。綺麗さを維持する能力の高さも秀逸であることが伝わったかと思います。
話を戻します。ここからさらに、プラグインの設定画面で圧縮対象サイズを増やしてみると…
もう一つのサイズの圧縮待ち状態になります！なんて自由度が高いんだ…
まとめ
Compress JPEG & PNG imagesの魅力
このプラグインを使えばページ表示の高速化に大いに役立ちます。訪問者にとって快適な環境を作る手助けになるでしょう。そして、ユーザビリティーが高くなるということは、よく話題になるPageSpeed Insightsでの評価にも繋がります。
画質維持力も高いため運営者自身も納得。仕事に関係するポートフォリオなどにはもちろん的はずれではありますが、ブログレベルの運営であれば、必ず使っておきたいツールと言えるのではないでしょうか。
今回紹介した【Compress JPEG & PNG images】プラグインは、MacのRetinaをはじめ高解像度化するディスプレイ対策にも重要な役割を担っています。Macでの画像の見栄えが気になる人はあわせて必見です。
