WordPress(ワードプレス)に画像圧縮のためのプラグイン「 Compress JPEG & PNG images 」をインストールする方法と、その画質について図解説します。画質比較はワードプレスの標準の GD と比較します。

画質比較 Compress JPEG & PNG
プラグインのインストール

1.Compress JPEG & PNG images とは?

Compress JPEG & PNG images プラグインは、「 TinyPNG 」社のWebで画像圧縮をする仕組みを利用したものになります。有料のサイトになるのですが、月に500枚までは無料で利用することができます。一般に圧縮率が高く画質が良いとされています。

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

1)Compress JPEG & PNG images を検索

ワードプレスの「プラグイン」>「新規追加」から、「Compress JPEG」と入力して検索します。

2)インストールし有効化する

上記のプラグインをインストールし有効化します。

3)APIキーの登録

(1) TinyPNG のアカウントを作成する

下記のように Compress JPEG & PNG images を使うなら、登録するかAPIキーをとのリンクが、プラグインページにできるのでクリックします。

あるいは「設定」>「Compress JPEG & PNG images」をクリックします。

設定画面の Register new account で、氏名(ニックネーム可)とメールアドレスを入力して「Register Account」をクリックします。

アカウント取得のためのメールが、登録したメールアドレス宛に送られます。

メールを確認すると TinyPNG からパンダのイラスト付きのメールが届いていると思います。「 Activate your account 」をクリックします。

TinyPNG のサイトに飛び、下記の赤枠の場所にAPIキーが表示されます。また、 Description にサイトのアドレスが入っていると思います。

APIキーを確認したら、ワードプレスの設定画面に戻り、「 Change API key 」をクリックします。

空欄に先ほど作成したAPIキーがセットされるので「保存」をクリックします。

(2) すでに TinyPNG のアカウントがある場合

TinyPNG のサイトでAPIキーを確認します。( ※ API dashboard をクリックするとサイトに飛びます)

APIキーを追加するには、「 Add API key 」をクリックします。

設定画面の Already have an account で、APIキーを入力して「保存」をクリックします。

4)有効化の完了

下記のように表示されたら、有効化完了です。

3.Compress JPEG & PNG images の設定方法

有効化するとデフォルトの設定で、画像を圧縮するようになります。設定変更は「設定」>「Compress JPEG & PNG images」で行います。

1)New image uploads

画像圧縮のタイミングを設定します。圧縮をかける画像を手動で選びたい場合は一番下を選んでください。

  • Compress new images in the background : 新しい画像をアップロードした際に、バックグラウンドで圧縮します
  • Compress new images during upload : 新しい画像をアップロード中に圧縮します
  • Do not compress new images automatically : 自動では圧縮をしません

2)Image sizes

圧縮をかける画像サイズを選択します。

TinyPNG では作成する画像1枚当たりで費用が掛かります。500枚までは無料なので、特別な圧縮をかける必要のないものはチェックを外しましょう。チェックしていないものは、ワードプレス標準のGD、あるいは、他のプラグインを入れていればその圧縮方法で作成されます。

3)Original image

上記で Original image にチェックを入れているとメニューが表示されます。アップロードした画像のオリジナルイメージが、「 TinyPNG 」で圧縮され上書きされます。

  • Resize the original image : オリジナル画像のサイズをリサイズします
  • 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) : 画像のGPS位置を保存します(JPEGのみ)

4.画像圧縮の方法

1)画像の自動圧縮

上述「3-1)」の New image uploads を有効にしていると画像のアップロードの際に圧縮されます。注意が必要なのは、この機能はメディアの「新規追加」画面でのみ働きます。記事の画面で画像のアップロードを行った際は、ワードプレスに設定された通常の圧縮方法で圧縮されます。

2)画像の手動圧縮

メディアの「Bulk Optimization」をクリックします。

サイトの画像をすべて圧縮することができます。またその場合の効果とかかる費用についても表示されます。

3)画像単位の手動圧縮

メディアで画像を選択すると、画像単位で圧縮操作ができるはずですが、2019/5/10現在、WordPress 5では機能していないようでボタンが表示されません。

5.画質比較

Compress JPEG & PNG images ( TinyPNG )による圧縮画像と、ワードプレス標準の GD による画像とを比較します。画像上のスライダーを動かして比較してください。

(1) 左 GD 、右 Compress JPEG & PNG images

左が GD 、右が Compress JPEG & PNG images です。画質的には GD の方がエッジがはっきりしていて、色も綺麗です。 Compress JPEG & PNG images の方がモスキートノイズも多くぼやけています。少し色の明暗差も浅くなっているように感じます。GD の方が優秀なのでしょうか?

実は、ファイルサイズが大きく違います。

  • GD:81.9KB
  • Compress JPEG & PNG images: 54.4KB

これだけファイルサイズが違う割には、 Compress JPEG & PNG images もまだ頑張っているようにも思います。まあさすが TinyPNG というところでしょうか。

photoshop-animation-gif-logo01

Photoshopを使ってコマ送り動画 を作成する アニメーションGif

今回は Photoshop を使って複数の写真からコマ送り動画を作成する方法を図解します。最終的にアニメーション Gif として保存します。Photoshop...

ワードプレス画質比較 ImageMagick と Compress JPEG

WordPress(ワードプレス)の画像圧縮方法の違いによる写真画質の比較を行います。今回はワードプレス標準のGDと、プラグイン「Compress JPEG &...
WP-Divi-elegant-themes-logo

写真サイトを作るのにワードプレスのDiviがおすすめな理由

今回はワードプレスの「Divi(by Elegant...

Responsive Photo Gallery 操作が簡単なワードプレスの無料写真ギャラリー

今回は操作がわかりやすくて使いやすいギャラリープラグインの「Responsive Photo Gallery – Images Gallery...

WebM動画に変換する方法 Internet Friendly Media Encoder

今回は無料のアプリを利用して簡単に 次世代フォーマットの WebM に動画を変換する方法について図解します。「 Internet Friendly Media...

Pin It on Pinterest