プラグイン

画像圧縮でWordPressをスピードアップ!プラグインで簡単に軽くする方法

画像圧縮でWordPressをスピードアップ!プラグインで簡単に軽くする方法

WordPressブログの表示速度を早くしたい!

すぐにできる対策の一つに、画像圧縮があげられます。

サイトの表示スピードが遅いことによるデメリットはとてつもなく大きいです。

  • せっかく来てくれた訪問者が待ちきれずにページを閉じてしまう
  • Googleからの評価も悪くなり、検索順位が下がってしまう


このことは、Google広告の公式ブログでも記事にされています。

モバイルサイトを閲覧する際、最もイライラする要素を聞いた調査結果

モバイルサイトを閲覧する際、最もイライラする要素を聞いた調査結果
出典:Google公式ブログ
=>モバイルサイト表示速度の重要性と高速化の方法

みずー
みずー
ブログは見られてなんぼなのに、
表示が遅いと来てくれた読者さんが帰ってしまう!


画像の重さはサイトの読み込みを遅くする大きな原因の一つ!

今まで画像圧縮プラグインは『EWWW Image Optimizer』を使っていました。

今回、
『Compress JPEG & PNG images』を試して圧縮率を比較してみたところ、
圧倒的に良かったのでこちらに乗りかえました。

みずー
みずー
WordPressプラグイン
Compress JPEG & PNG images』で

画像を簡単に大幅圧縮する方法をご紹介します!
こんな方におすすめ
  • 画像を圧縮してブログの表示速度をアップしたい
  • プラグインを使って自動で簡単に画像を圧縮したい
  • サイト訪問者の離脱を少なくしたい
  • Googleの評価を上げてSEO対策に役立てたい

画像圧縮プラグイン『Compress JPEG & PNG images』の特徴

Compress JPEG & PNG images』の特徴
  • 画質の劣化を抑えながらファイルサイズを小さくしてくれる
  • 画像を自動で圧縮してくれる
  • 既にメディアライブラリ内にある画像も選んで圧縮できる
  • 必要な時だけ圧縮する設定も可能
  • 月500枚まで無料で圧縮できる

無料版は圧縮が【月500枚まで】という制限がありますが、

大量に画像を使わなければ、じゅうぶんな枚数です。

みずー
みずー
500枚を超えても、自動的に課金が発生したりすることはないので安心です。


画像を圧縮した時の劣化はどのくらい?


みずー
みずー
大幅に圧縮すると、画像劣化が不安ですよね。
圧縮前と圧縮後で比較してみました!


画像圧縮前の花束画像170.9KB
圧縮:167KB

圧縮後の花束画像27.0KB
圧縮:26KB

圧縮後の画像は、元の画像を約84%圧縮したものです。

私個人としては、若干劣化は感じるものの、それほど気にならないレベルでした。

みずー
みずー
画像メインのブログじゃないし、むしろ圧縮率84%を考えると大満足です!

画像圧縮プラグイン『Compress JPEG & PNG images』のインストール方法

みずー
みずー
『Compress JPEG & PNG images』のインストールは簡単です!


『Compress JPEG & PNG images』インストール手順

  1. WordPressのダッシュボードメニューから「プラグイン」→「新規追加」をクリックします。
  2. Wordpressダッシュボードメニューのプラグインから新規追加をクリックする


  3. 右上の検索バーに『Compress JPEG & PNG images』を入力して検索すると、パンダの絵が印象的なプラグインが一番目に出てきます。

    みずー
    みずー
    「今すぐインストール」をクリックして
    インストールを開始しましょう。
  4. Compress JPEG & PNG imagesを検索して「今すぐインストール」をクリックする


  5. インストールが完了したら「有効化」をクリックします。
  6. 有効化をクリックします
みずー
みずー
これでインストールは完了です!
引き続き設定をしていきましょう!

画像圧縮プラグイン『Compress JPEG & PNG images』の設定方法

  1. ダッシュボードの「設定」→「Compress JPEG & PNG images」をクリックします。


    一番上に【Tinify account】の設定欄があります。

    みずー
    みずー
    名前とメールアドレスを入力後、「Register Account」をクリックします。
  2. 名前とメールアドレスを入力し、「Register Account」をクリックします。


  3. 入力したメールアドレス宛に認証メールを送信しました。と表示されます。
  4. 入力したメールアドレス宛に認証メールを送信しました。という文章が表示されます。


  5. 入力したメールアドレスに、「認証メール」が送信されてきます。

    みずー
    みずー
    認証メールの本文中にある
    「Activate your account」ボタンをクリックします。
  6. 認証メール本文中の「Activate your account」をクリックします。


  7. 「Activate your account」をクリックすると、下記の認証完了画面が開きます。
  8. API Keyが表示されます。


  9. WordPressダッシュボードの「設定」→「Compress JPEG & PNG images」をクリックし、設定画面を開きます。
  10. アカウント認証できました。と表示されています。
    みずー
    みずー
    【Tinify account】に「無料プラン」という旨と、今月の残り圧縮可能枚数も表示されています。


  11. 【New image uploads】で画像の圧縮タイミングを設定します。
  12. New image uploadsで画像の圧縮タイミングを選択します。
    みずー
    みずー
    選択肢は以下の3つ!

    Compress new images in the background
      (新しい画像をバックグラウンドで圧縮する)

    「メディアを追加」で画像をアップロードした後に、プラグインのタイミングで画像を圧縮していきます。

    ※プラグイン側ではこれをおすすめとしています。

    みずー
    みずー
    この方法が最速ですが、いくつかの画像関連プラグインで問題を引き起こす可能性があります。


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

    「メディアを追加」で画像をアップロード時に画像を圧縮します。

    みずー
    みずー
    アップロードに時間はかかりますが、他のプラグインとのより高い互換性があります。


    Do not compress new images automatically
      (新しい画像を自動的に圧縮しない)

    みずー
    みずー
    メディアライブラリで圧縮したい画像を手動で選択し圧縮する必要があります。


    私は極力問題が少なく、圧縮のタイミングがわかる方法が良かったので➁を選択しました。

    ただし、アップロードにかかる時間は長くなります。

    みずー
    みずー
    設定後に過去アップロードした画像を圧縮したら、圧縮可能数が残り少なくなりました。


    そのため現在は⓷にして、大きな画像だけを手動で圧縮するようにしています。


  13. 【Image sizes】で圧縮する画像サイズを選択します。


  14. 実はワードプレスでは、一つの画像をアップロードする時、他サイズの画像もいくつか自動生成されます。

    みずー
    みずー
    使用しているWordpressテーマによって、自動生成される画像サイズは違います。

    他サイズの画像は何のために使われる?

    当ブログで使用しているWordpressテーマ『JIN』の場合だと、トップページの最新記事一覧に表示される小さなアイキャッチ画像がその一つです。

    他にもいろいろな箇所で自動生成された小さな画像が使われています。

    圧縮する画像サイズの選択ですが、デフォルト(初期設定)では全てにチェックが入っています。
    いらないサイズがあればチェックを外します。

    WordPressテーマ『JIN』の共同開発者である 赤石カズヤ さんも、
    『Compress JPEG & PNG images』を推奨しています。

    みずー
    みずー
    設定方法をブログに書いていらっしゃるので、参考にさせていただきました!

    『JIN』開発者:赤石カズヤさんのブログ
    プラグインは最小限に!WordPressでおすすめプラグイン集

    私は赤石カズヤさんの設定方法にならって、下の画像のとおり

    • Thumbnail
    • Medium
    • Post-thumbnail

    のチェックを外しました。

    Image data-lazy-sizesを選択します。
    みずー
    みずー
    一番上の「Original image」のみチェックがついていれば、好みで変えてOKです。

    よくわからない場合は、全てチェックでも良いです。


  15. 【Original image】の設定は、必要があれば行います。

  16. みずー
    みずー
    私は特に必要ないので、こちらの設定はしていません。
    Original imageの設定

    【Original image】の設定項目について

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

    みずー
    みずー
    JPEGに限り画像に入っているGPS位置情報を保存できます。


  17. すべての設定が終わったら、一番下にある「変更を保存」ボタンを押します。

  18. みずー
    みずー
    忘れないように注意!
    設定が全て終わったら変更を保存ボタンを押す
みずー
みずー
以上で設定は終了です!おつかれさまでした!


既にメディアライブラリ内にある画像の圧縮方法

プラグインを「自動圧縮する」設定にした場合、設定後にアップロードした画像は自動で圧縮されます。

しかし、過去にアップロードした画像や「自動圧縮しない」設定にした場合は、自動圧縮されません。

みずー
みずー
『Compress JPEG & PNG images』は、画像を簡単な操作で
『一括で圧縮』もしくは『個別に圧縮』することができます。

画像を一括で圧縮する方法

  1. WordPressダッシュボードの「メディア」→「Bulk Optimization」をクリックします。
  2. ワードプレスダッシュボードのメディア→Bulk Optimizationをクリックします。


  3. 【Bulk Optimization】操作画面で画像を一括圧縮できます。
  4. 無料の範囲内(月500枚)で圧縮できる場合は、「Start Bulk Optimization」ボタンが表示されます。

    クリックするとメディアライブラリ内の全ての画像を一括圧縮することができます。

    画像一括圧縮の注意点!

    • 大量の画像を一気に圧縮するため、エラーが起こる可能性がある。
    • 万一エラーが起こった場合、確認作業が大変。
    みずー
    みずー
    画像一括圧縮は簡単で楽ですが、以上のリスクを考えると少しずつ圧縮したほうがいいかもしれません。


    画像を一括圧縮すると無料版の月500枚制限を超えてしまう場合

    みずー
    みずー
    下の画像では、
    「Start Bulk Optimization」ボタンがないですよね。
    これは無料では対応しきれない場合の画面です。
    画像を一括圧縮する時の操作画面

    お金を払って有料版にアップグレードしても良い人は、「Upgrade account」ボタンをクリックして先に進みましょう。

    みずー
    みずー
    無料版で使いたい人は、次で説明する『個別に圧縮』する方法で、とりあえず大きい画像のみを圧縮しましょう。


画像を個別に圧縮する方法


  1. WordPressダッシュボードの「メディア」→「ライブラリ」をクリックします。
  2. ダッシュボードのメディアからライブラリを開く


  3. 今までにアップロードした画像一覧が表示されます。

  4. みずー
    みずー
    画像を圧縮する場合、下の画像の表示形式が使いやすいです。
    メディアライブラリ内の画像が一覧表示されています。


  5. 画像サイズを見るために「Details」をクリックします。
  6. 画像サイズなどの詳細を見るにはDetailsをクリックします。


  7. 画像サイズを見て圧縮する画像を選びます。

  8. みずー
    みずー
    今回は一番上のオリジナル画像が50KB以上のものを圧縮しました。
    画像のサイズなど詳細情報が見られます。


  9. 「Compress」ボタンを押して画像圧縮します。
  10. Compressボタンを押すと画像圧縮します。
みずー
みずー
画像を個別に圧縮することができました。


画像を複数選択して一括圧縮もできます


  1. 圧縮したい画像のチェックボックスにチェックをつけます。
  2. 左上の一括操作のプルダウンメニューから、「Compress Images」を選択します。
  3. 「適用」ボタンを押すと、チェックをつけた画像が一括で圧縮されます。
画像を複数選択して一括圧縮もできます。


画像圧縮した結果は?表示速度は速くなった?

みずー
みずー
50KB以上の画像を全て圧縮した結果、
48.3%圧縮することができました!
画像を圧縮した結果48.3%圧縮できました

画像圧縮の表示速度スコア

画像圧縮前のモバイルの速度スコアは23 画像圧縮前のパソコンの速度スコアは75
みずー
みずー
モバイルの速度スコアが壊滅的!


画像圧縮の表示速度スコア

画像圧縮後のモバイルの速度スコアは28 画像圧縮後のパソコンの速度スコアは80

画像圧縮の結果、

ブログの表示速度スコアはモバイルは23→28、
パソコンは75→80に改善しました。

みずー
みずー
数字だけでなく、体感でも表示スピードが上がったことを実感できました!

まとめ:画像圧縮はサイトの表示速度アップに効果的!

今回、サーバー移転以外のサイトの表示スピードアップ対策として、画像圧縮をおこないました。

その結果、表示速度スコアも改善、体感スピードもアップしたことから、画像圧縮はブログの表示速度アップにかなり効果的だということを実感しました。

みずー
みずー
プラグインを使った画像圧縮は思ったよりも簡単でした!


また、アップロードしたけど使わずボツになった画像も削除することで、
負荷を軽くすることができます。

みずー
みずー
とはいえ、モバイルの表示速度はまだまだ遅い…さらなる改善が必要です。


画像を使っての説明なので、長くてややこしく感じますが、実際はインストールから画像圧縮まで簡単にできます!

表示速度アップにかなり効果的なので、ぜひ試してみてください!

みずー
みずー
最後まで読んでいただき、ありがとうございました!
記事の更新情報などはツイッターで行ってます。
良かったらフォローお願いします!=>みずーのツイッター



=>『ブログ運営』カテゴリに戻る

Wordpressブログの表示速度改善の5つの対策
WordPressブログの表示速度を改善するために行った5つの対策WordPressブログの表示速度を改善するために行った5つの方法をまとめました。すべて初心者にも簡単にできてブログの表示スピードに効果のあった方法です。...

COMMENT

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

CAPTCHA