ブログで使う画像をプラグインで軽量化してみたお話「TinyPNG – JPEG, PNG & WebP image compression」【ブログ】【プラグイン】【ワードプレス】【初心者】

ぶろぐのはなし アイキャッチ

Pocket

今回はブログ作成に使っているワードプレス(WordPress)のプラグイン導入のお話です。

ワードプレス(WordPress)にプラグインをあまり入れすぎると動作が重くなるという話を聞いてから、ワードプレス(WordPress)になるべくプラグインを入れるのを避けていました。

それでも画像の軽量化のプラグインを入れるメリットの方が大きいかなと思い、この都度導入してみました。

(・ω・)ノ

画像を軽量化してくれるサイト「TinyPNG」さん

TinyPNG

TinyPNG2

TinyPNGさんはパンダが目印の画像の容量を軽量化してくれるサイトさんです。

有料コンテンツもあるそうですが、無料でも最大サイズ5M最大20個までの画像を一度に軽量化してくれます。

私もいつもお世話になっています。

(・ω・)ノ

ただし、サイトかネットの調子が悪いと何度か画像の読み込みをリトライする事になります。

たまにあるんですよね。

σ(^_^;)

TinyPNGさんを使ってブログで使う画像の軽量化をしている出て切った原因の分からないエラーに困っていた時に、他に方法が無いか調べてみたらワードプレス(WordPress)に普通にTinyPNGさんのプラグインが存在しました。

(/・ω・)/ワーイ

このTinyPNGさんのプラグインを導入すればいちいちTinyPNGさんのサイトで画像の軽量化の作業をしてから、ブログに画像を使用するという手間を省けましたね。

もっと早く使いたかったです…

(´-ω-`)

そんなわけで今回はこのTinyPNGさんのプラグインのお話をしたいと思います。

プラグインの正式名前は「TinyPNG – JPEG, PNG & WebP image compression」です。

私が調べた時は情報が古かったのか名前がちょっと違っていましたね。

今回はこのTinyPNGさんのプラグインの導入と、設定のお話をしたいと思います。

(・ω・)ノ

 

プラグイン「TinyPNG」のインストール

まずはプラグインのインストール方法について説明していきます。

TinyPNG1

ワードプレス(WordPress)の管理メニューより、「プラグイン」の中から「新規追加」を選択します。

キーワードに「TinyPNG」と入力すると見つかると思います。

パンダさん、パンダさんが目印です。

TinyPNG3

正式名称は「TinyPNG – JPEG, PNG & WebP image compression」です。見つからなかったら名前を全部入れると出てくると思います。

プラグインが見つかったら今すぐインストールボタンを押してインストール完了です。

上の画像のキーワードが違うのは気にしないでください。

途中でプラグインの名前が変わったのか、調べた時に出てきた名前が上記の画像に入力した名前だったというだけです。

今はキーワードに「TinyPNG」を入力すればTinyPNGさんのプラグインが出てくる事は確認しました。

うまく出てこない場合は「TinyPNG – JPEG, PNG & WebP image compression」を全て入力すると良いでしょう。

TinyPNG4

インストールが終わると「インストール」ボタンが「有効化」ボタンに変わるので、忘れずに有効化しましょう。

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

「TinyPNG」にユーザー登録しましょう

ワードプレスのプラグインの画面より、「TinyPNG」のプラグインがインストールされている事を確認します。

上記の画面になりますが「TinyPNG」のプラグインの設定ボタンがあるので、押して設定画面まで飛びます。

この「setting」ボタン以外でもワードプレスの「設定」からも「TinyPNG」のプラグインの設定画面には移動する事ができます。

「TinyPNG」のプラグインの上記が設定画面になります。

上記画像の赤枠で囲った左側の入力画面がユーザー登録画面です。

「TinyPNG」さんのプラグインを使用するのにユーザー登録が必要なので登録しましょう。

上の項目が任意のユーザーネーム。本名である必要はありません。

下の項目がメールアドレスです。

ユーザー登録の両方の記入が完了したら、一番下の青い「Register Account」ボタンを押して「TinyPNG」さんのアカウントを作成します。

TinyPNG7

ボタンを押すと「TinyPNG」さんの公式アカウントから登録したメールアドレスに連絡がきますので、「Activate your acoont」を押しましょう。

これで登録が完了となります。

「TinyPNG」さんのプラグインの設定

TinyPNG8

インストール後、ワードプレスの「設定」に「TinyPNG」さんのプラグインの設定の項目が増えています。

この「TinyPNG」さんのプラグインの画面に行くと、アカウントの登録が終わった事で以前まではアカウントの登録画面が表示されていましたが別の表示に変更されています。

ここに表示されている「500」枚というのがその月の軽量化可能な画像の残り枚数です。

フリーで使えて500枚ですが、有料版を使う事で軽量化の上限を変更する事が出来ます。

その場合は「Upgrade account」ボタンからアカウントをフリーアカウントから変更しましょう。

私の場合はフリーで使わせてもらう予定なのでこのままでいきます。

500枚というのは多く思えますが、初期設定のままでは実はそんなに多く使えません。

σ(^_^;)

TinyPNG10

「TinyPNG」さんのプラグインの設定画面の下の方に行くと、上記の画面になります。

ここはどの種類の画像を軽量化しますという設定です。

ワードプレス(WordPress)は一枚画像をアップロードすると、その画像を元にサムネイル用の画像など複数の画像を自動で生成します。

私はワードプレス(WordPress)のテーマ「SANGO」を使用していますが、テーマによってどのサイズの画像が自動生成されるのかが変わります。

ややこしいですね。

σ(^_^;)

ルール自体は簡単でチェックが付いている物が軽量化されます。

よくわからない、ブログ内の記事内の画像しか軽量化しない…

とそんな場合はオリジナル画像のみチェックで問題ないでしょう。

自分のワードプレス(WordPress)で自動生成される画像を調べる

TinyPNG9

「設定」→「メディア」より、ワードプレス(WordPress)で自動生成する画像のサイズを選択できます。

ここに表示されている画像は、テーマで使用しているサイズなので基本触らない方が良いでしょう。

ここを変更してしまうとテーマのフォーマットが崩れてしまい事があるそうですので。

ここを見る事で自分が使用しているサイズを確認できるので、どのサイズの画像を「TinyPNG」さんに軽量化して貰えばいいか判断の基準にできます。

「TinyPNG」さんのプラグインの設定画面で、オリジナル画像とここ自動生成しているサイズの画像を全てチェックすると、使用している画像全てが軽量化されるはずです。

もし挙動がおかしいなら他に画像編集系のプラグインをワードプレスに入れていないか確認した方が良いでしょう。

どのプラグイン同士が干渉するかは使っている人しか分かりませんからね…

σ(^_^;)

自動で生成されるサムネイル画像自体もサイズが小さくなっており、それに伴ってサムネイル画像の容量も小さくなっているので、私はオリジナル画像のみの軽量化で良いかなーといった感じです。

使用感も特に問題なし。

私はひと月でだいたい100枚~200枚程度画像を使用しているようなので、

無料ユーザーで上限500枚なら余裕がだいぶあって安心ですね。

一番使いそうなサムネイル画像も軽量化してもいいのかもしれませんが、

上限の半分の250枚だと、画像を間違えて登録した時のやり直しや、画像の投稿が多い月は上限に到達してしまいそうなのでこのままの設定でやってみようと思います。

今回はこんな所です。

(・ω・)ノ

コメントを残す

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

CAPTCHA