ワードプレスの画像はしっかり圧縮していますか?軽量化にはこれがおすすめ!

画像圧縮トップイメージブログ関連
スポンサーリンク
こだわり君
こだわり君

こんにちは、「こだわりスタイル」のこだわり君です!

@KodawariStyle

ブログでワードプレスを使用している方!必ずと言っていいほど画像を一緒にアップすると思いますが、しっかり圧縮(軽量化)していますか?
例えば、スマホで撮影した画像をそのままアップするとか・・・。これやってるとかなりマズイですね。ページの表示スピードが遅くなって、SEOにも影響してきますので!

今日は、少し手間ですが一番確実で軽量にする方法をご紹介しますので是非試してみてください。

スポンサーリンク
スポンサーリンク

画像圧縮(軽量化)とは

まず画像を圧縮するというのがどういうことかを簡単に説明しておきます。

スマホ等で撮影するとデータは「jpg」という形式で保存されます。

撮影した画像がスマホ内に保存(jpg)される時点で画像は圧縮されています。

一眼レフのようなカメラになると圧縮される前の「生データ」(RAW)もとり出せますが、専門的でなければほとんどRAWデータを使用する時は無いと思います。

ここでいうアップロードする際の画像圧縮というのは、画像の鮮明さを維持しながら、データ量を減らすことです。

簡単に言うと、パソコン上で映し出される画像は撮影したデータよりもずっと荒くても十分に綺麗に見えるということです。

ですので、必要以上に綺麗な重たいデータをアップロードする必要が無いのです。

逆にそのままアップロードしてしまうと、画像データが必要以上に重たいため表示スピードが落ちてしまい、ページから離脱してしまうことにつながるのと同時に、Googleからの評価も落ちて検索上位を狙うのが難しくなるのです。

だから画像はパソコン上で綺麗に見えるレベルまで圧縮(軽量化)してあげることが大切なのです。

スポンサーリンク

画像を圧縮(軽量化)するにはどんな方法があるの?

ここではワードプレスに画像をアップロードするお話が前提ですので、一番簡単なのは画像圧縮してくれる「プラグイン」を使用することです。

多くの方が使われているますが、やはり圧縮率が低かったり、枚数制限があったします。

こちらは後ほど、リンク先を書いておきますので、「面倒だからこっちでいいよ」という方は、そちらから見てみてください。

1手間増えますが驚くほど軽量化できて画質は見た目わからないレベルなので、私は「プラグイン」ではなくてこちらを使用しています。

Compress JPEG

jpg圧縮

URL https://compressjpeg.com/ja/

こちらのサイト、もちろん登録等も必要ありませんので、上のリンクから飛んでいただきすぐに使用できます。

さっぱりしたサイトですが高機能です!

圧縮できるのは「JPG」以外に「PNG」、「PDF」、「SVG」、「GIF」に対応しています。

「PNG」はもともと圧縮率が低い透過(アルファチャンネル)が可能な保存形式なので、ブログなどでワードプレスにアップロードするなら、大抵は「jpg」でいいと思います。

使い方はいたって簡単ですが説明しましょう。

まずは画像圧縮したい、「jpg」等の拡張子を選びます

タイトルの下の右上に「JPG」、「PNG」、「PDF」、「SVG」、「GIF」のタブがありますので圧縮したい拡張子のタブを選びます。

jpg圧縮2

すぐ下の緑の立体的なボタンの「今すぐ開始」はアドセンス広告なので無視してくださいね。

jpg圧縮3

赤枠の「アップロード」をクリックすると自分のPCからファイルを選ぶようになりますが、その下の大きな赤枠の中に、画像圧縮したいファイルをドラック&ドロップしたほうが早いです。

どちらでもいいのでお好きなほうからどうぞ!

読み込まれた画像はレベルを調整できます

ファイルをドラッグ&ドロップすると下のようになります。

読み込まれると画像がプレビューされて、何パーセント圧縮したのかが表示されます。

jpg圧縮4

画像にもよりますが、大抵は70%以上圧縮されるのでそれで完了でも十分なのですが、画像の彩度などにより、それだけではまだ不十分な時もあります。

そんな時は、プレビューされている画面の中に「歯車」があるのでそこをクリックしてください。

jpg圧縮5

hoverすると歯車が表示されますので、クリックすると下のような画面で画質調整が可能です。

jpg圧縮6

これ、画質の劣化がわかりますか?

こだわり君
こだわり君

もちろんよく見れば

少しだけこの部分が荒れたかな?

というのがわかりますが、比べなければわからないレベルです。

現時点で

オリジナルの228kが圧縮後だと57kで実に-75%も圧縮されています。

これでも十分に画像圧縮されましたが、これでも不十分だという方は、上の写真の右端のスライダーを上下することでさらに圧縮できます。

ワードプレスに画像をアップロードするとなると、理想は40k〜70kくらいに納めておくとスムースに表示されますので、その辺を目安に調整してみてください。

プレビューがあるのでスライダーを上下に動かすと画質を見ながら調整できますので非常に便利ですよ!

最終的に画質を決めたら「適用」をクリックすれば完了です。

「こだわりスタイル」には圧縮し過ぎて荒れてる画像がいくつもあります(笑)

20枚までいっぺんにドラッグ&ドロップでき、一括ZIPでダウンロードできます。

もちろん数枚の場合は最初のプレビュー画面の「ダウンロード」でも可能です。

ダウンロード後は1時間で自動的に削除されますが、即座に削除したいかたはオレンジボタンの「キューを削除」も可能です。

Exif(イグジフ)情報も自動削除

通常撮影した画像には、Exif(イグジフ)という情報が勝手に記録されます。

位置情報、カメラのメーカー、機種、撮影日時、画像方向、ISO感度、光源、フラッシュ、画像圧縮率、などが記録されているので、そのままアップロードするとセキュリティーの観点からも少し問題なのですが、この「Compress JPEG」で圧縮することで、このExif(イグジフ)情報も削除してくれるので安心です。

スポンサーリンク

プラグインでの画像圧縮

圧縮率が低いので私は使用していませんが、多数の方が使用されているワードプレスの画像圧縮プラグインを2種類ほどご紹介しておきます。

EWWW Image Optimizer

ワードプレスで一番有名な画像圧縮プラグインかもしれません。

jpg圧縮7

ワードプレスのダッシュボードから新規プラグインを選択して、検索ボックスに「EWWW Image Optimizer」と入力して「有効化」すればOKですね!

このプラグインは、画像圧縮しないでアップロードした以前の画像まで圧縮してくれて非常に便利です。

新規にアップロードするのはもちろん自動で画像圧縮してくれます。

ただ、圧縮率が低くて「これでいいのか?」というところがあります!

画像圧縮の結果ですが、圧縮後が「EWWW Image Optimizer」を有効化してアップロードした数値です。

圧縮前 336KB → 圧縮後 228KB

割合にして約30%の圧縮ですから、私のおすすめする「Compress JPEG」にはまるで及びませんでした。

Compress JPEG & PNG images

こちらもワードプレスの画像圧縮プラグインとしてはかなり有名ですね。

パンダのイラストのプラグインです。

jpg圧縮8

こちらは画像圧縮のスピードが遅いですね。

あと無料版には枚数制限があって、1ヶ月500枚までとなります。

でも500枚/月は使用しない気もしますが・・・。

そしてこちらは、「有効化」しても会員登録しないと使用できませんのでご注意を!

ということで会員登録が面倒なので、before&afterはありませんが、圧縮率は50%ほどのようで、こちらも私のおすすめには及びません。

スポンサーリンク

まとめ

一度、画像圧縮の工程をはさまなければいけませんが、一番画像の軽量化ができて、その画質確認ができ、しかも希望であればさらに限界まで画像軽量化ができる「Compress JPEG」がおすすめですね。

どの画像圧縮を使用するにしても、まずは撮影した画像を「ワードプレスダッシュボード」→「設定」→「メディア」で表示される最大幅にPHOTOSHOP(画像編集ソフト)などで縮小しておくことは忘れないでくださいね。

ワードプレスのメディア設定画面

よく横幅が2000pxの画像をアップロードしている方がいますので・・・。

いくら画像圧縮といっても元画像が大きければ大きいほど、画像圧縮の恩恵は受けづらいということを理解したほうが良いですよ!

ブログ関連
スポンサーリンク
スポンサーリンク
この記事を書いた人
こだわりスタイル

現役Webデザイナーの、モノにこだわった情報やレビューのブログを開設。趣味やガジェットのこだわり情報を発信していきます。こだわり情報は体験談やファッションなど4つのカテゴリーでご紹介。是非フォローよろしくお願いします。

「こだわりスタイル」をフォローする
こだわり記事をシェアする
スポンサーリンク
スポンサーリンク
こだわりスタイル