MENU

プロフィール

カワテ タカヒト

WordPressと店舗型ビジネスへの集客施策が得意なフリーランス☆27歳で起業→ウェブ制作会社→美容系サービス業を経て48歳で2度目のフリーランスに。山梨県南アルプス市在住。

山梨WordPressmeetup

山梨WordPress meetupを毎月開催しています。ご参加をお待ちしております!

スマホからのブログ投稿で画像サイズを自動縮小する方法

スマホからのブログ投稿で画像サイズを自動で小さくする方法

※この記事は2018年11月に書かれた記事をリライトしています。

スマホからWordPressへ記事を投稿する際に注意したいのが画像のサイズです。現在のスマホは高画質な美しい写真が撮れると同時に画像のサイズも非常に大きくなっています。

ここで問題なのが、スマホで撮影した画像をそのままWordPressへ投稿してしまうと、サイズが大きく、表示されるまでに時間がかかってしまうことです。表示速度が遅いとユーザーの離脱やGoogleからの評価を下げる原因にもなりかねません。

※追記:WordPress5.3より投稿画像を自動で圧縮してくれる機能が導入されています。

そこで今日は、WordPressへ投稿する画像を自動で圧縮・リサイズする方法をご紹介します。スマホの画像を圧縮せずそのまま投稿している方はぜひ活用してみてください。

スマホで撮影した画像は理想サイズの数十倍の重さ

ブログで画像をサクサク表示させる理想の画像サイズは100KB(キロバイト)前後。特にスマホで快適に表示させたいのなら100KB以下にしたいところです。

ところがスマートフォンで撮影した画像のサイズは3〜4MB(メガバイト)にもなります。これは理想の画像サイズの30〜40倍の大きさにあたります。

<!-- wp:paragraph -->
<p>ブログへアップする理想の画像のサイズは100KB(キロバイト)前後。特にスマホでサクサク快適に表示させたいのなら100KB以下にしたいところ。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ところがスマートフォンで撮影した画像のサイズは3〜4MB(メガバイト)にもなります。これは理想の画像サイズの30倍〜40倍にもなります。</p>
<!-- /wp:paragraph -->

画像サイズが大きくなれば当然読み込み速度も低下し、画像の表示も遅くなります。

  • ホームページがなかなか開かない
  • 画像が上から徐々に表示され読み込みが遅い
ページがなかなか表示されずイライラした経験はありませんか?

サイトの表示が遅い原因の1つが画像サイズ。
調整されていない無圧縮の画像はサイズが大きく、表示に時間がかかります。特に通信速度の遅い外出先でのスマートフォン利用であればなおさらです。

サイトの表示が遅いとリスクもあります。

ユーザーの離脱

表示速度の遅いサイトをコーヒーでも飲みながらおおらかに待ってくれるユーザーはいません。多くのユーザーはGoogleを使い新たな情報を探しにいくはずです。これを「離脱」または「直帰」といいます。

「離脱」したユーザーが再度あなたのブログを訪れることはほぼないと言えます。あなたのページを見ようとしたことすら忘れてしまうでしょう。

検索順位への影響

ブログの生命線ともいえるGoogleの検索順位にも影響を与えます。

Googleは常に「ユーザーにとって使いやすいサイト構築」を呼びかけています。

表示が遅い=ユーザーにとって不便。表示速度が遅いブログよりも表示速度が早い他のブログをGoogleが選ぶのはユーザー体験を大切にするGoogleなら当然のことかもしれません。

画像を自動圧縮するプラグインを利用する

では、スマホから投稿されたサイズの大きな画像を早く表示させるためには?

アプリを使い最適な画像サイズに変換してからアップロード?

ブログを書くたびにサイズ調整の手間が生まれ現実的な方法ではないですね。

WordPressならプラグインを利用することで画像を簡単に圧縮、リサイズすることが可能です。その方法をご紹介します。

利用するプラグインはEWWW Image Optimizerです。

利用するプラグインEWWW Image Optimizer
WordPressならプラグインを利用することで画像を簡単に圧縮、リサイズすることが可能です。その方法をご紹介します。

これまで同様に画像をアップロードするだけで指定したサイズに自動で変換し、画像サイズを小さくしてくれる優れもの。設定さえ済ませてしまえばあとは全自動。手軽さが嬉しいですね。

EWWW Image Optimizerのインストール方法

WordPressの管理画面(ダッシュボード)から

[ プラグイン ] →[ 新規追加 ] をクリックします。

検索窓に[ EWWW Image Optimizer ]と入力。

検索窓に[ EWWW Image Optimizer ]と入力。
[ 今すぐインストール ]→[ 有効化 ] をクリック。

これでEWWW Image Optimizer がインストールされました。

EWWW Image Optimizerの設定方法

インストールが済んだら設定を変更します。

メニューの[ 設定 ] →[ EWWW Image Optimizer] を選択、設定画面へ入ります。

設定するのは以下の3つ。

メニューの[ 設定 ] →[ EWWW Image Optimizer]を選択、設定画面へ入ります。

ベーシック画面の設定方法

ベーシック画面での設定は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:より右側をコピー)

メールに記載されているKEYをコピーします。

管理画面へ戻り[ ベーシック ]ページにある[ Optimization API Key ] にコピーしたKeyを貼り付け、一度設定を保存します。

[ JPG 最適化レベル ] のドロップダウンメニューを開きます。

すると、無料版では選択できなかった「プレミアムプラス」などの高圧縮機能が利用できるようになっているはずです。

<!-- wp:paragraph -->
<p>[ JPG 最適化レベル ]のドロップダウンメニューを開きます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>すると、無料版ではグレーで表示され選択できなかった「プレミアムプラス」などの高圧縮機能が利用できるようになっているはずです。</p>
<!-- /wp:paragraph -->

1サイト500枚まで無料で利用できます。
1メールアドレスにつき3500枚まで無料利用できますので、同じメールアドレスで管理している他のWordPressでも同じAPIキーで有料版機能を利用することができます。

必要に応じて、JPG、PNGをプレミアム圧縮に変更してください。

最後に [ 保存 ] を押して完了です。

まとめ

スマートフォンから画像を投稿する際に便利な画像圧縮方法について解説しました。

画像編集経験のない方にとって画像サイズの変更は、意外と手間のかかる厄介な作業です。一度設定してしまえばあとは全自動でリサイズし、圧縮してくれるのはありがたいですよね。画像の表示が遅い、スマホの画像を無調整でアップロードしている方はぜひ設定してみてください。