![](https://www.netbusiness123.com/wp-content/uploads/2020/05/question-150x150.png)
Webサイトの画像が多くなってきて、ページの表示速度が遅くなりました。何か良い解決方法はないでしょうか?
「ページの表示速度が遅くて他のサイトのページを見に行った」といった経験がある方は多いのではないでしょうか。
ページの表示速度が遅くなる原因のひとつに、「ページに配置しているファイル(画像やCSS、Javascript)サイズが大きい」ことがあげられます。
人間が、分厚い本を読むより、薄い本を読む方が早いのと同じように、コンピューターもファイルサイズが大きいと、読み込む処理に時間がかかります。
とはいえ、画像のファイルサイズを小さくしても、画質が劣化すると見た目が悪くなってユーザーの離脱に繋がります。
ということで、画質の劣化は抑えつつ、画像を圧縮してファイルサイズを小さくする「Compress JPEG & PNG images」というWordPressプラグインを紹介します。
WordPressの画像を圧縮して表示速度を上げる方法
Compress JPEG & PNG images
「Compress JPEG & PNG images」は、オンラインで画像ファイルを圧縮できるWebサービス「TinyPNG」をWordPressで使えるようにしたプラグインです。
画像の圧縮処理は、TinyPNGのサーバーで実行するため、WordPressのサーバーに負荷が掛かりません。
画像を圧縮する度にTinyPNGにアクセスしなくて良くなるのは、非常に便利ですね。
利用には次の条件があります。
1.プラグインをインストールする
WordPress管理画面 -> プラグイン -> 新規追加 -> 「Compress JPEG & PNG images」を検索 -> 今すぐインストール -> 有効化
![install](https://www.netbusiness123.com/wp-content/uploads/2020/06/be478094d64b6441a63d57b936fa4e16-1024x547.png)
リンクをクリックします。
![install](https://www.netbusiness123.com/wp-content/uploads/2020/06/ecba8671792987ef2ca8554099bde4cf-1024x300.png)
2.「TinyPNG」のアカウントを作成する
名前とメールアドレスを入力して「Register Account」をクリックします。
![Register Account](https://www.netbusiness123.com/wp-content/uploads/2020/06/3b0946ebd9c4b0247ab156657d8a913f-1024x452.png)
メールを確認します。メール本文の「Activate your account」をクリックします。
![Activate your account](https://www.netbusiness123.com/wp-content/uploads/2020/06/3125971163479a9a440b87e9fe7f03cc-1024x780.png)
APIキーが付与されます。
![API Key](https://www.netbusiness123.com/wp-content/uploads/2020/06/67c2260c97e2daa0a8cd1cd6fd28f287-1024x526.png)
「Compress JPEG & PNG images」の設定画面をリロードすると認証完了します。
![account is connected](https://www.netbusiness123.com/wp-content/uploads/2020/06/06a0fe74f6702b9782c28c3ce63e1cb2-1024x434.png)
3.プラグインの設定をする
WordPress管理画面 -> 設定 -> 「Compress JPEG & PNG images」
圧縮するタイミング
以下から選択します。
- 画像をバックグラウンドで圧縮する(推奨)
- 画像をアップロード中に圧縮する
- 画像を自動で圧縮しない
![圧縮するタイミング](https://www.netbusiness123.com/wp-content/uploads/2020/06/0c777b263c4d1fd8dbef9cbe9e106bfb-1024x311.png)
圧縮する画像
「Original image (overwritten by compressed image)」はチェックしておきましょう。その他は環境にあわせてチェックしてください。
![圧縮する画像](https://www.netbusiness123.com/wp-content/uploads/2020/06/9f611bf3fbc4fc14cbaa04a9fb05ac57-1024x580.png)
リサイズする画像
全てチェックは不要と思いますが、環境にあわせてチェックしてください。
![リサイズする画像](https://www.netbusiness123.com/wp-content/uploads/2020/06/7fd12946339b6d40d42072ee8e8845cb-1024x303.png)
個別で画像を圧縮する方法
WordPress管理画面 -> メディア -> 「ライブラリ」
圧縮したい画像の「Compress」ボタンをクリックします。(画像では表示されていませんが、赤枠箇所に「Compress」ボタンが表示されます)
![個別で画像を圧縮する方法](https://www.netbusiness123.com/wp-content/uploads/2020/06/ce9e3c7e2492a7b054eaadddaef4abe0-1024x227.png)
一括で画像を圧縮する方法
WordPress管理画面 -> メディア -> 「Bulk Optimization」
- UPLOADED IMAGES:アップロードされている画像の数
- UNCOMPRESSED IMAGE SIZES:圧縮する画像の数
- ESTIMATED COST:費用
内容に問題なければ、「Start Bulk Optimization」をクリックします。
![一括で画像を圧縮する方法](https://www.netbusiness123.com/wp-content/uploads/2020/06/0b02488346da5f2d01833cf4ad97e764-1024x304.png)
46%ほど削減できました。
![](https://www.netbusiness123.com/wp-content/uploads/2020/06/7dfbaa1b1941dc8c25d3160bd0f96f8f-1024x312.png)
まとめ
ページの読み込み速度が遅いという方は、「Compress JPEG & PNG images」を導入してWordPressにアップロードした画像を圧縮してみてください。
また、「Compress JPEG & PNG images」を導入することで、画像をアップロードするたびにTinyPNGのWebサービスを利用する手間が大きく減るので効率化を図れます。
「サーバの容量は下がって、ユーザビリティは上がる」
一石二鳥のプラグインです。
コメント