副業継続ビルダー:わかチンのブログ

【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

BLOG

ブログを始めて執筆作業をしています。
「画像サイズが合わなくて困ってます」
「画像の大きさはこのままでいいのかな?」
このような疑問が出てきました。

このようなお悩みを解決するための、お手伝いをします。

本記事の内容

  • ブログに最適な画像のサイズ
  • ブログに最適な画像の大きさ

この記事を書いている僕は2020年9月から副業を始めました。現在は本業と両立し、毎日ブログを執筆しながら活動しています。
そんな僕はブログ執筆をする際に画像のサイズは意識して気をつけています。その結果として現在、僕のブログは速度を調べても全く問題なく軽いページを維持できています。画像サイズを意識する理由は1年後にブログが重くSEOの評価を落としたくないからです。
日々どんなことを意識し画像の設定をしているかをシェアしていきます。参考なると嬉しいです。

結論です。

画像は軽く美しいものを使いましょう

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

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

【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

あなたのブログに最適な画像サイズを把握しましょう

ブログのテーマによってサイズは違います

  • あなたのブログテーマの画像サイズの調べ方
  • 画像のリサイズの方法
  • ちょっとしたWordPressの豆知識

結論です:画像サイズ=画像の大きさです

「ブログに最適な画像サイズってどのくらいなんだろう?」

このパートではこのような疑問を解消するために深掘ぼり解説をしていきます。

あなたのブログテーマの画像サイズの調べ方

ブログの画像サイズは一概に○○○×○○○です。」というのはありません。なぜならお使いのテーマによって画像サイズはバラバラだからです。
こちらのテーマでは「WEBページ画像抽出」というサイトをご紹介します。
では、どのようにあたながお使いのテーマに最適な画像のサイズを調べればいいのかをご紹介します。

  1. 同じテーマを使っている参考にしたいブログの選定
  2. 参考ブログの参考ページのURLをコピーする
  3. WEBページ画像抽出にURLを貼り付ける
  4. 画像サイズが表示されます

この手順で進めていきます。では早速始めていきましょう。

同じテーマを使っている参考にしたいブログの選定

あなたが「このブログいい感じだな」と思うブログを探します。その際に注意するべきことは必ず同じテーマを使っているブログを探しましょう。同じテーマを使っているブログを知らない時はGoogleなどで検索します。検索方法としては、「マナブログコピー ブログ」や「アフィンガー ブログ」などと検索します。そうすると同じテーマを使ったブログや公式ページが出てきます。それを参考にして進めていきます。
ここで見るべきポイントはあくまでも画像のサイズです。あなたが「この画像のサイズいい感じだな。」と思えるものを見つけれたらOKです。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

参考ブログの参考ページのURLをコピーする

こちらのパートでは前パートで見つけた参考になるブログのURLをコピーします。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

WEBページ画像抽出にURLを貼り付ける

コピーが完了したら「WEBページ画像抽出」を開き、「URLを入力してください」の部分に先ほどコピーしたURLを貼り付けクリックします。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

画像サイズが表示されます。

そうするとこのように画像のサイズが抽出されます。このサイズに合わせてあなたもブログも画像のサイズが決めましょう。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

画像のサイズは大きすぎても小さすぎてもダメです。画像はそのブログの顔です。画像にはこだわりを持ちましょう。

画像のリサイズの方法

こちらのパートでは前パートで「画像サイズはわかったけど、どうやってサイズを合わせるのかな?」という方向けに画像のリサイズのサイトをご紹介します。
こちらのパートでは「PEKO STEP」をご紹介します。

  1. リサイズする画像を選定し移動する
  2. 変更したいサイズを入力
  3. サイズ変更のボタンを押す
  4. 変更された画像を「名前をつけて保存する」で保存する

では早速始めていきましょう

リサイズする画像を選定し移動する

こちら「PEKO STEP」のサイトを開きサイズ変更をしたい画像をドラック&ドロップで移動させる
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

変更したいサイズを入力

前パートで調べた理想の画像サイズをこちらに入力します。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

サイズ変更のボタンを押す

サイズに間違えがないかの確認をし「サイズ変更」のボタンをクリックする。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

変更された画像を「名前をつけて保存する」で保存する

変更された画像を右クリックで「名前をつけて保存する」を選択し保存する
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

これで完了です。
この時に注意するべき点としてリサイズ前の画像とリサイズ後の画像を分けて管理しましょう。せっかく変更してもいざ使用する画像がリサイズ前のものでしたら意味がありません・・・

ちょっとしたWordPressの豆知識

こちらでは僕が実際に味わった体験談をお伝えします。「画像サイズをいくら正しくしていても画像サイズが小さいまま・・・」初心者にありがちなのですが、そういった時はこの部分を確認して下さい。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
こちらをフルサイズで設定していないとうまく画面表示がされません。
これに僕は2日間悩まされましたのでこのような悩みが出ないようにこちらに記載しておきます。

こちらのパートでは
ブログに最適な画像のサイズ
について深掘り解説してきました。

こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】30分無料相談

ブログに最適な画像の大きさ

【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

できるだけ容量の小さい画像にしましょう

サイズと美しさ両方にこだわりを持つ

  • ブログの速度を把握する
  • 画像は蓄積していく
  • 画像の圧縮方法

結論です:画像の大きさ=画像の容量です

「ブログに最適な画像の大きさってどのくらいなんだろう?」

このパートではこのような疑問を解消するために深掘ぼり解説をしていきます。

ブログの速度を把握する

こちらでは「PageSpeed Insights」のサイトを使っていきます。
あなたのサイトのURLをこちらに入力しますしクリックします。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
こうすることであなたのサイトの点数が表示されます。
ブログ初心者/必要知識・その3】ブログの速度チェックと改善方法
また、こちらをクリックすることでスマホ版のサイズの数字も表示されますので参考にしてください。
ブログ初心者/必要知識・その3】ブログの速度チェックと改善方法
ここの数字はSEOにも拘る数字です。サイトが重くなる原因は画像の重さになります。

●ブログの読み込みスピードを把握したい方、または現在ブログが重くなり改善したい方はこちらの記事を参考にしてください。
ブログ初心者/必要知識・その3】ブログの速度チェックと改善方法(2021年4月1日公開予定)

画像は蓄積していく

ブログは基本的に画像がつきものですが画像を途中で消すということはないと思います。そのため、ブログはどんどん重くなっていきます。これは避けて通ることはできません。少しでも画像を原因とした負荷を軽減するために画像を少しでも軽くすることをおすすめします。例えばですが、画像をダウンロードする際に解像度を下げましょう。例えば「shutterStock」の場合はこのようになります。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
300DPIでダウンロードした画面はこちらです。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
72DPIでダウンロードした画面はこちらです。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
特に大きな変化はないと思われます。このように意外とこれだけのことで大きく容量を下げることができるのでダウンロードの際には気をつけましょう。

画像の圧縮方法

こちらのパートで既にお持ちの画像の大きさを下げる方法について深掘り解説します。
こちらでは「画像形式変換ソフト」を使用します。

  1. 画像形式変換ソフトを開いて容量を小さくしたい画像を選択
  2. 選択した画像をドラックアンドドロップで指定の場所に移動する
  3. 変換されたらダウンロードして完了

画像形式変換ソフトを開いて容量を小さくしたい画像を選択

画像形式変換ソフト」を開き「JPGtoPNG」を選択します。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

選択した画像をドラックアンドドロップで指定の場所に移動する

こちらに画像を移動させる
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ

変換されたらダウンロードして完了

このようにダウンロードされればサイズが変更されています。
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
実際の画像はこのようになりました。
JPG 653KB
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
PNG 37KB
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
このように小さな積み重ねをしてくことが大切ですね。

こちらのパートでは
ブログに最適な画像の大きさ
について深掘り解説してきました。

こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】30分無料相談

まとめ

【ブログ初心者/執筆作業・その1】ブログの執筆ルールを深掘り解説
この記事では
【ブログ初心者/必要知識・その1】ブログに最適な画像サイズと大きさ
というテーマを下記の内容にまとめて解説しました。

  • ブログに最適な画像のサイズ
  • ブログに最適な画像の大きさ

という内容でお届けしました。

それでは最後まで読んでいただいてありがとうございました!

動画でも解説していますのでご興味ある方はご覧になって下さい。

わかチン
当ブログの筆者。副業をスタートさせたばかりの現役サラリーマン。業種は営業。そのため、ある程度の時間的自由がある。その中でライティング、デザイン、プログラミング、ブログの執筆をメインで活動中。また、疲れた時はメルカリで不用品販売を行っている。本業よりも副業の業務が優先の37歳。