--> 無料でできるブログの画像圧縮方法3つを解説【ブログで使う最適な画像とは?】
ブログ

無料でできるブログの画像圧縮方法3つを解説【ブログで使う最適な画像とは?】

ブログの画像を圧縮したいんだけどどうすればいいの?できるだけ簡単で手間がかからない方法が知りたい。

こんな疑問に答えます。

本記事の内容

  • ブログで使う最適な画像とは?
  • ブログの画像圧縮方法3つ
  • ブログの画像圧縮でよくある質問

筆者

そうし
そうし
元サラリーマン。現在は当ブログの運営とWebライターとして活動しています!

この記事を書いているぼくは、当ブログ開設後3記事で収益化。日々5000文字以上を書きつつ毎日更新を100日続けました。

ブログの画像容量は、サイト全体の表示速度に影響します。

そして、最近では表示速度がSEOに関係していると言われています。

なので、ブログの画像を圧縮するのはもはや常識なんですよね。

そこで今回は、画像を圧縮する方法を3つ紹介します。

と、その前に、そもそもブログで使う最適な画像はどういう画像なのか解説します。

それではさっそくいきましょう。

ブログで使う最適な画像とは?

写真と男

ブログで使う画像には以下の要素があります。

  • サイズ(横と縦のサイズ)
  • 形式(JPGとかPNG)
  • 容量(100KBとか1MB)

ブログで画像を使う時には、この3つの要素をそれぞれ最適に設定するべきです。

なぜなら、設定しないと画像が荒くなったり、上手く表示されなくなるからです。

3つの要素の適切な設定は以下の通りです。

  • サイズ:Word Pressのテーマによって違う
  • 形式:JPG or PNG
  • 容量:200KB以下/枚

それぞれ解説しますね。

最適なサイズはWord Pressのテーマによって違う

画像の最適なサイズはWord Pressテーマによって違います。

ぼくが個人的に調べた、各テーマの適切な画像のサイズ(横幅)は以下の通りです。

  • JIN…760PX
  • SANGO…680PX
  • SWELL…812PX
  • アフィンガー5…640PX

縦の適切なサイズは、画像によって違うと思うので調整してくださいね。

お使いのテーマがない場合は、調べてみてください。

ちなみに、画像のサイズが小さければ小さいほど画像の容量も小さくなります。

自分で確認もできます

サイズが心配な方や、自分でCSSをカスタマイズして記事の横幅を変えている人は、デベロッパーツールで最適な画像サイズを確認することもできます。

デベロッパーツールは

Macなら、option + command + i

Windowsなら、Ctrl + Shift + i

で開くことができます。

ブログ記事画面でデベロッパーツールを開いたら、画面左下にある矢印マークをクリックします。

デベロッパーツール

そして、記事の幅いっぱいのところにカーソルを合わせてクリックすると、上の画像のようになると思います。

次に、画面右下の「Computed」をクリックすると下の画像のようになります。

デベロッパーツール

この時の青色の部分がブログの横幅です。

つまり、この画像の場合773px(小数点以下は省略)がブログの横幅ということですね。

画像はブログの幅より少し大きめにするとキレイに表示されますよ。

画像の形式はJPG or PNG

次に、画像の形式です。

一般的に推奨されているのはJPGかPNGで、それぞれの特徴は以下の通りです。

  • JPG:画質はよくないけど容量は小さい
  • PNG:画質はいいけど容量が大きい

画像にそこまでこだわらない人はJPG、画像にこだわる人はPNGの画像を使うといいですよ。

画像の容量は200KB以下

厳密な決まりはないのですが、画像の容量は200KB以下/枚が目安です。

1枚200KBを超えてしまうとサイト全体のデータ量が大きくなってしまうので注意が必要です。

とはいえ、この後紹介する方法を使えば、ほとんどの画像は200KB以下に抑えられますよ。

ブログの画像圧縮方法

パソコンと人々

ではここから、実際に画像を圧縮する方法をみていきます。

画像を圧縮する時におすすめのツールは以下の3つです。

それぞれ使い方を解説します。

TinyJPG

TinyJPGはJPGという名前がついていますが、PNGの画像にも使えます。

使い方は簡単で、圧縮したい画像をドロップするだけです。

TinyJPG

TinyJPGを使えば50%~70%ほどの容量を圧縮できて、画質もほぼ元の状態が保たれます。

優秀なツールですね。

TinyJPGの特徴

  • 50%以上の容量を圧縮できる
  • 圧縮しても画質がほぼ変わらない

Squoosh

次は、Squooshという容量圧縮とリサイズ(画像の縦と横のサイズを変える)を同時にできる優秀なツールです。

使い方は、以下の画像をご覧ください。

squoosh

Squooshはパソコンにインストールしてデスクトップに置いておくこともできるので便利ですよ。

Squooshの特徴

  • 圧縮とリサイズを同時にできる
  • インストールしてデスクトップに置いておくことができる

Compress JPEG & PNG images

次は、Word Pressプラグイン、Compress JPEG & PNG imagesです。

Compress JPEG & PNG imagesの使い方は分かりやすい記事があったので、そちらをご覧ください。

»きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG &PNG images

Compress JPEG & PNG imagesの特徴

  • Word Pressのプラグイン
  • 月に500枚まで無料

ブログの画像圧縮でよくある質問

FAQ

では最後に、ブログの画像圧縮に関してよくある質問に答えていきたいと思います。

くある質問

  • 過去の画像を圧縮する方法
  • 文字を入れる場合はどうしたらいい?
  • どうしても使いたい画像の容量が大きい
  • 画像の質と軽さはどっちを優先するべき?

1つずつ答えていきます。

過去の画像を圧縮する方法

すでにアップロードしている画像を圧縮するには、先ほどのCompress JPEG & PNG imagesを使います。

  • 一括で圧縮する
  • 個別に圧縮する

という2つの方法があるので、それぞれ解説します。

一括で圧縮する方法

アップロード済みの画像を一括で圧縮するには、まず管理画面の「メディア」の「Bulk Optimization」をクリックします。

Word Press管理画面

次に、上記の画像の「Start Bulk Optimization」をクリックすれば完了です。

なお、画像の枚数によっては料金がかかることがあるので、確認してくださいね。

月に500枚までは無料みたいですね。

個別に圧縮する

個別に圧縮する方法は、以下の画像を参考にしてください。

Word Press管理画面

メディアライブラリを開いて、圧縮したい画像を「Compress」すればOKです。

文字を入れる場合はどうしたらいい?

画像に文字を入れる場合は、文字を入れた後に圧縮して下さいね。

圧縮した後に文字を入れると、また画像のサイズが大きくなってしまうので注意です。

どうしても使いたい画像の容量が大きい

どうしても使いたい画像の容量が大きい場合は他の画像のサイズを抑えて、1ページが1.6MB以内に収まるようにしましょう。

Googleでも1ページのサイズが1.6MB以内がいいとされています。

参考»Googleの推奨は1.6MB。7,866のウェブサイトの平均は 2.43MB。あなたのトップページは?

ただ、平均が2.4MBなので結構厳しい基準です。

ちなみに、ページ内の容量を調べる際は「How fast does your website load?Find out with GTmetrix」を使って、調べたいURLを打ち込んでください。

結果の画面を下にスクロールすると、ページの容量を確認できますよ。

サイトの重さを測るツール

上記の画像は2.0MBなので、微妙ですね。

もし画像以外で容量を消費している場合は改善するといいですよ。

画像の質と軽さはどっちを優先するべき?

画像の質と軽さどっちを優先するかは、完全に好みによります。

なかには、画質はよく、他のところでサイトのスピードを上げている人もいますね。

ちなみにぼくは割と画質にはこだわっています。

こればっかりは好みの問題ですね。

まとめ:ブログの画像圧縮でサイトのスピードを上げよ

走る人

2021年の6月から、Googleの検索結果を決める要素のなかにサイトの表示速度が加わりました。

画像の圧縮はめんどくさいですが、サイトの表示速度を落とさないために必ずおこないましょう。

今回は以上です。