ブログに画像はつきもの。皆さんもブログに画像を使っていると思います
ブログに使う画像のファイルサイズにまでちゃんとこだわっていますか?
実は画像のファイルサイズは、ブログ運営において非常に重要です。
せっかく記事を頑張って書いても、画像のファイルサイズによって見てもらえないブログになっているかもしれません。。。
ブログに使う画像のファイルサイズを意識してブログを書いていたら、なんと当ブログがバリューコマース メディアアワード2021上期において、成長賞1位を獲得しました!成長賞を獲得するために行ったポイントは以下の記事で紹介していますよ〜!
ということでこの記事では、「なんで画像のファイルサイズが重要なのか」「ファイルサイズを小さくする方法」を詳しく解説していきます。
画像のファイルサイズが小さい方がいい理由
まず、画像のファイルサイズとははなんぞや?という方に向けて説明しておきます。
画像のファイルサイズとは、そのまま画像のファイルのサイズです。〇〇MB、〇〇KBなどで表されるものです。画像そのものの大きさという意味の画像サイズとは異なることに注意してください。
結論からいいます。ブログに使う画像はファイルサイズが小さい方が良いです。理由を2つに絞って解説します。
読み込み速度が向上、SEO的にもGOOD
自分のブログの読み込み速度を意識したことはありますか。
読み込み速度…URLをクリックしてからそのサイトが実際に表示されるまでの時間
実は、読み込み速度が早い方がSEO的にGOODなんです。
画像のファイルサイズは平均して大きいため、サイトの読み込み速度に直結します。なるべく画像のファイルサイズを小さく圧縮することで読み込み速度を早めることができます。
ちなみに、Googleが提供しているPageSpeed Insightsというサイトで、読み込み速度を計測して評価してもらえます。一度自分のブログの読み込み速度を計測しておくといいですよ〜。
サーバーの容量的にもGOOD
画像は平均してファイルサイズが大きいので、無意識にブログをやっているとサーバーの容量をどんどん圧迫していきます。
最初のうちは大丈夫ですが、ブログの規模が大きくなると大変です。早いうちに画像のファイルサイズを小さくする意識をしておきましょう。
サーバーの容量に不安がある方は、大容量かつ高速のエックスサーバー がオススメ。多くの有名ブロガーが使っているのでまず間違いはありません。サーバーのスペックを強化することもSEO対策の1つです。
ブログに使う画像は1枚あたり100KB未満が目安
ブログに使う画像のファイルサイズは、絶対にコレくらいじゃないとダメ!というのはありません。
小さいに越したことはありませんが、ファイルサイズを小さくしすぎると画質が荒くなってしまいます。
画質とファイルサイズのバランスが重要になります。あくまで目安ですが、画像1枚あたり100KB未満にできれば、ファイルサイズ的には十分です。
ちなみにこのページで使われている画像の中で、最もファイルサイズが大きいものでも78KBなんですよ〜!
試しに自分のブログで使ったことのある画像のファイルサイズを確認してみましょう。
画像のファイルサイズ確認方法:Mac
Macの場合、画像を選択して「右クリック→情報を見る」と進めば画像のファイルサイズを確認できます。
画像のファイルサイズ確認方法:Windows
Windowsの場合、画像を選択して「右クリック→プロパティ」と進めば画像のファイルサイズを確認できます。
画像のファイルサイズを小さく圧縮する方法
では実際に画像のファイルサイズを小さく圧縮してみましょう。今回は2通りのやり方を解説します。
- PhotoShopを使う
- プレビューを使う(Macのみ)
ブロガーの大半が使っている画像編集ソフトPhotoShopを使うか、Mac純正アプリのプレビューで簡単に圧縮することができます。Windowsでは純正ソフトで今回のような圧縮をする方法はなさそうです。
他のソフトやWebサービスでも同じようなことはできますが、細かく設定できなかったりネット環境が必要だったりするので、今回は定番ソフトのPhotoShopとMac純正のプレビューを選びました。安心感もありますし。このブログで使われている画像も全てPhotoShopで編集していますよ〜!
PhotoShopをまだ導入していない方は質の高いブログを作成するために早めに導入しておきましょう。月額1,078円〜利用でき、7日間無料で試せるのでぜひ試してみてくださいね〜。
画像のファイルサイズ圧縮方法1:PhotoShopを使う
PhotoShopでは様々な画像に関する設定や編集ができますが、今回は非常にシンプルにいきたいと思います。
①圧縮したい画像をPhotoShopで開きます。 | |
②上のメニューバーから「ファイル→書き出し→書き出し形式…」と進みます。 | |
③右のファイル設定欄から、画像形式をJPGにして画質を調整していきます。(JPG以外の形式では画質を調整できません。) | |
④画面左に書き出し後の想定ファイルサイズが表示されているので、100KB未満になるように調整して書き出します。 |
画像のファイルサイズ圧縮方法2:プレビューを使う
Mac純正のプレビューを使えば、PhotoShopほど細かく設定はできませんが画像を圧縮することができます。
①圧縮したい画像をプレビューで開きます。Macのデフォルト設定であれば、画像ファイルをダブルクリックすればプレビューで開くことができます。 | |
②上のメニューバーから「ファイル→書き出す…」と進みます。 | |
③画面下側で書き出し画像の設定を行います。フォーマットをJPEGにして、品質をファイルサイズが100KB未満になるように調整すれば保存をクリックして完了です。 |
画像をリサイズしてサイズを圧縮する方法はオススメしない
画像のサイズ自体を小さくすることでもファイルサイズを小さくすることはできます。しかし、あまりオススメできません。
同じ画像に異なる処理をしたものを拡大して実際に比較してみましょう。なるべくファイルサイズが同じになるようにしています。
オリジナル画像(1,920×1,280、322KB) |
PhotoShopで圧縮(1,920×1,280、89KB) |
プレビューで圧縮(1,920×1,280、95KB) |
25%にサイズ縮小(480×320、97KB) |
圧縮した画像には少しノイズが乗ってますが、全然許容範囲ですね。
25%に縮小した画像はボヤッとしてしまいブログで使えないレベルの画質になっています。
やはりPhotoShopなどで圧縮する方が良いことが分かります。
まとめ:サイズの小さい画像を使って良いブログを
いかがでしたか。
ブログに使う画像のファイルサイズにまでこだわることで、ようやく人に見てもらえるブログになります。
画像の圧縮だけでなく、作成・編集にもPhotoShopが便利です。早く導入するに越したことはないので、まだ導入していない方はぜひこの機会に導入しておきましょう〜!
まとめ
- 画像のファイルサイズを小さくすることもSEO対策の1つ!
- サーバーの容量的にも優しい!
- PhotoShopを使って思い通りのファイルサイズに!
コメント