画像の圧縮とは? WordPressプラグインCompress JPEG & PNG imagesの使い方

画像の圧縮とは? WordPressプラグインCompress JPEG & PNG imagesの使い方

Webサイトやブログを運用するにあたって、気をつけたいこと。
それはWebサイトの表示速度です。

 

例えば、あなたが検索結果からWebサイトにアクセスをしたとします。

そのときになかなか表示されないようなWebサイトは、読む前に閉じてしまった経験がありませんか?

 

運営者としては、そういった状況は避けたいところ。

 

今回の記事では、画像を圧縮するためのワードプレスのプラグイン「Compress JPEG & PNG images」を紹介します。

画像サイズを軽くしてくれるうえに、画質が粗くなることなく圧縮できるので重宝するプラグインです。

 

山根ただし
サイトに訪問いただきありがとうございます。
このブログの管理人、山根(@Hackagogo)です。
Webページの表示を遅くする要因の一つである「画像」。画像の圧縮は絶対に対策しましょう!

 



 

Webサイトの表示速度がわかる便利なツールを紹介しています。
こちらの記事もあわせて読んでみてください。

関連記事

モバイルファーストインデックスって聞いたことはありますか?   ここ数年、スマートフォン(モバイル)でインターネットを利用する人がものすごい勢いで増えています。   そういった状況を踏まえ、検索エンジンを提供するGoog[…]

モバイルファーストインデックとは?増えるスマホユーザー、その対応方法

 

 

ワードプレスのプラグインCompress JPEG & PNG imagesとは?

 

ワードプレスにアップロードした画像を圧縮してくれるプラグインです。

画像圧縮で有名なWebサービスTinypingのプラグインパージョンといえば、「なるほど」と思う方も多いかも。

 

Tinypingとは?

 

Tinypingとは.pngまたは.jpgファイルをドラッグ&ドロップの簡単操作でファイルサイズを縮小できます。

 

TinypingのWebサイト
▲TinypingのWebサイト。

 

【画像圧縮の方法】

  1. 「Drop your .png or .jpg files here!」のエリアに画像をドラッグ(複数の画像を一緒にドラッグしてもOK)
  2. 自動で圧縮が始まります
  3. 圧縮が完了したらダウンロード

 

画像圧縮の方法
▲画像圧縮の方法。

 

 

下の図は「圧縮前」と「圧縮後」の画像を比較してみました。

48%(105.1 KB)ほどファイルサイズが縮小されていますが、画質はほとんど粗くなっていません。

 

圧縮前と圧縮後の比較
▲圧縮前と圧縮後の比較。

 

広告

 

Compress JPEG & PNG imagesを使うメリット

 

Webサービスでも使いやすいTinypingですが、画像を圧縮するごとに上記の作業をするとなると、結構な手間です。

 

そこで便利なプラグインを利用しましょう。

 

プラグインであればワードプレスに画像をアップロードするだけで、自動的に圧縮してくれます。

 

逆にデメリットは無料で利用できる画像の枚数制限があること。
1カ月で500枚が上限です。

 

ただし、500枚を超えたとしても勝手に課金されることはありませんので、安心してください。
プラグインで500枚を超えたら、Webサービスを使えばOKです。

 

 

プラグインCompress JPEG & PNG imagesの使い方

 

それではCompress JPEG & PNG imagesをインストールして使ってみましょう。

 

APIキーの取得

 

プラグインを利用するためには、APIキーを取得する必要があります。

 

Webサービス「Tinyping」のDeveloper APIのページにアクセス。

名前とメールアドレスを入力して「Get your API key」をクリック

 

「Get your API key」をクリック
▲「Get your API key」をクリック。

 

登録したメールアドレスに確認通知が届きます。

届いたメールを確認して「Visit your dashboard」をクリック

 

届いたメールを確認
▲届いたメールを確認。

 

管理画面に飛ぶので、APIキーを確認します。
(プラグインの設定であらためて利用するので、ブックマークしておきましょう)

 

APIキーを確認
▲APIキーを確認。

 

この管理画面ではワードプレスで圧縮した枚数も確認できます。

 

プラグインCompress JPEG & PNG imagesのインストール

 

まずはワードプレスの管理画面にアクセス。
管理画面→新規追加。

 

ワードプレスの管理画面から新規追加
▲ワードプレスの管理画面から新規追加。

 

 

Compress JPEG & PNG imagesを検索。

 

Compress JPEG & PNG imagesを検索
▲Compress JPEG & PNG imagesを検索。

 

今すぐインストールして有効化します。

 

APIキーの接続

 

インストールが済んだら次に設定を行います。

 

「インストール済みプラグイン」に移動。

Compress JPEG & PNG imagesのSettingsをクリック

 

Settingsをクリック
▲Settingsをクリック。

先ほど取得したAPIキーを「Already have an account?」の欄に入力して「保存」をクリック

 

APIキーを入力して保存
▲APIキーを入力して保存。

 

Your account is connectedと表示されたら接続は完了です。

この「Tinify account」のエリアでも今月に圧縮した枚数を確認できます。
無料で利用できるのは500枚までです。

 

 

広告

 

 

プラグインCompress JPEG & PNG imagesの設定

 

次に設定を見ていきましょう。
英語なのでわかりにくいですが、説明していきますね。

 

New image uploads

 

ワードプレスに画像をアップロードしたときに、自動で「圧縮する」か「圧縮しない」かを選択できます。

 

New image uploadsの設定
▲New image uploadsの設定。

 

Recommended(推奨)とあるように、基本的には「Compress new images in the background (Recommended)」で構いません。

 

「Do not compress new images automatically」を選択すると圧縮しないという設定になります。

 

「Compress new images during upload」は圧縮に時間が掛かってしまうが、他のプラグインと干渉し合わないという安心設定。
心配な方はこちらを選ぶといいでしょう。

 

 

Image sizes

 

ここでは圧縮する画像サイズを指定できます。

 

Image sizesの設定
▲Image sizesの設定。

 

ワードプレスは1枚の画像をアップロードしたとき、大中小サイズ、サムネイル用などいくつかの画像が自動生成されます。

小さい画像のファイルサイズはそこまで大きくなりませんが、一応全部にチェックを入れておくといいと思います。

 

 

Original image

 

このエリアは上記のImage sizesエリアで「Original image」にチェックを入れた場合のみ表示されます。

 

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)」にチェックを入れると、ファイル形式がJPEGの場合のみ、位置情報を保存してくれます。

 

これらは必要に応じて設定すれば大丈夫です。

 

 

設定の完了

 

後に「変更を保存」をクリックして、設定を確定させましょう。

 

「変更を保存」をクリックして、設定を確定
▲「変更を保存」をクリックして、設定を確定。

 

 

広告

 

 

すでにアップロード済みの画像は?

 

プラグインCompress JPEG & PNG imagesをインストール後は自動で画像を圧縮してくれます。

 

ただし、すでにワードプレスにアップロードしてある画像――
つまりメディアライブラリ内にある画像には適用されません

 

その場合、一括で圧縮する方法と個別で圧縮する方法があります。

 

 

一括で圧縮

 

ワードプレスのメディアから「Bulk Optimization」をクリック

「Start Bulk Optimization」をクリックすると一括圧縮が可能です。

 

一括で圧縮する方法
▲一括で圧縮する方法。

 

無料で圧縮できる画像の数は500枚ですから、画像点数に注意してください。

 

 

個別の圧縮

 

メディア→ライブラリから圧縮が可能です。
「Compress」をクリックすると圧縮が始まります。

 

個別の圧縮方法
▲個別の圧縮方法。

 

 

圧縮が完了すると、どのくらい圧縮できたかパーセンテージで表示されます。
かなり圧縮されたことが実感できますね。

 

圧縮率を確認
▲圧縮率を確認。

 

 

広告

 

 

まとめ:画像圧縮の手間はプラグインで軽減しよう

 

運営者の手間が省け、そしてユーザーにとっても易しい。
かなり優秀なプラグインではないでしょうか。

ぜひ活用してみてください。

 

  • モバイルファースト時代において画像圧縮は必ず対応しよう
  • 画像圧縮はプラグインが簡単でおすすめ。
  • プラグインCompress JPEG & PNG imagesは圧縮率が高く、画質も粗くならない

 

山根ただし
目指せ!パラレルワーカー!

 


 

広告
>【LCH式】ブログ改善コンサルティング

【LCH式】ブログ改善コンサルティング

勘や経験に頼らないデータドリブンで、Webサイト・ブログを改善します!

特徴1:
Googleアナリティクスを利用した改善提案

特徴2:
データドリブンマーケティング

特徴3:
ご依頼主に合わせた改善提案

CTR IMG