compress-jpeg-png-images_ecrt

ワードプレス

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方

WEBサイトで表示されている画像は、ファイルサイズが大きければ大きいほど、表示しきるまでの時間が長くなってしまいます。せっかく見に来てくれた訪問者も、いつまでもグルグルと読込みが続いていれば待ってくれないでしょう。

自分に置き換えて考えれば簡単に想像できますね。分からないことがあって今すぐ知りたい。検索して早く助かりたい。そんな状況で”グルグルページ”に到着したら、他のサイトを探してみたくなるものです。

そんな時に重宝するのが画像圧縮サービス。WEBサービスもWordPressプラグインもたくさんありますが、その中でも特に“元画像のきれいさをちゃんと残した上でしっかりとファイルサイズを減らしてくれる”WordPressプラグイン【Compress JPEG & PNG images】を紹介します。

Compress JPEG & PNG imagesの特徴

compress-jpeg-png-images_01

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」をクリックすると、入力したアドレスにリンク付きのメールが届きます。

compress-jpeg-png-images_02

compress-jpeg-png-images_03

メールの「Visit your Dashboard now」ボタンをクリック→リンク先でAPIキーをコピーしておきます。パンダかわいい。

compress-jpeg-png-images_04

このページはTinyPNGのマイアカウントページのようなものなので、念のためブックマークしておきましょう。ここではAPIキーのほか、今月自分が、プラグインで何枚の画像を圧縮したかの確認もできます。

後述しますが、圧縮した枚数はWordPressの設定画面でも確認できるので、実際にはあまり訪れる機会はありません。再設定が必要になった時にAPIキーを見に行くぐらいでしょう。

プラグインのインストール

管理画面「プラグイン」→「新規追加」で「Compress JPEG & PNG images」を検索。インストールして有効化すると、「設定」→「メディア」の中に項目が追加されています。

まずは「TinyPNG account」項目内の「Already have an account?」の欄に先ほどのAPIキーをペースト。保存すると晴れて利用できるようになります。

compress-jpeg-png-images_05

compress-jpeg-png-images_05-2

Compress JPEG & PNG imagesの設定

プラグインで追加された項目の全体像はこんな感じ (クリックで拡大)

compress-jpeg-png-images_06

TinyPNG account欄

一番上の「TinyPNG account」欄は先ほどのAPIキー貼り付け欄。なおここでは、現時点での、今月に圧縮した画像枚数が確認できます。無料で利用できるのは500枚まで。では2番目の項目から見ていきましょう。

File compression欄

compress-jpeg-png-images_07

ここでは圧縮対象とする画像を設定できます。一番上の「Original image」はアップロードするオリジナル画像。その下の「サムネイル」「中」「大サイズ」は、WordPressがデフォルトで自動生成している画像サイズ。アップロードした画像とは別途、生成されている画像ですね。

「??…自動生成している画像?」
という人はこちらを参考に。 WordPressを使う上で必ず知っておきたい内容です。

知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

ではその下に並んでいるサイズに関して。「size1」から「size4」は私が使用しているテーマ側からの命令で自動生成されているサイズたちです。トップページのスライダーや、サムネイル画像などに使用されているものですね。なので、この辺りは使用しているテーマによって項目に違いがある部分です。

compress-jpeg-png-images_07

さらにその下に並ぶ「5 size」から「8 size」は、【Simple Image Sizes】というプラグインで、記事に挿入できる選択肢を自分で増やしているため、表示されています。挿入画像サイズの選択肢が増えると色々と便利なので、こちらもおすすめです。

「Simple Image Sizes」の設定と使い方はこちら 

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法

上の記事内でも触れていますが、私はWordPressでデフォルト設定されている自動生成画像は不要のため、生成を解除しています。なので実際の「File compression」欄は下のような状態になっています。(※「サムネイル」「中」「大サイズ」欄が表示されていない状態)

compress-jpeg-png-images_08

小さい画像は、ファイルサイズはそこまで大きくなりません。そのため私は「Original image」のみチェックを入れていますが、もちろん必要に応じてチェックを入れてください。

小さい画像でも、画像形式によってはファイルサイズは大きくなるので注意が必要です。JPEG、GIF、PNG形式の違いと使い分けはこちらで説明 

知っているつもりの拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

なお、ここのチェックを全て外せば、それ以降にアップロードした画像への圧縮は行われません。プラグイン自体を無効化しなくても、ここのチェックをいじるだけで都度発動と解除を切り替えられるのでとても便利です。

チェック項目をひとつ増やせば、必然的に月間圧縮可能枚数は半減します。

Original image欄

compress-jpeg-png-images_09

この4つのチェックボックスは、先ほどの「File compression」欄で「Original image」にチェックを入れている場合のみ現れます。

Resize and compress the orginal image

ここにチェックを入れない状態であれば、アップロードされたオリジナルサイズの画像に無条件で圧縮が行われます。

チェックを入れた場合、下の「幅の上限」または「高さの上限」欄で指定したいずれかのサイズを超えた場合のみ、圧縮に加えて、指定したサイズへのリサイズも行われることになります。

compress-jpeg-png-images_09

例えば「幅の上限」「高さの上限」をともに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」ボタンを押すことで可能です。

compress-jpeg-png-images_12

compress-jpeg-png-images_13

可能ではありますが、手放しでおすすめは出来ません。今までの記事画像全てに影響する処理です。大量の画像を一気に圧縮していくわけですから、その中の数枚に不具合が生じることだって無いとは言えませんよね。不具合の確認も大変になりそうです。

また、無料で圧縮できる月間画像数は500枚。上の画像例では、メディアライブラリ内に1092枚の圧縮対象画像があるため、有料となる旨が表示されています。

ライブラリ内画像の個別圧縮

一括圧縮はちょっと怖いですが、メディアライブラリ画面から個別に選んで圧縮することもできます。これは嬉しい機能です。メディアライブラリから圧縮したい画像を選んで、「Compress」ボタンを押すだけで…

 クリックで拡大

compress-jpeg-png-images_16

compress-jpeg-png-images_17

簡単に圧縮できます。で、ついでに注目しておきましょう。「Total savings 70%」とありますね。つまり「70%もダイエットに成功したよ!」ということ。

この画像のオリジナルファイルサイズは787kb。圧縮後の画像を調べてみると、216kb。実際には73%の圧縮に成功しています。そんなに圧縮してたらあからさまに画質に違いが出てきそうですよね。ちょっと比べてみましょう。

compress-jpeg-png-images_15

compress-jpeg-png-images_14

上がオリジナル画像。下が圧縮後の画像です。どうでしょう。70%もの違いを感じられますか?環境や目の肥え具合によって異なる意見もあるかもしれませんが、私にはRetinaディスプレイで比較しても70%もの情報量の違いを感じられません。綺麗さを維持する能力の高さも秀逸であることが伝わったかと思います。

話を戻します。ここからさらに、プラグインの設定画面で圧縮対象サイズを増やしてみると…

compress-jpeg-png-images_18

compress-jpeg-png-images_19

もう一つのサイズの圧縮待ち状態になります!なんて自由度が高いんだ…

まとめ

Compress JPEG & PNG imagesの魅力

画質の維持と高圧縮を両立する。

画像をアップロードするたびに自動圧縮してくれる。

設定次第で必要なときにだけ発動させることもできる。

メディアライブラリ内の特定の画像を選んで圧縮できる。

このプラグインを使えばページ表示の高速化に大いに役立ちます。訪問者にとって快適な環境を作る手助けになるでしょう。そして、ユーザビリティーが高くなるということは、よく話題になるPageSpeed Insightsでの評価にも繋がります。

画質維持力も高いため運営者自身も納得。仕事に関係するポートフォリオなどにはもちろん的はずれではありますが、ブログレベルの運営であれば、必ず使っておきたいツールと言えるのではないでしょうか。

 あわせて読みたい記事

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

今回紹介した【Compress JPEG & PNG images】プラグインは、MacのRetinaをはじめ高解像度化するディスプレイ対策にも重要な役割を担っています。Macでの画像の見栄えが気になる人はあわせて必見です。

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIn…
  3. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  2. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  3. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  4. description-video_ec
  5. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  6. retina_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. retina_ecmg
  2. todoist-extension_ecmg
  3. business-books_ecmg
  4. display-speed_ec
  5. tcd-theme-user-review_ecmg
  6. improvement-flow_ecmg
  7. todoist_ec
  8. theme-change_ecrt

ピックアップ記事

  1. jpg-gif-png_ecmg
  2. like-button-card_ecmg-ps
  3. widgetoon-js-count-jsoon_ecmg
  4. todoist-basic_ec-ps
  5. customized-theme-update_ecmg-1-ps
  6. todoist-advanced_ec
  7. todoist-class_ecrt
  8. sns-count-cache_ecmg

強みを見つけて、活かしていこう。

business-books

タスク管理で、自己管理。

todoist

掘り出し記事

  1. todoist-design_ec
  2. feedly-count-problem_ecmg
  3. retina-text-widget_ecrt

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. todoist-constitution_ec
  2. sns-count-cache_ecmg
  3. facebook-page-plugin_ecmg-ps

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps
  1. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  2. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  3. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  4. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  5. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
PAGE TOP