WordPressの画像を圧縮して表示速度を上げる方法

ブログ

Webサイトの画像が多くなってきて、ページの表示速度が遅くなりました。何か良い解決方法はないでしょうか?

「ページの表示速度が遅くて他のサイトのページを見に行った」といった経験がある方は多いのではないでしょうか。

ページの表示速度が遅くなる原因のひとつに、「ページに配置しているファイル(画像やCSS、Javascript)サイズが大きい」ことがあげられます。

人間が、分厚い本を読むより、薄い本を読む方が早いのと同じように、コンピューターもファイルサイズが大きいと、読み込む処理に時間がかかります。

とはいえ、画像のファイルサイズを小さくしても、画質が劣化すると見た目が悪くなってユーザーの離脱に繋がります。

ということで、画質の劣化は抑えつつ、画像を圧縮してファイルサイズを小さくする「Compress JPEG & PNG images」というWordPressプラグインを紹介します。

WordPressの画像を圧縮して表示速度を上げる方法

Compress JPEG & PNG images

「Compress JPEG & PNG images」は、オンラインで画像ファイルを圧縮できるWebサービス「TinyPNG」をWordPressで使えるようにしたプラグインです。

画像の圧縮処理は、TinyPNGのサーバーで実行するため、WordPressのサーバーに負荷が掛かりません。

画像を圧縮する度にTinyPNGにアクセスしなくて良くなるのは、非常に便利ですね。

利用には次の条件があります。

利用条件
  • 利用には「TinyPNG」のアカウントが必要
  • 月間500枚までは無料
  • 月間501枚からは有料

当月に利用した枚数は次月にリセットされます。

クレジットカードを登録していない場合は、500枚まで無料です。501枚目からは画像の圧縮が実行されずにアップロードされます。費用は発生しませんのでご安心ください。

クレジットカードを登録している場合は、501枚目から有料になります。利用枚数が9,500枚までは1枚あたり$0.009。10,000枚からは1枚あたり$0.002です。

1.プラグインをインストールする

WordPress管理画面 -> プラグイン -> 新規追加 -> 「Compress JPEG & PNG images」を検索 -> 今すぐインストール -> 有効化

install

リンクをクリックします。

install

2.「TinyPNG」のアカウントを作成する

名前とメールアドレスを入力して「Register Account」をクリックします。

Register Account

メールを確認します。メール本文の「Activate your account」をクリックします。

Activate your account

APIキーが付与されます。

API Key

「Compress JPEG & PNG images」の設定画面をリロードすると認証完了します。

account is connected

3.プラグインの設定をする

WordPress管理画面 -> 設定 -> 「Compress JPEG & PNG images」

圧縮するタイミング

以下から選択します。

  • 画像をバックグラウンドで圧縮する(推奨)
  • 画像をアップロード中に圧縮する
  • 画像を自動で圧縮しない
圧縮するタイミング
圧縮する画像

「Original image (overwritten by compressed image)」はチェックしておきましょう。その他は環境にあわせてチェックしてください。

圧縮する画像
リサイズする画像

全てチェックは不要と思いますが、環境にあわせてチェックしてください。

リサイズする画像

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

WordPress管理画面 -> メディア -> 「ライブラリ」

圧縮したい画像の「Compress」ボタンをクリックします。(画像では表示されていませんが、赤枠箇所に「Compress」ボタンが表示されます)

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

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

WordPress管理画面 -> メディア -> 「Bulk Optimization」

  • UPLOADED IMAGES:アップロードされている画像の数
  • UNCOMPRESSED IMAGE SIZES:圧縮する画像の数
  • ESTIMATED COST:費用

内容に問題なければ、「Start Bulk Optimization」をクリックします。

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

ESTIMATED COSTが $0.00 USD であれば、無料です。

有料の場合でも無料枠の範囲内で利用したい時は、プラグイン設定の「Image sizes」でサイズの大きな画像のみをチェックして、圧縮する画像を減らしてください。

無料枠を超えた分は次月に実行することで無料の範囲内で利用が可能です。

46%ほど削減できました。

まとめ

ページの読み込み速度が遅いという方は、「Compress JPEG & PNG images」を導入してWordPressにアップロードした画像を圧縮してみてください。

また、「Compress JPEG & PNG images」を導入することで、画像をアップロードするたびにTinyPNGのWebサービスを利用する手間が大きく減るので効率化を図れます。

「サーバの容量は下がって、ユーザビリティは上がる」

一石二鳥のプラグインです。

コメント

タイトルとURLをコピーしました