画像編集とかしたらMBになってしまったよ…
ブログに写真を載せたいけど、表示速度が遅くなりすぎるからSEO的にもよくないしどうすればいいの？
カメラやスマホで撮った写真てめっちゃ容量大きいですよね。
たまにMB（メガバイト）の写真とかあります。
これをブログに載せると容量が大きすぎてページ速度が低下します。
かといって「低画質で写真を撮るのもな～」って感じですよね。
そこで、私が使っている方法を紹介します。
この方法を使うと画質をほとんど落とさないまま、MB（メガバイト）級の画像も100KB台まで最適化・圧縮することができます。
この記事では、上で紹介した私が実際にやっている方法から使い方まで、実際に画像を最適化・圧縮した結果を出して解説します。
MB（メガバイト）級の画像も100KB台まで最適化・圧縮する方法
私がブログに画像を載せる時に「容量デカ！」となったときに画像容量を小さくする方法は次の2つです。
- ツールで小さくする ←”Optimizilla”というツール（無料）
- プラグインで小さくする ←”EWWW Image Optimizer”というプラグイン
この2つを駆使することで、MB（メガバイト）級の画像も100KB台まで小さくすることが可能です。
ツールは容量が大きすぎるときのみ使用しています。
プラグインはWordPressのメディアにアプロードした画像全てを対象に常時実行（アップロード時に自動実行）しています。
それでは、ツールの使い方とプラグインの設定方法を解説していきますね。
プラグインの設定方法
プラグインはEWWW Image Optimizerです
インストールして有効化すると、設定の中に表示されます
ここからは、EWWW Image Optimizerの設定画面を全て見せます。
基本的に私の設定と同じにすればOKです。
先に設定とは関係ないタブを確認しておきます。
ここから先は、画像をクリックして拡大できるようになっているので、細かくみたい方は画像をクリックしてみてください。
「ベーシック」タブ
「イージーモード」タブ
「上級者向け」タブ
「リサイズ」タブ
「変換」タブ
「WebP」タブ
ツールの使い方
ツールはOptimizillaというオンラインツール（無料）
オンラインイメージ最適化ツールはここからジャンプできます。
「アップロード」ボタンからファイル選択ダイアログを表示させて画像ファイルを選択するか、緑色のエリア内に画像ファイルをドラック＆ドロップして画像ファイルを選択します。
ファイルをアップロードしたら、自動で画像が圧縮されます。比較画像横の「クオリティ」のバーを調整して「適用」ボタンをクリックすれば、圧縮率を自分好みに調整できます。
上の画像をみてもらう53％圧縮されて、その比較画像が表示されています。
半分ぐらい圧縮されたのに違いがほぼないことがわかると思います。
ダウンロードは「個別ダウンロード」と「一括ダウンロード」の２種類できます
このツールは一気に複数の画像を圧縮することが可能です。
個別にダウンロードしたい場合は、それぞれの画像の「ダウンロード」ボタンをクリックします。
一括でダウンロードしたい場合は、「全てダウンロード」ボタンをクリックします。
MB（メガバイト）級の画像で検証（どこまで小さくなるか）
ここでは、ツールとプラグインを合わせて画質を変えずにどれだけ容量を小さくすることができるのか検証してみます。
手順は次の通りです。
- 2.1MBの画像で検証をする
- まずツールの自動圧縮でどれだけ圧縮できたかを検証
- 圧縮後の画像をプラグイン を設定したWordpressにアップロード
- アップロード後どれだけ圧縮されたかを検証
- 圧縮後の画像ファイルを記事に貼り付けて違和感がないか検証
下の画像が①と②の手順が終わった時の検証結果です。
2.1MBの画像が53%圧縮されて、約1MBまで圧縮されています。
この時点では、「圧縮前と圧縮後で違いはない」といえますね。
次の画像が、手順の③と④が終わった時の検証結果です。
1MBあったファイルサイズが835KBまで圧縮されています。
次の画像が、元々2.1MBあった画像を835KBまで圧縮した画像です。
全部で60%ぐらい圧縮をしましたが、細部までパキッとした画像ですね。
検証結果としては、対象の画像の場合だと全部で60%ぐらいファイルサイズを小さくすることができました。
画質に関しても、比較はしていないものの綺麗な仕上がりです。
手間に関してもプラグインは自動圧縮なので、ツールを行う手間だけです。
１ファイルだけだと、いつものWordpressへのアップロードする時間＋20秒ぐらいですね。
まとめ：ページの表示速度が遅い原因のほとんどは画像や動画
表示速度が遅い原因はいろいろありますが、ブログの場合は大体が画像や動画の読み込みに時間がかかっています。
動画に関しては、YouTubeから動画を貼り付けてるだけなら表示速度に影響はほとんどないです。
YouTubeはなぜ動画なのに遅くならないかと言うと、動画の遅延読込みがされているからです。
「動画の遅延読込み」をザックリ説明すると、「再生しながら読込む」ということです。
動画ファイルはとても巨大でGB（ギガバイト）になるものもあります。
そんなファイルを「全て読込んでから再生」とやっていると、読込みだけで5分や10分の待ちが発生します。
そこで、「最初の数秒を読込めたら再生、残りは再生しながら読込む」というのが動画の遅延読込みです。
話がちょっとそれましたが、画像に関して言うと、画像は基本的に動画のように容量が巨大になることは少ないです。
なので、「読込めたところから表示する」といった必要がありません。
こういった背景から、画像は特別な処理を特にされてないことから、容量が大きすぎる画像をページにいくつも貼ってあると遅さが顕著（けんちょ）に出ます。
表示速度が遅いと離脱率もUPしてしまい、SEOにも影響が出るので画像はなるべく小さい物を貼ることをおすすめします。
せめて、1MB以下が好ましいです。
小さな配慮かもしれませんが、こういったことの１つ１つがユーザービリティの向上に繋がり、SEOにも効果が出ると思いますよ。
SEOの考え方はユーザーファーストです。
この記事で紹介したツールとプラグインはこちら
- ツール：Optimizilla（無料）
- プラグイ：EWWW Image Optimizer
人気記事 画像SEO対策で画像検索からの流入でPV数UP（ECサイトは特に重要）