画像の最適化をしておくことはとても重要なことです。画像圧縮をしてあるサイトとしていないサイトでは運営期間が長くなるに従ってページ表示スピードに大きな違いが現れてくることは間違いありません。
そこで今回はワードプレスに画像を挿入するときに必須となる画像圧縮方法をご紹介します。、誰にでも超簡単に画像の圧縮ができる「Optimizilla」を是非チェックしてみてください。
また、プレビュー検証も行ってみましたので是非参考にどうぞ！
コンテンツ
なぜ、最適化が必要なの？
なぜ画像の最適化（圧縮）が必要なのでしょうか？それはSEO対策を考えたときに一番身近に対策できるのが画像圧縮だからです。
冒頭でも説明しましたが画像の容量はサイトのページスピードに大きく影響を及ぼします。もちろん影響を与えるものは画像だけではないのですが、画像は記事を作成する中で最も身近な存在であるということです。
また、ページの表示速度はSEO（検索結果に上位表示させるための施策）にも大きな影響がある要素なのでしっかりと対策を取っておくことが重要です。
※ページスピードが遅いサイトは離脱率も高くなるために画像圧縮は必須です。
Optimizillaのメリット
Optimizillaは以下のようなメリットがあります。ポイントは5つですね！
- インストール不要で使える
- PNGとJPEGに対応
- 複数の画像をまとめて圧縮（最大20枚）
- 画像劣化の確認ができる
- 任意で圧縮率を調整できる
インストール不要で使える
「Optimizilla」はオンライン上で使えます。そのため、インストールや登録の必要がないのでウェブにアクセスすればすぐに使うことができます。。
PNGとJPEGの両方に対応している
JPEGやPNGの両方に対応しているためにサイトやブログに使う画像なら殆ど圧縮できると思います。
最大20枚までまとめて圧縮することができる
サイトやブログに画像を多用する方には、便利な機能だと思います。一気に20枚圧縮できるので効率良さそうですね。
圧縮前と圧縮後の画像を見比べることができる
圧縮したときに気になるのは圧縮した画像がどのくらい劣化しているのか？という点ではないでしょうか？
しかし、そんな悩みも解決できるのがこのOptimizillaです。
2枚の画像を同時に見比べ、納得いくレベルで圧縮することができますので便利な機能といえますね。
圧縮率を手動で調整できる
Optimizillaは手動で最大限に圧縮することができるので、画像の見た目は気にしない！という方にはオススメの機能といえます。
画像容量を最大限まで落とすことができますが、やりすぎは危険です！
容量を気にし過ぎて落としすぎると見た目、見栄えが悪くなり、読者が不快に感じることすらあり得るからです。（イメージ画像ならまだしも解説画像などはちょっと）。
PNGとJPEG画像を同時にドラッグ＆ドロップ
PNGとJPEGの2枚の画像をドラッグ＆ドロップしてして圧縮してみました。
すると、圧縮率〇〇%と圧縮された画像が分かりやすく表示されてきます。
しかし、PNG画像の圧縮率が凄いですよね？
手動で最大限に圧縮したわけでもないのにこのPNG画像のマイナス70%ってちょっと凄いと感じました。ちなみにJPEG画像でもマイナス51%ですからね。
※この圧縮の数値でOKという人は画面中央部「全てダウンロード」をクリックして画像ファイルを保存しましょう。
圧縮画像をドラッグ＆ドロップして使う
圧縮したい画像ファイルを下図の矢印のところ「ここにファイルをドロップします」にドラッグ＆ドロップすれば画像の圧縮が始まります。2～3枚の画像圧縮なら数秒で完了してしまいます。
また、複数のファイルをまとめて圧縮するときにはショートカットキーCtrl+Aを使ってファイルを全選択してからドラッグ＆ドロップすればOKです。
とはいっても最大で20枚までですよ！
便利なショートカットキーの使い方を紹介している記事はこちらです。！
プレビュー確認しながら圧縮可能
プレビュー確認しながら最大限度までの圧縮ができるのがこのプラグインの特徴ともいえます。
下図をご覧いただくとオリジナル画像（左側）とプレビュー画像（右側）に分割されていますよね？この2つを見比べて圧縮することができます。
一番右側の部分に「カラー」と書かれているところがありますが、この部分の数値（30）を＋、－でクリックしながら調整可能です。
では実際に検証していきますね。
※オリジナル画像容量は91キロバイトです。
「カラー」30⇒8
カラーを30から8まで落としてみると、まだ見た目では画像劣化も気にならないレベルです。
しかし、よーく目を凝らしてみてみると多少クロスの部分が劣化しているようにも見えますが、この程度なら全然OKではないでしょうか？
サイトやブログにも全然使えますね。
続いて、「カラー」8⇒4に調整して検証を続けていきます。
「カラー」8⇒4
カラーを4まで落としてみると、さすがにクロスの部分に凸凹が出現してきてかなりの劣化が目立ちますね。
このレベルだと私はブログ画像に使いませんね。
プレビュー数値を確認してみるとなんと圧縮率95％です（笑い）！画像容量はなんと4.4キロバイト！当然ですけど画質は最高に悪くなってます。
「カラー」4⇒2
さらにさらにその半分のカラー2に調整してみます。これはもうどうにもならない酷いレベルです。
絶対にブログに使いたくない！
調整が済んだら「適用」ボタンを押して完了
最終的にカラー2まで落とした結果はというと…適用後の数値は以下のようになりました。
2.6Ｋ（－97％）となりました。－97％です！
個人的に絶対に使わないレベルですが画質にはこだわらないので極限まで画像容量を削りたい人にはおすすめですかね。
以上がWeb画像を圧縮する方法です。それではまた
