画像を圧縮してサイトの軽量化を図る
あらゆるWEBページにおいて、表示速度の改善は何よりも注力すべき箇所だと思います。
ある事について詳しく知らないから調べている、問題が起こったから対処法を知りたい、新作の洋服を今すぐ買いたい、サービスに申し込みたい等々。
上げればきりがないですが、ユーザーはこのように何かしらの欲求をもってWEBサイトに訪れています。それこそ、このブログ面白い事書いてるなーとブログに訪れてくださる方も少しくらいはいるはずです。
しかし表示速度が遅く、何も表示されないまま数秒…ページが徐々に表示されるのに数秒….ある程度読み込まれたと思ってスクロールしたら画像が読み込まれ始めてガタガタガタっ…
ですよね。むしろ待ってくれるユーザーは凄く優しい人です。
大抵の人は読み込まれないじゃん違うサイト見よう、になるわけです。
前置きが長くなりましたが、そんな機会損失を出さない為にもページの表示に大きくかかわる「画像のサイズ(容量)」を圧縮してくれるプラグインを紹介します。
読み込みにおいて特に時間を要する「画像」のサイズを小さくすることで、少しでも快適にユーザーにブラウジングをしてもらおうというのが今回の目的です。
というわけで紹介するプラグインはこちら
『Compress JPEG & PNG images』
画像圧縮サービス『TinyPNG』のWordPress用プラグインになります。
TinyPNG自体も無料で使えて非常に優秀なサービスですが、プラグインも負けず劣らず使い勝手抜群です。
さっそくプラグインのインストールから始めましょう。
『Compress JPEG & PNG images』導入方法
まずは普段プラグインを導入するのと同じ手順で、ダッシュボードの左メニューから「プラグイン」→「新規追加」でCompress JPEG & PNG imagesを検索します。
すると上図のようにパンダのサムネイルが出てくるかと思いますので、こちらを「インストール」→「有効化」。
有効化すると、「設定」欄にCompress JPEG & PNG imagesの項目が追加されると思います。
これでとりあえずプラグインのインストールは完了です。
それでは設定をしていきましょう。
\プラグインのインストール方法をもう少し詳しく見たい方はこちら/
『Compress JPEG & PNG images』設定方法
ここから少しだけ作業が必要になりますので、一つずつ手順を追って解説していきます。
少し手間がかかるのと、設定画面はすべて英語なのでアレルギー反応が出るかもしれませんが、大丈夫です。
内容自体は非常に簡単ですので手順通りに行えば問題なく設定できるかと思います。
APIキーの設定
APIキーの取得
設定画面を開くとページ上部にこのような警告文が出ているかと思います。
翻訳すると画像の圧縮するならAPIキー取得してね、ということなので、まずはAPIキーを取得しましょう。
TinyPNG – Developer APIにアクセスし、名前と使用するメールアドレスを記入し、「Get your API key」をクリックします。
そうすると登録したアドレス宛に自身のアカウントにログインする為のメールが届きます。
このメールの「Visit your dashboard」からアカウントのページに飛べますので、クリックします。
クリックしたらAPIキーが書いてあるページに飛べると思いますので、APIキーをコピーしておきます。
コピーができたらWordPressの設定画面に戻りましょう!
APIキーを登録する
設定画面の上部にTinify accountという項目があります。ここにAPIキーを記入する欄がありますのでそちらに先ほどコピーしておいたAPIキーをペーストします。
APIキーが間違えていないことを確認したら「保存」をクリックします。
正しくAPIキーが認識されればYour account is connectedと表示されます。ここまでは問題ないでしょうか?
次は圧縮する画像に関する設定を行います。
各項目の設定方法
APIキーの設定が終われば後の項目は3つだけです。サクッと設定してしまいましょう。
New image uploads
基本的には一番上を選択すれば問題ないかと思います。
Compress new images in the background・・・メディアに画像をアップした後にバックグラウンドで圧縮処理をかけてくれる設定になります。いつも通りメディアに画像を追加すればあとはプラグイン側で勝手に圧縮をかけてくれているので、余計な手間がありません。
特にこだわりが無ければこの設定のままで良いかと思います。
Compress new images during upload・・・こちらに設定しておくと画像をアップしたタイミングで圧縮をかけるようになります。また、その場で全て圧縮するのでその他プラグインと干渉することがありません。圧縮がかかったのが分かりやすいですが、サイズによっては時間がかかるのが難点です。
あまりたくさん画像をアップしない、もしくはプラグインがたくさん入っているような場合はこちらを選択するのも良いかと思います。
Do not compress new images automatically・・・圧縮をしない設定になります。月500枚の画像をあげる事はそんなにないと思いますが、元から小さい画像を上げる時など制限数を増やしたくない場合に一時的にこちらにしておけば圧縮は行われません。
Image sizes
Select image sizes to be compressed・・・どの画像を圧縮するかを選択できます。WordPressでは画像をアップロードした際に本体画像とは別に各サイズの画像が自動で生成されます。またテーマによっても追加で画像が作られますので、それら全てに圧縮を適用させる場合はチェックを入れておきます。
ただ、各サイズ毎に1枚圧縮したとカウントされるので、2サイズ分圧縮するなら制限枚数は実質250枚、4サイズ分なら125枚と制限枚数は減っていきます。
ここは普段の運用との兼ね合いで決めるのが良いかと思います。
Original image
基本的にそのままでいいと思いますが、設定するとしたら「Resize the original image」になります。
大きいサイズの画像素材をダウンロードして使用する場合、そのままだと横幅が2000とか4000というサイズになりますが、ここで幅の上限を設定しておくことで設定値以上のサイズは自動的に設定値の幅までリサイズされます。カラムの幅に合わせておくと大きなサイズのものでも何も考えずにアップロードできてお手軽ですが、「Select image sizes to be compressed」と同様リサイズも圧縮の1枚分としてカウントされますので注意してください。
その下のチェック欄は、上から
・画像の作成日時を画像情報に残しておく
・画像の著作権情報を残しておく
・GPS(位置情報)を残しておく
という設定になります。いわゆる画像のメタデータ部分ですね。
特別理由が無い限りはチェックを外している状態で良いと思います。
以上で設定は終わりです。
あとは通常通り画像をアップロードすれば自動的に圧縮してくれるというわけです。お手軽ですね!
今までメディアにアップした画像も圧縮できる
そんな場合も後からまとめて圧縮することができます。
まずはダッシュボードの「メディア」→「Bulk Optimization」を開きます。
こちらの「Start Bulk Optimization」を押すことで今までアップしてきたすべての画像を圧縮することが可能です。
ただ無料で圧縮できるのは月に500枚までになるので、上図のように500枚を超える場合は追加でかかる費用が計算されて表示されます。
圧縮中は上記の画面を開き続けている必要がありますが、途中で止めた(画面遷移した)場合は途中から再度実行が可能です。
まとめ
という事で画像圧縮プラグインの紹介でした。ページが軽くなる事で、離脱の防止やSEOスコアへの良い影響が見込めます。
運用し始めたばかりで画像が少ない場合でも、今後運用していくとどうしても画像が増えてくると思うので早い段階で対応してしまった方が良いかと思います。
まだ導入していない方はこの機会にぜひインストールしてみてください。