ブログ運営

【ツールも紹介】ブログの画像を圧縮する方法【リサイズも忘れずに】

2020年8月13日

ブログ画像の圧縮をする最もシンプルな方法【リサイズも忘れずに】
悩んでいる人
ブログで使う画像って圧縮したほうがいいって聞くけど、どうなんですか?ブログの画像を圧縮する方法を知りたいです!

 

このような悩みにお答えします。

 

本記事の内容

・ブログ画像を圧縮する前に知っておきたいこと
・ブログ画像を圧縮する手順と方法

 

ワードプレスでブログを始めるのであれば、画像を圧縮して軽量化することは必須です。

 

なぜなら、画像が重いと読み込みに時間がかかり、ページの表示速度が遅くなるからです。

 

ページの表示に時間がかかってしまった結果、読者さんが離脱してしまう可能性が高くなってしまいます。

 

この記事では、画像を圧縮することによってサイトスピードを少しでも上げるために、ブログの画像を圧縮する方法を紹介していきます。

 

画像素材がまだ決まってないかたは高品質な無料素材サイトO-DAN(オーダン)の使い方【マル秘テクニックあり】で無料で入手できます。おしゃれな素材が見つかるかもですよ。

 

ブログ画像を圧縮する前に知っておきたいこと

ブログ画像を圧縮する前に知っておきたいこと

ブログ画像を圧縮する前に知っておきたい事は以下の通りです。

 

・画像の横幅は700~800pxあればいい
・画像の容量は50~100KBくらいがいい
・JPEGとPNGの違い

 

順に解説していきます。

 

画像の横幅は700~800pxあればいい

ワードプレスの画面にはお使いのテーマにもよりますが、700~800pxあれば十分です。

 

写真や素材サイトからダウンロードしてきた時に1000pxだった場合でも、ワードプレスに挿入すると自動的に700~800pxのサイズに調節されます。

 

見た目は問題ないのですが、サイズが大きすぎてしまうと、そのぶん容量が大きくなってしまいます。

 

その結果、サーバーに負荷が大きくかかってしまい、読み込み速度が落ちてしまうので注意しましょう。

 

700~800pxあればいいので、そこまで大きいサイズは必要ありません。
ふじさん

 

画像の容量は50~100KB以内におさめるべし

画像を圧縮せずにそのままの状態ですと、スマホの写真だと数千KB、画像サイトからダウンロードしてきたものでも数百~数千KBのものが多いです。

 

大きい容量の画像を記事にたくさん入れてしまうと、重たすぎてサイトスピードに影響がでてしまいます。

 

これからたくさん記事を書いていき、画像を入れれば入れるほど重くなるので、画像1枚の容量の目安は50~100KB以内を目安にしましょう。

 

必ず100KB以内にしなければ重たすぎて動かなることはありませんが、あくまで目安として頭に入れておいてください。
ふじさん

 

JPEGとPNGの違い

画像のファイル形式には『JPEG』と『PNG』があります。特徴は以下の感じです。

 

拡張子 JPEG PNG
表現できる色数 約1670万色 最大280兆色
容量 少ない(軽い) 大きい(重い)
使いどころ 画像のみ テキストを含んだ画像

 

上の表のとおり、画像のみの画像を使うのであれば、ファイルの拡張子はJPEGにしましょう。

 

多少荒くなりますが、肉眼ではそこまで画質の違いはわからないので、軽いJPEGで問題ありません。

 

いっぽうで、テキストを含んだ画像ですと多少文字が劣化してしまう可能性があるので、PNGにすることで文字もきれいに見えます。

 

ちなみに僕はテキストを含んだ画像でも、すべてJPEGにしています。
ふじさん

 

ブログ画像を圧縮する手順

ブログ画像を圧縮する手順

ブログの画像を圧縮する手順は以下の通りです。

 

画像を圧縮する手順

  • BULK RESIZEで画像サイズ変更をする
  • TinyPngで画像を圧縮する
  • EWWW Image Optimizerで画像の軽量化をする

 

上から順に解説していきますね。

 

BULK RESIZEで画像サイズ変更する

BULK RESIZEの特徴

・ドラッグ&ドロップで簡単に操作できる
・画像のフォーマットを『JPEG』『PNG』『WEBP』に変換することができる
・一度に150枚の画像をリサイズできる
・登録などなく、WEB上ですぐに利用できる

 

BULK RESIZEの使い方

トップページでリサイズしたい画像をドラッグ&ドロップしたら、『幅』から横幅のサイズを指定し『開始』を押すだけです。

 

『画像フォーマット』から『JPEG』『PNG』『WEBP』が選択できます。

 

>>BULK RESIZEへ

 

TinyPngで画像を圧縮する

 

TinyPNGの特徴

・ドラッグ&ドロップで簡単に操作できる
・『PNG』と『JPEG』どちらのフォーマットでも圧縮できる
・一度に最大20枚まで画像を圧縮できる
・登録などなく、WEB上ですぐに利用できる

 

TinyPNGの使い方

 

 

画面中央のBOXに圧縮したい画像をドラッグ&ドロップし、『すべてをダウンロード』を押すだけで簡単に圧縮することができます。

 

>>TinyPNGへ

 

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の使い方

 

ここでは、リサイズから画像圧縮までの一連の流れを解説していきます。

 

 

『画像のサイズ変更』をクリックします。

 

 

『画像を選択』にリサイズする画像をドラッグ&ドロップします。

 

 

『ピクセルで』を選択し、横幅と高さのサイズを任意で指定して『画像のサイズ変更』をクリックします。

 

 

次の画面で緑色の四角いボタンを押し、画像の圧縮画面に進みます。

 

 

『画像の圧縮』ボタンを押せば圧縮が始まり、終わると画面左下に画像ファイルがダウンロードされます。

 

画像のリサイズから圧縮までが一連の流れでできます。
ふじさん

 

>>i Love IMGへ

 

まとめ:ブログ画像を圧縮してサイトを快適にしよう

まとめ:ブログ画像を圧縮してサイトを快適にしよう

この記事では、ブログ画像を圧縮する方法を解説してきました。

 

画像を圧縮する手順

  • BULK RESIZEで画像サイズ変更をする
  • TinyPngで画像を圧縮する
  • EWWW Image Optimizerで画像の軽量化をする

 

ブログ記事を書いていけばいくほど画像もたまってきますので、使用する画像はリサイズをして圧縮してから使いましょう。

 

関連記事高品質な無料素材サイトO-DAN(オーダン)の使い方【マル秘テクニックあり】

関連記事WordPressにおすすめなプラグイン7つを厳選【入れすぎは注意です】

  • この記事を書いた人
  • 最新記事

ふじさん 

副業ブロガー|ブログ運営のことやWordpressテーマ『AFFINGER5』・日々の生活に役立つ情報をまったりと綴っています。ゲームをこよなく愛する人

© 2021 Fujisanblog