このような悩みにお答えします。
本記事の内容
・ブログ画像を圧縮する前に知っておきたいこと
・ブログ画像を圧縮する手順と方法
ワードプレスでブログを始めるのであれば、画像を圧縮して軽量化することは必須です。
なぜなら、画像が重いと読み込みに時間がかかり、ページの表示速度が遅くなるからです。
ページの表示に時間がかかってしまった結果、読者さんが離脱してしまう可能性が高くなってしまいます。
この記事では、画像を圧縮することによってサイトスピードを少しでも上げるために、ブログの画像を圧縮する方法を紹介していきます。
画像素材がまだ決まってないかたは高品質な無料素材サイトO-DAN(オーダン)の使い方【マル秘テクニックあり】で無料で入手できます。おしゃれな素材が見つかるかもですよ。
目次
ブログ画像を圧縮する前に知っておきたいこと
ブログ画像を圧縮する前に知っておきたい事は以下の通りです。
・画像の横幅は700～800pxあればいい
・画像の容量は50～100KBくらいがいい
・JPEGとPNGの違い
順に解説していきます。
画像の横幅は700~800pxあればいい
ワードプレスの画面にはお使いのテーマにもよりますが、700~800pxあれば十分です。
写真や素材サイトからダウンロードしてきた時に1000pxだった場合でも、ワードプレスに挿入すると自動的に700～800pxのサイズに調節されます。
見た目は問題ないのですが、サイズが大きすぎてしまうと、そのぶん容量が大きくなってしまいます。
その結果、サーバーに負荷が大きくかかってしまい、読み込み速度が落ちてしまうので注意しましょう。
画像の容量は50～100KB以内におさめるべし
画像を圧縮せずにそのままの状態ですと、スマホの写真だと数千KB、画像サイトからダウンロードしてきたものでも数百～数千KBのものが多いです。
大きい容量の画像を記事にたくさん入れてしまうと、重たすぎてサイトスピードに影響がでてしまいます。
これからたくさん記事を書いていき、画像を入れれば入れるほど重くなるので、画像1枚の容量の目安は50～100KB以内を目安にしましょう。
JPEGとPNGの違い
画像のファイル形式には『JPEG』と『PNG』があります。特徴は以下の感じです。
| 拡張子 | JPEG | PNG |
| 表現できる色数 | 約1670万色 | 最大280兆色 |
| 容量 | 少ない(軽い) | 大きい(重い) |
| 使いどころ | 画像のみ | テキストを含んだ画像 |
上の表のとおり、画像のみの画像を使うのであれば、ファイルの拡張子はJPEGにしましょう。
多少荒くなりますが、肉眼ではそこまで画質の違いはわからないので、軽いJPEGで問題ありません。
いっぽうで、テキストを含んだ画像ですと多少文字が劣化してしまう可能性があるので、PNGにすることで文字もきれいに見えます。
ブログ画像を圧縮する手順
ブログの画像を圧縮する手順は以下の通りです。
画像を圧縮する手順
- BULK RESIZEで画像サイズ変更をする
- TinyPngで画像を圧縮する
- EWWW Image Optimizerで画像の軽量化をする
上から順に解説していきますね。
BULK RESIZEで画像サイズ変更する
BULK RESIZEの特徴
・ドラッグ＆ドロップで簡単に操作できる
・画像のフォーマットを『JPEG』『PNG』『WEBP』に変換することができる
・一度に150枚の画像をリサイズできる
・登録などなく、WEB上ですぐに利用できる
BULK RESIZEの使い方
トップページでリサイズしたい画像をドラッグ＆ドロップしたら、『幅』から横幅のサイズを指定し『開始』を押すだけです。
『画像フォーマット』から『JPEG』『PNG』『WEBP』が選択できます。
TinyPngで画像を圧縮する
TinyPNGの特徴
・ドラッグ＆ドロップで簡単に操作できる
・『PNG』と『JPEG』どちらのフォーマットでも圧縮できる
・一度に最大20枚まで画像を圧縮できる
・登録などなく、WEB上ですぐに利用できる
TinyPNGの使い方
画面中央のBOXに圧縮したい画像をドラッグ＆ドロップし、『すべてをダウンロード』を押すだけで簡単に圧縮することができます。
EWWW Image Optimizerで画像の軽量化をする
EWWW Image Optimizerはワードプレスにインストールするだけで画像を圧縮してくれるプラグインです。
ワードプレス管理画面の『設定』→『EWWW Image Optimizer』と進み、『基本』の『メタデータを削除』にチェックを入れるだけで設定は完了です。
プラグインを入れる前にメディアに画像が入れてある場合は、以下の項目から一括で圧縮してくれます。
管理画面の『メディア』→『一括最適化』と進み、『最適化されていない画像をスキャンする』をクリックするだけです。
画像を圧縮する基本的な流れは以上になります。
個人的におすすめのツール『i Love IMG』
『i Love IMG』では、1つのツール内で画像のリサイズから圧縮、フォーマットの変換などが一括でできる便利なツールです。
i Love IMGでできること
・画像の圧縮
・画像のサイズ変更
・画像の切り抜き
・JPGに変換
・JPGから変換
・透かし画像
・画像の回転 etc...
i Love IMGの使い方
ここでは、リサイズから画像圧縮までの一連の流れを解説していきます。
『画像のサイズ変更』をクリックします。
『画像を選択』にリサイズする画像をドラッグ＆ドロップします。
『ピクセルで』を選択し、横幅と高さのサイズを任意で指定して『画像のサイズ変更』をクリックします。
次の画面で緑色の四角いボタンを押し、画像の圧縮画面に進みます。
『画像の圧縮』ボタンを押せば圧縮が始まり、終わると画面左下に画像ファイルがダウンロードされます。
まとめ：ブログ画像を圧縮してサイトを快適にしよう
この記事では、ブログ画像を圧縮する方法を解説してきました。
画像を圧縮する手順
- BULK RESIZEで画像サイズ変更をする
- TinyPngで画像を圧縮する
- EWWW Image Optimizerで画像の軽量化をする
ブログ記事を書いていけばいくほど画像もたまってきますので、使用する画像はリサイズをして圧縮してから使いましょう。