ワードプレスブログの運営を始めたばかりの初心者さんが気になることとして、「ブログ画像の圧縮方法」という点が挙げられると思います。
初心者さん画像を圧縮した方が良いって聞いたんだけど、具体的にどうすれば良いんだろう？
副業のプロ画像圧縮系のプラグインを使っても良いんだけど、それ以外の方法もあるんだよ〜。
WordPressのプラグインはとても便利なものなのですが、時として動作の邪魔をしてしまったり、予期せぬエラーが起きてしまったり…。
自分の大切なサイトがエラーを起こして使えなくなってしまったら、とてもショックですよね。
そこで今回は、プラグインなしで画像を圧縮できるサービス「Tiny Ping」の使い方を中心に画像圧縮について解説していこうと思います。
画像の圧縮が必要な理由
画像の圧縮をする理由は、ページの表示速度を上げるためです。
webページが表示されるときは毎回ファイルの読み込みが行われているのですが、画像のファイルサイズが大きすぎると読み込み遅延が起こるのです。
グーグルの統計データによると、ページ読み込みの遅延が3秒長くなると、ユーザーの53％もが離脱してしまうとの結果が。
この結果を見る限り、画像を圧縮してサイズダウンをすることで読み込み速度上昇＆ユーザー離脱防止をすることがいかに重要かよくわかると思います。
副業のプロスマホの通信制限にかかると、なかなかwebサイトが読み込めなくてイライラしませんか？
原理は違いますが、あんな感じのストレスを感じるということですね。
ワードプレスブログの画像圧縮の方法
①プラグインを利用する【非推奨】
1つ目の方法は、画像圧縮系のプラグインを利用することです。
- EWWW Image Optimizer.
- Smush.
- JPEG, PNG & WebP image compression.
- Imagify.
などのプラグインが代表的なものとして挙げられるのですが、画像圧縮プラグインは容量が重い・他プラグインやテーマとの組み合わせでバグが出やすいという致命的な欠点が存在します。
副業のプロ設定なしてWebPとかもあって、機能的には良いんですけどね…。
また、当サイトでも利用しているSWELLも「その他、不具合の原因になるかもしれないプラグイン」でEWWW Image Optimizerが紹介されています。
特にSWELLはデフォルト機能が充実しており「プラグインを最低限で済ませられるテーマ」であるため、とりあえず画像圧縮系のプラグインを入れておく…というのは避けておくのが無難です。
②Tiny Pingを利用する【推奨】
ワードプレスの機能の不足面はプラグインで補える！ということを聞いてきた初心者さんは「プラグインが使えないなんて、話が違うじゃないか」と思ってしまいますよね。
しかし、画像圧縮に限ってはプラグインを入れるよりももっと良い方法があるのです。
- 無料で利用できる
- 面倒な会員登録なし
- 実質利用上限なし
- １アクションで圧縮作業ができるので時短になる
- 画質劣化をほぼ感じない
というメリットがある画像圧縮サービス、 Tiny Pingを利用する方法です。
さくぱんこの先ブログ運営を続けていく限りずっと利用すると思いますので、ぜひチェックしておきましょう。
続けて、使い方を解説していきます。
【プラグインなし】Tiny Pingの使い方
Tiny Pingには、「Compress JPEG & PNG images」というプラグイン版もあるのですが、今回はこのプラグインは利用しません。
以下は、全てwebで完結させる手順となっています。
①サイトにアクセスする
以下のリンクをクリックして、サイトにアクセスします。
すると、このようなパンダのキャラクターのサイトが開きます。
②圧縮したい元画像をドラッグ＆ドロップ
今回は、右の赤丸で囲ってあるスクリーンショットを圧縮していきます。
圧縮したい画像をクリックしたままドラッグし、左側の赤枠で囲ってあるところにドロップしてください。
正常に圧縮が開始されると、以下のような画面になります。
③圧縮の完了
圧縮の進行バーが黄緑色になり、パンダが万歳のポーズを取ったら圧縮完了です。
左側または下にある「download」ボタンをクリックすることで、圧縮後の画像をダウンロードすることができます。
副業のプロ同時に何枚もの圧縮ができるので、サイズを小さくしておきたい画像が複数ある場合は同じ要領でポイポイっと放り込めばOKです。
④ワードプレスブログにアップロード
続いて、ダウンロードした画像をワードプレスへアップロードしていきます。
執筆画面から「画像＞アップロード」と進むか、ダッシボードからメディアを選んで以下の画面を開きます。
ダウンロードしたファイルを、メディア一覧の部分にドラック＆ドロップします。
さくぱんもちろん1つずつ選択してアップロードでもいいんだけど、ドラッグ＆ドロップした方が早いです！
画像がメディア一覧に取り込まれたことを確認して、作業は終了です。お疲れ様でした！
Tiny Pingの無料利用条件
Tiny Pingには有料プランも用意されているのですが、利用歴5年の私は有料版の必要性を感じないためずっと無料プランを利用しています。
無料で利用するにあたっての制限は以下の通り。
- 1回の圧縮につき20枚まで
- 圧縮できるファイルサイズは1つにつき5MBまで
「1回につき20枚まで」は文字通りの意味なので、21枚以上の画像を圧縮したい時はページを再読み込みすれば1日何枚でも圧縮することができてしまうのです。
また、ブログに利用する画像は大体Canva Proなどで製作したものかスクリーンショットなのですが、５MBを超えることは滅多にありません。
さくぱん稀に範囲が広いスクリーンショットなどが引っかかることがあるのですが、その時は小さく表示させて範囲選択でもう1回スクショを撮ると5MB以下になります。
画像系のお仕事を本業としている方の中には有料プランを利用している方もいるかもしれませんが、ブロガーレベルであれば無料プランで十分だと感じます。
適切な画像サイズで、読込み速度の上昇を狙おう
今回は、ワードプレスブログに利用する画像をプラグインなしで圧縮する方法についてを解説してきました。
ページの読み込み速度は、グーグルのクロールでも評価される大切なポイントです。
SEO対策をしっかりと行うという意味でも、ブログに利用する画像は必ず圧縮しておくようにしましょう。
副業のプロ画像圧縮作業は積み重ねが大切です！
