【画像を自動圧縮】プラグイン「Compress JPEG & PNG images」について解説！

2019年8月30日2019年9月2日

こんな方に読んでほしい！

wordpress を使っている
ページの容量を小さくし、読み込みしやすくしたい
読み込み途中で見ることを諦める確率を下げたい

webサイトを見るときに読み込みが遅くてイライラした経験、ありませんか？

読み込みが遅い原因はいろいろありますが、

通信速度が遅い　→　ネットワークが原因
スマホやパソコンなどの処理速度が遅い　→　端末が原因
webサイトのデータが大きい　→　webサイトが原因

などが大きな原因でしょう。

webサイトを作る側になるのですから、「3,webサイトのデータが大きい」は自分で対処できる原因です。

読み込みが遅いと、読み込み途中で見ることを諦める確率が高くなり、結果、誰にも見られないwebサイトになります。

またSEOの観点では、読み込み速度も評価の１つになりますので、低評価の原因にもなります。

できる限り読み込みしやすくするために、「Compress JPEG & PNG images」というプラグインを使い画像データの容量を小さくする方法をお伝えします！

画像の自動縮小はこちらのプラグインでも可能です。ぜひご覧ください。

[blogcard url=”https://iblab.net/imagify/”]

1. wordpressプラグイン「Compress JPEG & PNG images」とは？

wordpressのプラグイン「 Compress JPEG & PNG images」は、画像を最適化するためのプラグインです。最適化と難しく書いていますが、画像の読み込み速度を速くするために画像データの容量を小さくすることです。

もっと簡単な言葉を使えば「圧縮」ですね。

プラグインやその設定によっては、あまり圧縮されずに効果が低いものもありますし、圧縮されすぎると画像が荒くなって見にくい画像になってしまいます。

ちょうど良い圧縮具合で、ある程度データサイズを小さくできるプラグインが「Compress JPEG & PNG images」です。

毎月、500枚までは無料で使えます！

2. 画像圧縮プラグイン「Compress JPEG & PNG images」のインストール＆設定

2-1. wordpressの管理画面からインストール

公式プラグインなので、wordpressの管理画面からインストールできます。左側メニューの　プラグイン＞新規追加　をクリックします。

次に「キーワード」欄に「 Compress JPEG & PNG images 」もしくは「 TinyPNG 」をコピー＆ペーストしてください。検索結果が表示されたら「今すぐインストール」をクリックします。

パンダが目印です。

インストールできたら、「有効化」のボタンに変わりますので、クリックして有効化してください。

2-2. アカウント登録・有効化

利用するには、アカウントを作成する必要がありますので、上部のリンクをクリックしてください。

「Compress JPEG & PNG images 」のページに切り替わります。

Tinify accountに「Register new account（新しいアカウントを登録する）」欄がありますので、上段に名前を入力してください。下段にはWordPressに登録されたメールアドレスが表示されますが、変更してもOKです。

入力したら、「Register Account」ボタンをクリックします。

画面の表示が切り替わります。メールが送信されるので、メールの確認をしてください。

翻訳

An email has been sent to activate your account（アカウントを有効にするためのメールが送信されました）

以下のようなメールが届いているので、「Log in with magic link」ボタンをクリックします。

WordPressに戻ると、アカウントが有効になったため表示が変わります。

下段に「500」とありますが、これが今月の上限枚数です。圧縮した枚数分、減っていきます。

2-3. Compress JPEG & PNG images の設定をする

wordpressの管理画面の「設定 > Compress JPEG & PNG images 」に進みます。

2-3-1. New image uploads

翻訳

When should new images be compressed?（新しい画像はいつ圧縮する必要がありますか？）

・Compress new images in the background （Recommended）（バックグラウンドで新しい画像を圧縮する（推奨））

This is the fastest method, but can cause issues with some image related plugins.（これは最速の方法ですが、一部の画像関連プラグインで問題を引き起こす可能性があります。）

・Compress new images during upload（アップロード中に新しい画像を圧縮する）

Uploads will take longer, but provides higher compatibility with other plugins.（アップロードには時間がかかりますが、他のプラグインとの互換性が高くなります。）

・Do not compress new images automatically（新しい画像を自動的に圧縮しないでください）

Manually select the images you want to compress in the media library.（メディアライブラリーで圧縮する画像を手動で選択します）

これは１番上にある推奨されている項目を選べばOKです。

2-3-2. Image size

翻訳

Select image sizes to be compressed（圧縮する画像サイズを選択します）

WordPress generates resized versions of every image. Choose which sizes to compress.（Wordpressは、すべての画像のサイズを変更したバージョンを生成します。圧縮するサイズを選択します。）

圧縮する画像サイズにチェックを入れます。

「WordPress本体」と「使っているテーマ」がそれぞれ必要なサイズの画像を生成しますが、僕の環境では14種類あります。使っているテーマにより枚数は変わりますが、例えば僕の環境で全部にチェックが入っていると、アップロードした画像が1枚でも14枚分を消費します。

月の上限が500枚なので残りは486枚となりますね。そのため、僕はオリジナルの画像と大きいサイズに絞って使っています。

2-3-3. Original image

翻訳

Resize the original image（元の画像のサイズを変更する）

Save space by setting a maximum width and height for all images uploaded.Resizing takes 1 additional compression for each image that is larger.（アップロードされたすべての画像の最大幅と高さを設定して、スペース（＝サーバ容量）を節約します。サイズを変更するには、大きな画像ごとに1つの追加圧縮が必要です。）

幅の上限 [ ]　高さの上限： [ ]

これはチェックを入れておきましょう。幅の上限は、あなたのwebサイトの横幅より少し大きめに合わせて設定してください。インターネットビジネスラボのwebサイトは横幅が1,060pxですが、1,170px（約1.1倍）で設定しています。高さは未入力でも構いません。

翻訳

・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のみ））

文字データは本当にわずかなデータ容量でしかありませんが、少しでも軽いほうが良いので、僕はどの項目にもチェックをいれていません。