ブログ

ブログに最適な画像サイズとは?【リサイズ・圧縮方法まで分かりやすく解説】

2020年6月11日

 

悩める人
ブログに挿入するのに最適な画像サイズが知りたいです!

 

この記事ではこんな疑問にお答えします。

 

本記事の内容

  • ブログに最適な画像サイズ
  • 画像はリサイズ・圧縮が必要
  • 画像の具体的なリサイズ・圧縮の方法

  

本記事の信頼性

当ブログもこの記事の方法で画像のサイズ選び・リサイズ・圧縮をしています。

 

画像はブログデザインの重要なポイントなので、ぜひこの記事で最適な画像サイズの選び方を理解しましょう。

 

ブログに最適な画像サイズ

 

先に、結論からお伝えするとブログの画像サイズは「あなたのブログの横幅に合わせる」というのが正解です。

 

テーマやブログサービスによって横幅は異なるので、まずは自分のブログの横幅を調べる必要があります。

 

補足

↓ ここでいう横幅とは下記画像の記事コンテンツエリアのことです。

 

 

ブログの横幅の調べ方

それでは実際にブログの横幅を調べてみましょう。

 

Google Chromeの「検証」を使えば簡単に横幅を調べることが出来ます。

 

まずはGoogle Chromeであなたのブログを立ち上げます。

ポイント

Internet Explorerを使っている人は、Google Chromeを使用してください。

 

ここでは当ブログで試してみますね。

 

 

① まずはブログのコンテンツエリアで右クリック → 検証をクリックします。

 

 

するとデベロッパーツールが開きますが、画面右側に表示されているため、これを下に表示させます。

 

上記写真の②「︙」を選択して、右から2番目の③をクリックするだけでOKです。

 

ポイント

デベロッパーツールが上記写真のように下ではなく、右側に表示されている場合、記事コンテンツエリアの横幅の数値が変わってしまう為、下側に表示する必要があります。

 

 

すると上記写真のようにデベロッパーツールが下に表示されますので、④「computed」を選択します。

 

⑤ 四角で色分けされた図形が出てくるので、記事コンテンツエリアと同じ色(今回は青色)の部分を確認しましょう。

 

 

⑤を拡大したものが上記画像です。「横幅×高さ」が表示されています。

 

このブログの場合は横幅が640px、高さは記事の長さによって変わります。

 

ポイント

ブログテーマなどが変わった場合、横幅も変わる可能性がありますので表示された横幅よりも余裕をもって画像サイズを設定しておくことをオススメします。

 

画像はリサイズ・圧縮が必須

使用する画像はリサイズ・圧縮をしてから使用しましょう。

 

軽量化された画像を使うことでページの表示速度も速くなり、SEO的にも有利です。

 

画像サイズは大きすぎても小さすぎても次のような問題点があります。

 

画像サイズが大きすぎる場合の問題点

① ページの表示速度が遅くなりSEO的にもマイナス

② サーバーに負担がかかる

「画像サイズが大きい=容量が大きい」ということなので、上記の2点がマイナスポイントです。

 

WordPressを利用している場合、サイズは大きすぎても自動で調整してくれますが、容量までは調整してくれないのでアップする前にリサイズ・圧縮をする必要があります。

 

画像サイズが小さすぎる場合の問題点

 

画像サイズが小さすぎると単純に見にくいです。

 

下記の画像は当ブログの横幅に合わせて横幅700pxにリサイズした画像です。

 

700px

 

記事コンテンツエリアの横幅いっぱいにきれいに表示されてますよね?

 

これを徐々に小さくしてみます。

 

500px

 

350px

 

200px

 

小さすぎる画像はやはり見にくいですね。画像は適切なサイズを選びましょう!
KOU

 

画像をリサイズ・圧縮する具体的な方法

Goggle推奨の「Squoosh」なら無料で画像のリサイズ・圧縮が一発で可能です。

 

実際に画像をリサイズ・圧縮してみましょう。

 

まずはSquooshにアクセスします。

 

Squoosh

 

↑ こちらにリサイズ・圧縮したい画像をドラッグ&ドロップします。

 

 

左下に表示されている4.03MBが元画像の容量です。右下の「Resize」をチェックします。

 

 

次に「width」に横幅を入力すると、高さは自動的に調整してくれます。

 

右下の48.9kBが圧縮後の画像容量ですので、確認しダウンロードしましょう。

 

以上でリサイズ・圧縮は完了です。

 

「リサイズ・圧縮する前の画像」と「リサイズ・圧縮後」の画像を比較してみましょう。

 

リサイズ・圧縮前

画像容量:3.84MB 画像サイズ:5472px×3648px

 

リサイズ・圧縮後

画像容量:47.7KB 画像サイズ:700px×467px

 

見た目はほぼ違いが分かりませんが、容量・サイズは軽量化されているのが分かるかと思います。

 

既にアップ済みの画像を軽量化する方法(Wordpress)

既にアップしてしまっている画像を軽量化したい場合はプラグイン「EWWW Image Optimizer」を使いましょう。

 

簡単に設定が可能です。

 

設定方法はこちらの記事が分かりやすいです。

⇒ EWWW Image Optimizer の設定方法と使い方-バズ部

 

ただこの方法だと完璧に軽くなる訳ではないので、今からアップする画像は「Squoosh」を使って軽量化してからアップしましょう。

 

まとめ:適正サイズの画像を使いブログを彩りましょう

今回は「ブログに最適な画像サイズ」についてお話させて頂きました。

 

早速、自分のブログにピッタリな画像サイズを探してみましょう。

 

画像はブログデザインの重要なポイントなので、画像のサイズ選び・リサイズ・圧縮は手を抜かずにしっかりと行いましょう。

-ブログ

© 2021 KOUBLOG