ブログに高解像度の画像を使うと表示が遅くなってしまいがちです。
あなたのブログはその画像のせいで表示が遅くなっていませんか？
ども！管理人のてつです！
上記の問い、私に対して言ってます笑
と言うのも、以前このサイトは非常に重かった。遅かった。それに気付かなかった。。。
自分が使っているWebブラウザから自分のサイトにアクセスしていたので、ブラウザなどのキャッシュのおかけで本来遅く表示されるのが早く表示されてしまい、結果的に自分のサイトの表示速度が遅いことに気付かなかったんですね。
今回はそんなサイト表示速度の改善を目的とした、画像を軽くしてくれる便利プラグインCompress JPEG & PNG imagesをご紹介します。
私はこのプラグインのおかげで重い画像はいかに表示速度を遅くしユーザーの離脱率を高めるかというのを身をもって体験しました汗
もし、画像が重くて表示速度が遅い場合はきっとCompress JPEG & PNG imagesが解決してくれますよ。
ちなみに、サイト表示速度の原因は必ずしも画像だけではありません。今回はあくまで画像に焦点を当てています。表示速度が遅いと感じたら、以下のサイトを使って、どういった要因で遅くなっているのか一度確認することをおすすめします。
スポンサーリンク
Contents
Compress JPEG & PNG imagesとは
画質の劣化を抑えつつ画像のファイルサイズを小さくしてくれるWordPressのプラグインです。
画像を圧縮し小さくすることで、サイトの表示速度を上昇させたりサーバーの負荷を減らせたりなど、SEOにも効果的。
サイトの表示速度が遅く感じた場合や、画像を多く使うサイトは重宝するプラグインですね。もちろん、圧縮するので画質は少し劣化してしまうので、画質にこだわっている場合は使わないほうがいいでしょう。と言っても見た目はそんなに変わりませんよ。
ちなみにCompress JPEG & PNG imagesはオンラインで圧縮してくれるTinyPNGのプラグイン版です。
Compress JPEG & PNG imagesプラグインの特徴
プラグインのインストール前にCompress JPEG & PNG imagesの特徴を見ていきましょう。
画像アップロード時に自動で圧縮してくれる
自分のサイトへ画像をアップロードする際に自動で圧縮してくれます。なので手間がかかりません。
設定は私のような素人でも簡単にできちゃう。と言っても設定箇所は少ないので10分もあれば終わっちゃいます。
既にアップロードしている画像も一括圧縮可能
これも嬉しい機能。アップロードしたファイル数が多ければ多いほど作業は大変ですが、一括圧縮ボタンがあるので、既に画像をアップロードしていても、一括圧縮ボタンをポチッと押してしまえば完了です。
もちろん1枚ずつ選択して圧縮もできるので、画質にこだわっている画像は圧縮せずその他は圧縮する、なんて使い方もできます。
1ヶ月に圧縮できる枚数は500枚まで
無料で利用する際、月間500枚までという制限が付きます。
500枚と聞くと案外イケそうな気もしますが、WordPressの設定や使っているテーマによっては、アップロードすると、それとは別のサイズの違う画像を複数枚自動で作成されるようになっています。
これは、例えばサムネイル画像用、関連記事用、サイドバー用などに使うための画像ですね。
画像をエディタに貼り付ける際に自動で表示されるコレです↓
そのため、1枚だけアップロードしても複数枚アップロードしたことになるので、意外と500枚はすぐだったりします。
と言いつつも、私は1ヶ月に500枚を超えたことは一度もありません。
メールアドレスを登録し無料アカウントを作る必要がある
Compress JPEG & PNG imagesプラグインを使う場合、面倒ではありますがメールアドレスを登録し、無料アカウントを作る必要があります。デメリットと感じる部分ではありますが、それ以上の価値はあります！登録方法については次項で説明しますね。
インストール
Compress JPEG & PNG imagesのインストール方法は2つ。
- プラグインから検索
- 自分でアップロードする
今回は簡単なプラグインから検索でインストールしていきます。
①プラグイン検索画面からCompress JPEG & PNG imagesを検索しインストール
②有効化をクリック
③名前とメールアドレスを入力しRegister Accountをクリック
他に画像圧縮プラグインをインストールし有効化していると、以下のメッセージが表示されるので、不要なプラグインを停止しましょう
この画像ではEWWW Image Optimizerが競合している
④入力したメールアドレスに届いたリンクActivate your accountをクリックしアクティベート
⑤API Keyをコピーします
⑥API Keyを入力し保存をクリック
⑦この画面が表示されれば完了です
続いて各設定をしていきましょう。
Compress JPEG & PNG imagesの設定
インストールとAPI keyの入手が終わったら設定に移りましょう。
New image uploads
New image uploadsでは圧縮するタイミングを3つの中から選ぶことができます。ご自分のスタイルに合った項目で大丈夫です。
ちなみに私は一番上のCompress new images in the background (Recommended)にしています。画像を1枚ずつ確認し圧縮したい方は一番下のDo not compress new images automaticallyを選ぶといいでしょう。
- Compress new images in the background (Recommended)：画像をバックグラウンドで圧縮する
- Compress new images during upload：画像をアップロード時に圧縮する
- Do not compress new images automatically：画像を自動で圧縮しない：
Image sizes
Image sizesでは圧縮する対象の画像サイズを選ぶことができます。特にこだわりが無ければ全てチェックを入れると、アップロードしたファイル全て（サムネイル、大サイズ、中サイズetc…）が圧縮されます。
私は全ての項目にチェックを入れています。私は、Original画像（アップロードしたファイル）はGoogleフォトやローカルに保存しているので、サーバーの容量を減らす目的で、Original image (overwritten by compressed image)もチェックを入れています。Original画像は圧縮したくないという方はチェックを外しましょう。
- Original image (overwritten by compressed image)
- Thumbnail – 150×150
- Medium – 300×300
- Medium large – 768x?
- Large – 1024×1024
- Home-thum – 486×290
- Post-thum – 300×200
お使いのテーマやWordPressの設定によって、上記画像サイズや項目が変わってきます。
私が使っているテーマSTORKでは、上記画像サイズとなっています。インストールしているプラグインにもよるので、自分がどの画像を使っているか確認しましょう。
Original image
Original imageではオリジナルイメージの圧縮に関する設定が行えます。特にこだわりが無ければ全てチェックを外して問題ありません。
私は全てチェックを外していますが、注意点を上げるとしたら、上から2〜4つ目の項目。これは画像のExif情報の設定になります。それを残すかどうかの選択になるので、良く分からない場合は全てチェックを外しましょう。
- 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)：画像の位置情報を維持する
Original imageの項目4つは、ひとつ上のImage sizesのOriginal image (overwritten by compressed image)にチェックを入れると表示されます。
設定が終わったら変更を保存をクリックすれば完了です。
続いて一括圧縮と個別圧縮について見ていきましょう。
一括で圧縮する方法
一括で圧縮したい場合はBulk Optimizationから実行できます。既にアップロードしているファイルが多数あり、1つ1つ設定していくのが手間な場合はこちらがおすすめ。
WordPress管理画面から［メディア］−［Bulk Optimization］をクリックします。
左側のAvailable Imagesには、現在サーバー側にアップロードしたファイル数、圧縮していない画像サイズ、一括圧縮した際の料金が表示されています。
500枚を超える場合は一括圧縮した際の料金（ESTIMATED COST）が表示されますが、例え表示されても勝手に料金が発生するわけではありませんのでご安心ください。
- UPLOADED IMAGES：アップロードしてあるファイル数
- UNCOMPRESSED IMAGE SIZES：圧縮していない画像サイズ
- ESTIMATED COST：一括圧縮した際の料金
画面中央下のStart Bulk Optimizationをクリックすれば一括圧縮がスタートします。
個別に圧縮する方法
画像を1つ1つ個別で圧縮したい場合はメディアから設定が可能。
WordPress管理画面から［メディア］−［ライブラリ］をクリックします。
画面右側のCompressionの青色のボタンCompressをクリックすると圧縮が開始されます。
圧縮が完了すると圧縮した枚数と%が表示されます。
メディアライブラリの表示方法はこのボタンで変更できる
Compress JPEG & PNG imagesと一緒に使いたいプラグイン
ここでは、今回ご紹介したCompress JPEG & PNG imagesと一緒に使いたいプラグインをご紹介します。
Imsanity
簡単に画像をリサイズしてくれるプラグイン。
アップロード時に自分が指定した画像サイズに変更してくれるので、いちいちリサイズする必要がありません。また、誤って大きな画像をアップロードしても、自動でリサイズしてくれるので安心。重宝してます。
まとめ
今回は画像を圧縮してくれるWordPressプラグインCompress JPEG & PNG imagesの使い方と注意点をご紹介しました。
- 画像を圧縮するプラグイン
- 一括&個別圧縮可能
- SEOにも効果的
私のこのサイトは、プラグインを導入する前は表示速度なんて目も当てられない数値でした。Google PageSpeed InsightsやGTmetrixで調べた時は本当に驚愕でしたよ。コンテンツが良くて検索結果の1ページ目に表示されたとしてもきっと離脱するだろうなあと。
表示速度が遅いせいで、せっかく自分が書いた記事が読まれないのは避けたいですよね。コンテンツも大事ですが、ユーザーが離れないようにするのも大事ですよね。
もし、自分のサイトが遅いと感じた場合は、Compress JPEG & PNG imagesを使ってみてはいかがでしょうか。
では、サイト表示速度が早い快適なブログライフを。
コメントを残す