画像を自動的に外部で圧縮処理する|Compress JPEG & PNG images

画像を自動的に外部で圧縮処理する|Compress JPEG & PNG images

スポンサーリンク


このページでは自動で画像を圧縮処理してくれる便利なプラグイン【Compress JPEG & PNG images】の出来ること、特徴や使い方、使うための設定についてご紹介しています。

記事を投稿して自分のブログを確認してみると、なんだか表示が遅い。
画像がなかなか表示されない…

画像を減らせば速く表示されるかもしれないです。
でも、画像を使わないと説明が難しい内容もあったりしますよね。

まめのすけ

困ったな~
なんとかできないかなぁ…

あなたのブログ、画像のサイズや容量は気にしてますか?
自動で画像をリサイズ、圧縮してくれる便利なプラグインがあるのをご存知ですか?

パンダでおなじみの画像圧縮サイト『TinyPNG』のプラグイン【Compress JPEG & PNG images】で重い画像データとはサヨナラしましょう。

画像データが軽くなれば、ブログの読み込みも速くなってサーバーの使用容量も減らせます。
自動で圧縮してくれれば、自分の手間もかからずにブログ表示も速くできて言うことなし!

画像圧縮プラグイン【Compress JPEG & PNG images】の特徴や使い方、使うまでの設定についてご紹介します。

説明画像について
説明の画像はクリックすることで拡大します。
小さくて見にくいものは拡大してご確認ください。

長めのページです
各項目について説明しているので、ページは長くなっています。
目次から読みたいところだけ読むことも出来ます。

スポンサーリンク

1.Compress JPEG & PNG images の特徴や使うまでの手順

Compressの特徴と使い方、設定手順

 

TinyPNGってなに?

 

先ほどから出てくる『TinyPNG』ってなんのことだか、初めての方は分からないですよね。

TinyPNGは画像圧縮が出来るWEBサービスサイトのこと。
キャラクターがパンダなので「パンダで圧縮」と言えば知っている人なら通じます。

このページで紹介するプラグインは、TinyPNGのWordpress用プラグインです。
サイトを開くことなく、Wordpressに画像をアップロードすれば自動的に圧縮してくれるというわけです。

 

出来ることはなに?

 

TinyPNGのプラグイン【Compress JPEG & PNG images】で出来ることをまとめました。

  • 画像を自動で圧縮
  • 画像を個別で圧縮
  • 画像を自動でリサイズ

 

あらかじめ設定をしておくことで、画像の圧縮やリサイズを自動でやってくれます。
個別で画像を圧縮することも可能です。

圧縮するときの心配事として、画像が荒くなってしまうこと。
僕も実際に使っていますけど、きれいなままで圧縮してくれます。

画像データの容量はブログの表示速度やサーバーの容量に影響します。
きれいなままで自動的に圧縮されるなら入れておいた方がいいですね。

 

最大の特徴は外部で圧縮処理をすること

 

TinyPNGのプラグイン【Compress JPEG & PNG images】の最大の特徴は、TinyPNG側のサーバーで圧縮処理をしてくれること。

自分のサーバー側で圧縮処理をすると、サーバーのCPU負荷が高くなって自ブログや同じサーバーを借りている他人のブログへもアクセス速度や表示速度への影響が出てしまいます。

外部で圧縮することで、自サーバーへの影響はほぼなく処理できます。
これなら他へ迷惑もかけず、自ブログにも影響ないので安心して使えます。

処理時間は外部で処理していることもあって、少し時間はかかります。
と言っても、それほど気にならない程度の時間です。

処理中も自サーバーに影響なく、外部で圧縮処理をしてくれるのは助かりますね。

 

1ヶ月に500枚の枚数制限あり

 

TinyPNGでは1ヶ月に500枚までは無料で画像を圧縮できます。
500枚を超えた分は有料で、枚数に応じて課金が必要です。

いきなり料金が発生するわけではなく、超過するときはUSDで金額が表示されます。
超過枚数によって金額は違いますので、自分で料金を確認した上で圧縮するか選ぶことが可能です。

500枚も圧縮処理できればほとんどの方は問題ない枚数です。
更新ペースの早い方や画像枚数が極端に多い方であれば気にするくらいかと。

すでにあるブログにインストールして使う場合には、枚数制限には気をつけた方がいいですね。
記事数がそこそこある場合、一気に処理することで500枚はあっという間にいきます。

画像を選んで個別に圧縮することも可能です。
既存ブログで扱う場合には枚数に注意しながら使用してください。

 

使うまでの手順は?

 

【Compress JPEG & PNG images】をWordPressで使うまでの手順をまとめました。

STEP1
API Key の取得
TinyPNGのサイトでAPIを取得する
STEP2
インストールと有効化
プラグインのインストールと有効化をする
STEP3
API Key をプラグインで設定
有効化したプラグインで取得したAPI Key の設定をする
STEP4
圧縮の設定
プラグインで圧縮の設定をする
おしまい

そんなに手順もなく簡単ですよね?
このページを見ている人ならサーバー借りてドメイン取得していると思うので、ドメイン設定よりも簡単です。

この後、STEP1から手順通りに説明します。

 

目次へ戻る

 

2.Compress JPEG & PNG images インストール前の準備

 

手順の通り、まずはSTEP1のAPI key取得をしましょう。

画像圧縮するために【Compress JPEG & PNG images】をインストール・・・
といきたいところですが、事前にやっておく準備があります。

プラグインを使用するためにTinyPNGのAPI keyというものが必要です。
登録手順を画像を交えて説明します。

TinyPNGに登録をする

 

【Compress JPEG & PNG images】プラグインのインストール前TinyPNGでAPI Keyを取得しておきましょう。

プラグインをインストール後、使用するにはAPI Keyを入力する必要があります。
以下のリンクからTinyPNGサイトでAPI Keyを取得するための登録をします。

参考 TinyPNG Developer APITinyPNG

リンク先では以下の画像にも示している通りに入力しましょう。

  1. 名前を入力
  2. E-MAILアドレスを入力
  3. ”Get your API key”をクリック

TinyPNGでAPI-keyを取得する

ボタンをクリックするところまではできましたか?
これで登録作業はOK。

先ほど登録したアドレスにメールが届いているか確認しましょう。

 

TinyPNGでAPI Keyを取得する

 

先ほど登録したアドレスに以下の画像のメールが届いているはずです。
”Visit your dashboard”をクリックしてTinyPNGのサイトにアクセスします。

TinyPNGからのメールを確認する

アクセスすると、あなた専用のAPI keyが発行されています。
下の画像の赤枠内に記載されているAPI keyをコピーしてメモ帳などに貼り付けておきましょう。

TinyPNGのAPIkeyを確認して一時保存する

API keyはプラグインをインストールした後に必要です。
ここまでで登録とAPI keyの取得は完了です。

 

目次へ戻る

 

3.Compress JPEG & PNG images インストールと有効化

 

ここからはSTEP2プラグインのインストールと有効化です。
初めての方は分からないこともあると思うので、この先の手順通りに作業してください。

 

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

 

WordPress管理画面の左側メニューから プラグイン ⇒ 新規追加 とマウスカーソルを動かして『新規追加』をクリックします。

プラグインの新規追加

 

新規追加の画面を開いたら、右上の入力欄に TinyPNG と入力してください。
【Compress JPEG & PNG images】(パンダが目印)が出てきたら『今すぐインストール』をクリックします。

Compressをインストールする

 

これでインストール作業は終了です。

 

プラグインの有効化

 

インストールが完了したら、次は有効化をしましょう。
先ほどまで『今すぐインストール』となっていたところが『有効化』と変わっているので、クリックして有効化します。

Compressを有効化する

 

これで有効化も完了、次は設定をします。
この後の項目で設定画面の画像を交えて説明しますので、焦らずゆっくりやっていきましょう。

 

目次へ戻る

 

4.Compress JPEG & PNG images でAPI keyを設定

 

STEP2まで終わり、ここからSTEP3のAPI keyの設定をします。
プラグインの設定画面からAPI keyを入力しましょう。

 

プラグインの設定画面を開く

 

プラグインの設定画面を開きます。
WordPress管理画面の左側の 設定 ⇒ Compress JPEG & PNG images とマウスカーソルを動かして『Compress JPEG & PNG images』をクリックします。

Compressの設定をする

設定画面は開きましたか?
設定の1番上にある部分はAPI keyを設定する項目です。

CompressでAPIkeyを設定する

赤枠内の項目にAPI keyを設定しましょう。

 

API keyを入力する

 

初期状態では左側に名前と登録アドレスを入力する欄、右側にAPI keyを入力する欄があります。

右側の「Already have an account?」の入力欄にTinyPNGのサイトで登録したアドレスとAPI keyを入力します。
保存ボタンをクリックすれば、少しぐるぐるっとした後に下の画像のように変わります。

CompressでAPIkey設定後の状態

「Your account is connetcted」と表示されれば使用できる状態です。
後は圧縮の設定をすれば完了です。

 

目次へ戻る

 

5.Compress JPEG & PNG images の画像圧縮の設定

 

いよいよSTEP4の圧縮の設定です。
圧縮設定が終われば、あとは自動的に画像圧縮をしてくれます。

設定項目も少ないので、焦らず確実に設定しましょう。

まめのすけ

圧縮設定で最後、もうひとふんばり!

設定項目について

Compressの圧縮設定一覧

 

上の画像は設定画面の全体です。
分からない方は設定の参考になさってくださいね。

項目ごとに赤枠で囲みました。
大きく分けて3項目の設定があります。

圧縮の設定項目

  • New image upload
  • Image size
  • Original image

それぞれの設定項目について説明します。
理解しながら設定を進めましょう。

 

新しい画像をアップロードした時の設定(Original image)

 

『New image upload』は新しい画像をWordPressにアップロード(投稿)したときの設定をする項目です。

Compressの圧縮タイミングの設定

「Compress new images in the background(Recommended)」はオススメになっており、初期状態で選択されています。
バックグラウンドで圧縮処理してくれる設定です。

使用している印象では、画像をアップして気づいたら圧縮されている、といった感じです。

「Compress new images during upload」は新規画像をアップロードした時に圧縮処理をするという設定です。
少し時間がかかること、間違ってアップロードした時にムダになることを考えるとおすすめしません。

「Do not compress new images automatically」は自動で圧縮処理をしないという設定です。
枚数を管理しながら個別に圧縮処理をしていきたい人は、上から3番目の設定にしてもいいですね。

僕は画像の赤枠の設定で使用しています。
特に問題も発生しておらず、快適に使用しています。

個人的には赤枠の設定をオススメします。

 

圧縮対象とする画像のサイズを設定(Image size)

 

『Image size』は、圧縮する画像をサイズ別に指定する項目です。

Compressでの圧縮対象画像の設定

上の画像の赤枠内に複数のサイズの表記があります。
設定は1番上の”Original image”のみチェックを入れます。

オリジナルの画像のみでも圧縮しておけば、あとはサイズの小さいものなのでそれほどの影響もないでしょう。
全てにチェックを入れると、画像1枚をアップしたら8枚の画像を圧縮処理します。

月に500枚の制限を考えるとあっという間に無料範囲の枚数上限を超えそうですね。
他にチェックを入れるなら”Large”くらいでしょうか。

過剰に処理すると簡単に無料範囲の枚数上限に達しますので、ご注意くださいね。

 

自動生成画像をメディア設定で減らそう

 

圧縮設定で1番上以外はWordPressで自動的に生成されるサイズです。
先ほどの画像状態では1つの画像をアップロードすると、オリジナル画像とは別に7種類もの画像をWordPressで自動で生成していることがわかります。

使わないサイズも自動生成しているとなれば、不要サイズの自動生成は止めておきたいところ。
そこで、この機会に設定を見直してしまいましょう。

どこで設定をするかというと、WordPress管理画面の左側メニューにある 設定 ⇒ メディア とマウスカーソルを合わせて『メディア』をクリックします。

WordPressのメディア設定を開く

下の画像のような画面が表示されるます。
画像をアップすると、メディア設定で指定されたサイズとテーマで設定されたサイズの画像はWordPressが自動で生成しています。

WordPressのメディア設定画面

テーマの設定はサムネイル表示などで必要なものです。
なので、自分で変更できるメディア設定だけ見直しましょう。

不要なサイズは全て”0”(ゼロ)に設定することで、画像は自動生成されなくなります。
上の画像の設定を下の画像のように変更しました。

WordPressのメディア設定を変更

中サイズは使用しないので”0”に、大サイズは最大を680の設定にしました。
幅、高さが上限値を超えたときには、縦横比はそのままに上限値以内にリサイズされます。

メディア設定を変更した後に【Compress JPEG & PNG images】の設定を見てみると、下の画像のように変わっています。

WordPressのメディア設定を変更後

中サイズの設定を”0”にしたことで”Medium”のサイズは項目から消えました。
”Large”はメディア設定のサイズに、他のサイズはWordPressやテーマで必要な画像サイズですね。

サーバー容量を少しでも消費しないようにするために、この機会に設定しておくことをおすすめします。

 

オリジナル画像の設定(Original image)

 

『Image size』での設定で”Original image”にチェックを入れた時に表示される設定項目です。

Compressのオリジナル画像の設定

”Original image”の設定は、ブログ運営によって変わってくる項目です。
上から順番に設定の説明をするので、あなたのブログに必要だと思ったら設定してください。

Compressでのオリジナル画像のリサイズ設定

まずは上の画像の赤枠内「Resize the original image」について。

チェックを入れて幅、高さの上限に数値を入れると、設定された上限値を超える画像を縦横比を変えずに上限値に収まるサイズに自動でリサイズしてくれます。

画像の設定時の動作

  • 幅1600、高さ1200の画像をアップしたら、自動で幅1200、高さ900にリサイズ
  • 幅1200、高さ800の画像をアップしたらサイズはそのまま

画像の設定をしている僕の所有するあるブログでは、解説画像もあるのであまり小さくリサイズすると注釈が見えなくなったりします。
このページの画像も注釈が入っていますけど、クリックしても画像が小さくて拡大されないと見づらいですよね?

画像作成時にもサイズに気をつけていますけど、あまりに小さくリサイズするのも難しいブログもあります。
アイキャッチや差し込み画像だけなら幅680くらいにリサイズしてもいいですね。

設定例を参考にあなたの所有するブログの運用を考えながら設定してみてください。

 

Compressのオリジナル画像処理設定のその他項目

つぎは上の画像の赤枠内にある3つの項目について説明します。

画像作成日の保存設定

「Preserve creation date and time in the original image」は「画像の作成日の情報を保存する」という意味です。
作成日情報を保存しておきたいという方はチェックを入れましょう。

僕は少しでも容量を減らしたいこと、そもそも作成日情報は不要なのでチェックは入れていません。

画像著作権の保存設定

「Preserve copyright information in the original image」は「画像に組み込まれている著作権情報を保存する」という意味です。
自作画像(図解など)の多いブログでは入れておいた方がいいですね。

特にイラストは著作権を知らない方が軽い気持ちでコピーしていきます。
自作の画像と権利を守るため、自衛のために入れる必要もありますので検討してみてください。

画像の位置情報の保存設定

「Preserve GPS location in the original image(JPEG only)」は「JPEG画像のみGPS位置情報を保存する」という意味です。
位置情報を保存しておきたい人はチェックを入れましょう。

旅の体験記などをメインとしているブログでは保存されていた方がいいかも…
オリジナル画像を手元に残していればいいかな、とも感じます。

 

最後に「変更を保存」をクリック

 

設定はこれで全て完了!
と、ちょっと待ってください。

Compressの圧縮設定の変更を保存

左下にある『変更を保存』ボタン、最後に忘れずにクリックしてくださいね。
クリックしたら、これで設定は全て完了です!

まめのすけ

設定おつかれさま~!
これで画像圧縮はバッチリだね

 

目次へ戻る

 

スポンサーリンク

6.Compress JPEG & PNG images で既存の画像を圧縮する

 

設定が終わったから、これからは自動で画像を圧縮処理してくれます。
あれ?今までの画像はどうなっちゃうの?

初めてプラグインを扱う方は、どうやってやるのか分からないですよね?
既存の画像を一括で圧縮処理する方法、画像を個別に圧縮する方法を説明します。

既存画像を一括で圧縮処理する

 

すでにある画像を一括で圧縮する方法です。
WordPress管理画面の左側メニューにある”メディア”にマウスカーソルを合わせると『Bulk Optimization』という項目が追加されています。

Bulk Optimizationの場所

 

クリックすると下の画像のように一括処理の画面が表示されます。
左側の赤枠は状態(左から「今の画像数」「未圧縮の画像数」「かかる料金」)、右側の青枠には圧縮した結果で抑えられた容量を表示。

下にある『Start Bulk Optimization』ボタンをクリックすると一括処理を開始します。

既存画像の一括圧縮処理の画面

注意が必要なのは下の画像のとき。
500枚をオーバーすると、圧縮するときに課金が必要になります。

USDで料金が表示されていますね。
TinyPNGのサイトでカード情報を登録して料金を支払う必要があります。

圧縮処理に課金が必要な状態

既存ブログで使用するときにはよくある状態です。
最初だけは料金を支払って処理してしまうのもひとつの手ではあります。

ここまでが既存画像の一括処理の方法です。

 

個別で画像を圧縮処理する

 

つぎに画像を個別で圧縮する方法です。
一括だと料金がかかってしまうけど、個別にやれば回避することは可能。

多少の手間はかかりますけど、無料範囲で圧縮することは可能です。
自分で圧縮する画像を選びましょう。

WordPress管理画面の左側メニューにある メディア ⇒ ライブラリ とマウスカーソルを合わせてクリックします。

メディアライブラリの場所

ライブラリの画面では、個別の画像に圧縮可能な場合にのみ『Compress』ボタンが表示されます。

個別に圧縮可能な画像

ボタンをクリックすれば、処理が始まって圧縮されます。
地味に時間はかかりますけど、無料範囲でやりたいなら個別にボタンをクリック。

ここまでが個別画像を圧縮する方法です。
ご自分に合った方法を選んでやってみてくださいね。

 

目次へ戻る

 

7.さいごに

Compress_さいごに

 

プラグインの設定は覚えることも必要ですけど、慣れてしまえば「これは〇〇の設定だな」と感覚的に分かってきます。
あとは、困ったときにどこを頼れば解決できるかをおさえておくと良いでしょう。

設定はドツボにはまると自力で抜け出すのは難しいことも多いです。
難しい設定、忘れそうな設定を紹介してくれているページはブックマークをおすすめします。

これであなたのブログも重たい画像とはおさらばですね。
読者にとって快適なブログにしていきましょう。


 

スポンサーリンク