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

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

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

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

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

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

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

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

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

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

できる限り読み込みしやすくするために、「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 」をコピー&ペーストしてください。検索結果が表示されたら「今すぐインストール」をクリックします。

パンダが目印です。

TinyPNG_01_インストール

 

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

TinyPNG_02_有効化

 

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

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

CompressJPEG&PNGimages_03_アカウント登録が必要

 

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

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

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

CompressJPEG&PNGimages_04_アカウント登録&設定

 

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

CompressJPEG&PNGimages_05_アカウント登録完了のメールを送信したという表示

翻訳

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

 

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

CompressJPEG&PNGimages_06_届いたメールの画像

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

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

CompressJPEG&PNGimages_07_メール確認後の画像

 

 

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

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

CompressJPEG&PNGimages_08_設定0

 

2-3-1. New image uploads

CompressJPEG&PNGimages_08_設定1

 

翻訳

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.(メディアライブラリーで圧縮する画像を手動で選択します)

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

 

2-3-2. Image size

CompressJPEG&PNGimages_09_設定2

翻訳

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

CompressJPEG&PNGimages_10_設定3

翻訳

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のみ))

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

 

3. 画像圧縮プラグイン「Compress JPEG & PNG images」の使い方

対象となる画像ファイルを追加すると自動的に圧縮・サイズ変更を行ってくれるので、使うための操作は必要ありません。

さらに詳しく!

圧縮と画像のサイズ変更を行うとどのくらいファイルサイズが軽くなるか、実際に試してみました!

元画像(ファイルサイズ:1.72MB、サイズ:4,096px × 2,730px

画像圧縮を実施(ファイルサイズ:0.42MB、サイズ:4,096px × 2,730px

圧縮テスト1

画像圧縮・サイズ変更を実施(ファイルサイズ:0.15MB、サイズ:1,170px × 780px

圧縮テスト2

圧縮とサイズ変更を行うと、1.72MBあったデータ容量が0.15MBまで減少しました。約91%も削減できました!

 

4. まとめ

webページが表示されて読めるようになるまで、3秒が理想的な時間と言われています。これが5秒になると、50%以上の人が見るのをやめる(離脱する)というデータもあります。

webサイトの表示は早いに越したことはありません。単なる画像と甘く見ず、できる限り早く表示できるよう対応しましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ