こんな方に読んで欲しい！
- WordPressプラグイン「Imagify」の使い方や設定方法を知りたい
- ページの容量を小さくし、読み込みやすくしたい
- 画像の読み込み途中で離脱されるのを防ぎたい
Webサイトを見るときに、読み込みが遅くてイライラした経験、ありませんか？
読み込みが遅い原因はいろいろありますが、
- 通信速度が遅い → ネットワークが原因
- スマホやパソコンなどの処理速度が遅い → 端末が原因
- Webサイトのデータが大きい → Webサイトが原因
などが大きな原因です。
Webサイトを作る側は、「3,Webサイトのデータが大きい」は自分で対処できる原因です。
読み込みが遅いと、読み込み途中で離脱する（違うページを見に行ってしまう）確率が高くなり、結果、誰にも見られないWebサイトになります。
またSEOの観点でも、読み込み速度も評価の1つになりますので、低評価の原因にもなります。
できる限り読み込みしやすくするために、まずは「Imagify」というプラグインを使い画像のサイズを小さくする方法をお伝えします！
ブログに画像を挿入する際は、肖像権や著作権など注意しなければなりません。正しい画像の探し方は、こちらの記事で解説しています。
[blogcard url=”https://iblab.net/creative-commons/”]
1. WordPressプラグイン「Imagify」とは？
WordPressのプラグイン「 imagify 」は、画像を最適化するためのプラグインです。
最適化と難しく書いていますが、画像の読み込み速度を速くするために画像データのサイズを小さくすることです。
もっと簡単な言葉を使えば「縮小」や「圧縮」ですね。
プラグインやその設定によっては、あまり圧縮されずに効果が低いものもありますし、圧縮されすぎると画像が荒くなって見にくい画像になってしまいます。
ちょうど良い圧縮具合で、ある程度データサイズを小さくできるプラグインが「Imagify」です。
さらに詳しく！
毎月、25MBまでは無料で使えます。25MBは、画像を125KBとすれば200枚分ですね。
2. 画像圧縮プラグイン「Imagify」のインストール＆設定
2-1. WordPressの管理画面からインストール
公式プラグインなので、WordPressの管理画面からインストールできます。左側メニューの プラグイン ＞ 新規追加 をクリックします。
次に「キーワード」欄に「 Imagify 」をコピー＆ペーストしてください。検索結果が表示されたら「今すぐインストール」をクリックします。
インストールできたら、「有効化」のボタンに変わりますので、クリックして有効化してください。
2-2. アカウント登録
利用するには、Imagify のアカウントを作成する必要がありますので、「SIGN UP. IT’S FREE!」をクリックしてください。
ポップアップでメールアドレスの入力欄が表示されるので、メールアドレスを入力して「SIGN UP」をクリックします。
画面が切り替わったら「 OK 」をクリックしてください。
意訳：あなたのアカウントが作成されました！API key を メールで送ったので、確認してください！
さらに詳しく！
APIは「Application Programming Interface（アプリケーション プログラミング インターフェイス）」の頭文字を取った略称です。
「あるソフトウェアの機能を外部から使えるように共有するための仕組み」と考えてください。例えば楽天トラベルでは、緯度と経度を送ると周辺の泊まれる宿の情報を返してくれるAPIが準備されています。
アフィリエイトにも利用できるので、副業にも使うことができます。
次に、以下のようなメールが届きます。上から4行目のURLは、メールアドレスの確認用なのでクリックしてください。
※ログイン画面が表示されますが、ログインする必要はありません。
下から4行目にAPI key が書かれていますので、全て選択してコピーしておいてください。
2-3. API key を登録する
wordpressの管理画面の「2. Entry your API Key」に進みます。「I HAVE MY API KEY」をクリックします。
さきほどコピーしたAPI key を貼り付けてください。キーボードの Ctrl キーを押しながら C を押すと、貼付けできます。「CONNECT ME」ボタンをクリックします。
画面が切り替わったら「 OK 」をクリックしてください。
意訳：APIキーが有効になりました。画像を最適化するために imagify の設定をしてください。
2-4. 「imagify」の設定をする
WordPressの管理画面の「3. Cofigure it」に進みます。「GO TO SETTINGS」をクリックします。
いくつか設定項目があるので、１つ１つ確認していきます。
① OPTIMIZATION LEVEL ： 「最適化レベル」
最適化のレベルを設定します。NORMAL、AGGRESSIVE、ULTRA の３つのレベルがあり、それぞれの違いは「Try the Visual Comparison」をクリックすると確認できます。
さらに詳しく！
オリジナルの画像と、圧縮後の画像を比べることができます。
② アップロード時に画像を自動で最適化する」
自動で最適化したいので、チェックを入れてください。
③ Backup original images ： 「元の画像のバックアップを取るか」
とりあえずチェックを入れて、バックアップを取っておくことにしましょう。
④ Keep all EXIF data from your images ： 「画像のEXIFデータを保持する」
EXIFデータは、シャッタースピード、露出補正、ISOなど、写真に保存されている情報のことで、記事に使う画像には不要な情報です。こちらはチェックを付けなくて良いでしょう。
⑤ Create webp versions of images ： 「webp形式のファイルを作るかどうか」
webpは、Googleが作った新しい画像のファイル形式です。
結論としては、とりあえずチェックを入れなくて良いです。
さらに詳しく！
軽くて綺麗な画像が表示できるファイル形式なのですが、ブラウザ（InternetExplorer、Edge、Chrome、Firefox などのwebサイトを見るためのソフトウェア）での採用が進んでいません。
例えば、InternetExplorer や Firefox では採用されていません。（＝表示されません。）Chrome も iPhone 版では採用されていません。採用が進んでいないので、まだまだ普及途上のファイル形式です。
⑥ Resize larger images ： 「大きすぎる画像のサイズを変更するか」
これはチェックを入れ、変更後の画像サイズを決めます。画像サイズは使っているwordpressのテーマによって異なります。例えばこのwebサイトであれば、最大幅は1040ピクセルですが、設定を1040ピクセルにしてしまうとちょっと荒くなるので、感覚的には1.2～1.3倍くらいのキリの良い大きさにしておきましょう。1040ピクセルなら、1300ピクセルくらいですね。
さらに詳しく！
「 画像を圧縮すること＝画像のサイズを小さくすること 」ではないのです。ロスレス圧縮方式とか非可逆圧縮方式とか圧縮方式はいろいろあるのですが、詳しいことはgoogle先生に聞いてください。
⑦ Files optimization ： 「ファイルの最適化」
意訳「WordPress が作成する（サムネイルなど）のさまざまな画像のサイズも最適化できます。ただし、画像サイズを追加すると、Imagifyの毎月の使用量が影響を受けることに注意してください！」たくさんのチェック項目がありますが、チェックを入れすぎると毎月25MBがどんどん消化されるので注意が必要です。そもそもサムネイルって小さいので、チェックを全部はずしても良いでしょう。
3. まとめ
Webページが表示されて読めるようになるまで、3秒が理想的な時間と言われています。これが5秒になると、50％以上の人が見るのをやめる（離脱する）というデータもあります。
Webサイトの表示は早いに越したことはありません。単なる画像と甘く見ず、できる限り早く表示できるよう対応しましょう！