ブログに使う画像を大きさそのままでファイルサイズを圧縮する方法【SEO対策】

Blog


ブログ画像はつきもの。皆さんもブログに画像を使っていると思います

かんまる
かんまる

ブログに使う画像のファイルサイズにまでちゃんとこだわっていますか?


実は画像のファイルサイズは、ブログ運営において非常に重要です。
せっかく記事を頑張って書いても、画像のファイルサイズによって見てもらえないブログになっているかもしれません。。。

かんまる
かんまる

ブログに使う画像のファイルサイズを意識してブログを書いていたら、なんと当ブログがバリューコマース メディアアワード2021上期において、成長賞1位を獲得しました!成長賞を獲得するために行ったポイントは以下の記事で紹介していますよ〜!


関連記事:ブログPV数アップの第一歩!サイトの読み込み速度を早くする方法【超簡単】
関連記事:ブログ初心者は必読!記事の質を上げてPV数アップと離脱率減少を狙おう!


ということでこの記事では、「なんで画像のファイルサイズが重要なのか」「ファイルサイズを小さくする方法」を詳しく解説していきます。

画像のファイルサイズが小さい方がいい理由

画像のファイルサイズは小さい方が良い


まず、画像のファイルサイズとははなんぞや?という方に向けて説明しておきます。

画像のファイルサイズとは、そのまま画像のファイルのサイズです。〇〇MB、〇〇KBなどで表されるものです。画像そのものの大きさという意味の画像サイズとは異なることに注意してください。

結論からいいます。ブログに使う画像はファイルサイズが小さい方が良いです。理由を2つに絞って解説します。

読み込み速度が向上、SEO的にもGOOD

SEO的にもGOOD


自分のブログの読み込み速度を意識したことはありますか。

読み込み速度…URLをクリックしてからそのサイトが実際に表示されるまでの時間

実は、読み込み速度が早い方がSEO的にGOODなんです。
画像のファイルサイズは平均して大きいため、サイトの読み込み速度に直結します。なるべく画像のファイルサイズを小さく圧縮することで読み込み速度を早めることができます。


関連記事:ブログPV数アップの第一歩!サイトの読み込み速度を早くする方法【超簡単】


ちなみに、Googleが提供しているPageSpeed Insightsというサイトで、読み込み速度を計測して評価してもらえます。一度自分のブログの読み込み速度を計測しておくといいですよ〜。

サーバーの容量的にもGOOD

サーバーにもGOOD!


画像は平均してファイルサイズが大きいので、無意識にブログをやっているとサーバーの容量をどんどん圧迫していきます。

最初のうちは大丈夫ですが、ブログの規模が大きくなると大変です。早いうちに画像のファイルサイズを小さくする意識をしておきましょう。

サーバーの容量に不安がある方は、大容量かつ高速のエックスサーバー がオススメ。多くの有名ブロガーが使っているのでまず間違いはありません。サーバーのスペックを強化することもSEO対策の1つです。

ブログに使う画像は1枚あたり100KB未満が目安

画像1枚あたりの目安は100KB未満


ブログに使う画像のファイルサイズは、絶対にコレくらいじゃないとダメ!というのはありません。
小さいに越したことはありませんが、ファイルサイズを小さくしすぎると画質が荒くなってしまいます。

画質とファイルサイズのバランスが重要になります。あくまで目安ですが、画像1枚あたり100KB未満にできれば、ファイルサイズ的には十分です。

かんまる
かんまる

ちなみにこのページで使われている画像の中で、最もファイルサイズが大きいものでも78KBなんですよ〜!



試しに自分のブログで使ったことのある画像のファイルサイズを確認してみましょう。

画像のファイルサイズ確認方法:Mac

Macでのファイルサイズ確認画面


Macの場合、画像を選択して「右クリック→情報を見る」と進めば画像のファイルサイズを確認できます。

画像のファイルサイズ確認方法:Windows

Windowsでのファイルサイズ確認画面


Windowsの場合、画像を選択して「右クリック→プロパティと進めば画像のファイルサイズを確認できます。

画像のファイルサイズを小さく圧縮する方法

画像のファイルサイズを小さく圧縮する方法


では実際に画像のファイルサイズを小さく圧縮してみましょう。今回は2通りのやり方を解説します。

1. PhotoShopを使う
2. プレビューを使う(Macのみ)

ブロガーの大半が使っている画像編集ソフトPhotoShopを使うか、Mac純正アプリのプレビューで簡単に圧縮することができます。Windowsでは純正ソフトで今回のような圧縮をする方法はなさそうです。

かんまる
かんまる

他のソフトやWebサービスでも同じようなことはできますが、細かく設定できなかったりネット環境が必要だったりするので、今回は定番ソフトのPhotoShopとMac純正のプレビューを選びました。安心感もありますし。このブログで使われている画像も全てPhotoShopで編集していますよ〜!



PhotoShopをまだ導入していない方は質の高いブログを作成するために早めに導入しておきましょう。月額1,078円〜利用でき、7日間無料で試せるのでぜひ試してみてくださいね〜。

PhotoShopのページはこちら!


画像のファイルサイズ圧縮方法1:PhotoShopを使う

PhotoShopを使う


PhotoShopでは様々な画像に関する設定や編集ができますが、今回は非常にシンプルにいきたいと思います。

PhotoShopで画像を開く①圧縮したい画像をPhotoShopで開きます。
書き出し形式を選択②上のメニューバーから「ファイル→書き出し→書き出し形式…」と進みます。
ファイル形式をJPGに③右のファイル設定欄から、画像形式をJPGにして画質を調整していきます。(JPG以外の形式では画質を調整できません。)
画質を調整して書き出し画面左に書き出し後の想定ファイルサイズが表示されているので、100KB未満になるように調整して書き出します。


画像のファイルサイズ圧縮方法2:プレビューを使う


Mac純正のプレビューを使えば、PhotoShopほど細かく設定はできませんが画像を圧縮することができます。

プレビューで画像を開く①圧縮したい画像をプレビューで開きます。Macのデフォルト設定であれば、画像ファイルをダブルクリックすればプレビューで開くことができます。
書き出すをクリック②上のメニューバーから「ファイル→書き出す…」と進みます。
画像の品質を調整して保存③画面下側で書き出し画像の設定を行います。フォーマットをJPEGにして、品質をファイルサイズが100KB未満になるように調整すれば保存をクリックして完了です。


画像をリサイズしてサイズを圧縮する方法はオススメしない

サイズを変えるのはオススメしない


画像サイズ自体を小さくすることでもファイルサイズを小さくすることはできます。しかし、あまりオススメできません。

同じ画像に異なる処理をしたものを拡大して実際に比較してみましょう。なるべくファイルサイズが同じになるようにしています。

オリジナル画像
オリジナル画像(1,920×1,280、322KB)
PhotoShopで圧縮した画像
PhotoShopで圧縮(1,920×1,280、89KB)
プレビューで圧縮した画像
プレビューで圧縮(1,920×1,280、95KB)
サイズを25%に縮小した画像
25%にサイズ縮小(480×320、97KB)


圧縮した画像には少しノイズが乗ってますが、全然許容範囲ですね。
25%に縮小した画像はボヤッとしてしまいブログで使えないレベルの画質になっています。

やはりPhotoShopなどで圧縮する方が良いことが分かります。

まとめ:サイズの小さい画像を使って良いブログを


いかがでしたか。
ブログに使う画像のファイルサイズにまでこだわることで、ようやく人に見てもらえるブログになります。

画像の圧縮だけでなく、作成・編集にもPhotoShopが便利です。早く導入するに越したことはないので、まだ導入していない方はぜひこの機会に導入しておきましょう〜!

まとめ

  • 画像のファイルサイズを小さくすることもSEO対策の1つ!
  • サーバーの容量的にも優しい!
  • PhotoShopを使って思い通りのファイルサイズに!


コメント