※この記事は2018年11月に書かれた記事をリライトしています。
スマホからWordPressへ記事を投稿する際に注意したいのが画像のサイズです。現在のスマホは高画質な美しい写真が撮れると同時に画像のサイズも非常に大きくなっています。
ここで問題なのが、スマホで撮影した画像をそのままWordPressへ投稿してしまうと、サイズが大きく、表示されるまでに時間がかかってしまうことです。表示速度が遅いとユーザーの離脱やGoogleからの評価を下げる原因にもなりかねません。
※追記:WordPress5.3より投稿画像を自動で圧縮してくれる機能が導入されています。
そこで今日は、WordPressへ投稿する画像を自動で圧縮・リサイズする方法をご紹介します。スマホの画像を圧縮せずそのまま投稿している方はぜひ活用してみてください。
スマホで撮影した画像は理想サイズの数十倍の重さ
ブログで画像をサクサク表示させる理想の画像サイズは100KB(キロバイト)前後。特にスマホで快適に表示させたいのなら100KB以下にしたいところです。
ところがスマートフォンで撮影した画像のサイズは3〜4MB(メガバイト)にもなります。これは理想の画像サイズの30〜40倍の大きさにあたります。
ページがなかなか表示されずイライラした経験はありませんか?
サイトの表示が遅い原因の1つが画像サイズ。
調整されていない無圧縮の画像はサイズが大きく、表示に時間がかかります。特に通信速度の遅い外出先でのスマートフォン利用であればなおさらです。
サイトの表示が遅いとリスクもあります。
ユーザーの離脱
表示速度の遅いサイトをコーヒーでも飲みながらおおらかに待ってくれるユーザーはいません。多くのユーザーはGoogleを使い新たな情報を探しにいくはずです。これを「離脱」または「直帰」といいます。
「離脱」したユーザーが再度あなたのブログを訪れることはほぼないと言えます。あなたのページを見ようとしたことすら忘れてしまうでしょう。
検索順位への影響
ブログの生命線ともいえるGoogleの検索順位にも影響を与えます。
Googleは常に「ユーザーにとって使いやすいサイト構築」を呼びかけています。
表示が遅い=ユーザーにとって不便。表示速度が遅いブログよりも表示速度が早い他のブログをGoogleが選ぶのはユーザー体験を大切にするGoogleなら当然のことかもしれません。
画像を自動圧縮するプラグインを利用する
では、スマホから投稿されたサイズの大きな画像を早く表示させるためには?
アプリを使い最適な画像サイズに変換してからアップロード?
ブログを書くたびにサイズ調整の手間が生まれ現実的な方法ではないですね。
WordPressならプラグインを利用することで画像を簡単に圧縮、リサイズすることが可能です。その方法をご紹介します。
利用するプラグインはEWWW Image Optimizerです。
これまで同様に画像をアップロードするだけで指定したサイズに自動で変換し、画像サイズを小さくしてくれる優れもの。設定さえ済ませてしまえばあとは全自動。手軽さが嬉しいですね。
EWWW Image Optimizerのインストール方法
WordPressの管理画面(ダッシュボード)から
[ プラグイン ] →[ 新規追加 ] をクリックします。
検索窓に[ EWWW Image Optimizer ]と入力。
[ 今すぐインストール ]→[ 有効化 ] をクリック。
これでEWWW Image Optimizer がインストールされました。
EWWW Image Optimizerの設定方法
インストールが済んだら設定を変更します。
メニューの[ 設定 ] →[ EWWW Image Optimizer] を選択、設定画面へ入ります。
設定するのは以下の3つ。
ベーシック画面の設定方法
ベーシック画面での設定は1つ。
[ メタデータを削除 ] にチェックし入れます。
メタデータとは、画像に添付されている位置情報やカメラの設定情報のこと。削除しても何ら問題はありませんし、プライバシーに関わる情報なので削除したほうが無難です。
メタデータを削除することで画像サイズも多少小さくなります。
[ 変更を保存 ] をクリックして完了。
リサイズ画面の設定方法
[ 画像のリサイズ ] →[ 幅の上限 ] にブログで使用する画像の横幅を入力します。
横幅のみ入力しておけば高さは自動で調整してくれます。
ブログの横幅がわからない場合は1000としておきましょう。
横幅が1000ピクセルあればほとんどのブログで対応できます。
最後に[ 変更を保存 ] をクリックして完了。
変換画面の設定方法
[ コンバージョンリンクを非表示 ] にチェックを入れます。
このチェックを忘れるとサイズを落とすために画像の種類まで変換されてしまことも。
画像の質を落とすことにもなりかねませんのでチェックを忘れずに。
[ 変更を保存 ] をクリックして完了。
以上でEWWW Image Optimizerの設定は完了です。
サイズ変換を検証する
設定が完了したらスマートフォンから[ メディア ] へ画像をアップロードして検証してみましょう。
メニューより[ メディア ] → [ 新規追加 ] →[ ファイルを選択 ]
スマホ内の画像をWordPressへアップロードします。
アップロードした画像を選択し、[ファイルサイズ] と [ サイズ ] を確認します。
ファイルサイズが指定したサイズになっていることを確認してください。
過去の画像も変換可能
EWWW Image Optimizerでは、すでにアップロード済みの画像も圧縮可能です。
メニューの [ メディア ] に新しく追加されている [ 一括最適化 ] をクリック。
[ 最適化されていない画像をスキャンする ] をクリックすし、
スキャン後 [ 画像を最適化する] ボタンをクリックすればOk。
圧縮率も [ メディア ] からチェックできます。
有料機能を無料で使う方法
とても簡単便利なEWWW Image Optimizerですが、初期設定ではそれほど圧縮率は高くありません。
より高い圧縮率を実現するには有料版の購入が必要になります。
うれしいことにEWWW Image Optimizerには無料で有料版機能を利用できる方法が用意されています。それが、データ提供です。
EWWW Image Optimizer有料版を無料で使う方法
EWWW Image Optimizerに匿名で利用データを提供することで有料版機能が利用できます。クレジットカードなど機密情報が漏れるわけではありませんので、高い圧縮率を手に入れたい方にはオススメです。
方法はメニューから
[ 設定 ] → [ EWWW Image Optimizer ] を開き、
管理画面へ入ります。画面の上に以下の記載が出ています。
[ 許可する ]をクリックすると本文に記載されているメールアドレスへメールが届きますので確認します。
メールに記載されているKEYをコピーします。(key:より右側をコピー)
管理画面へ戻り[ ベーシック ]ページにある[ Optimization API Key ] にコピーしたKeyを貼り付け、一度設定を保存します。
[ JPG 最適化レベル ] のドロップダウンメニューを開きます。
すると、無料版では選択できなかった「プレミアムプラス」などの高圧縮機能が利用できるようになっているはずです。