サイトデザイン

貴方のブログの画像サイズに最適な横幅は何pxなのか?

WordPressブログを運営していて画像サイズに困った事はありませんか?

ここでは自分のブログの画像サイズに一番最適な横幅は何pxなのか。

その確認方法や参考情報などについて僕の事例も挙げながら解説していきますね!

カツオのメルマガ

【結論】ブログの画像サイズの最適解はコレ!

ブログの最適画像サイズはコレ。

まず最初の結論です。

WordPressブログの画像サイズの最適解はブログのメインコンテンツの横幅に合わせる事です。

(画像の縦幅については後述しますが、長すぎないように調整するのが良いです)

 

何故かと言うと、

  • その画像サイズが読者にとって見やすいから。
  • その画像サイズがデータ容量的に軽いから。

です。

 

ブログのメインコンテンツとは下記画像で示した部分で、記事が載る部分の事↓

メインコンテンツとサイドバー

WordPressブログで使用する画像はメインコンテンツの横幅に合わせるのが良いです。

カッパ君
カッパ君
ちなみにサイドバーで使う画像はサイドバーの幅に合わせてねー

メインコンテンツの横幅に合わせるとなぜ見やすいのか。

WordPressブログの画像をメインコンテンツの横幅に合わせると見やすいのは何故か。

 

それは画像が一番大きく表示されるからです。

 

単純に画像が大きいと見やすさはアップしますよね。

下記画像はどちらが見やすいですか?

大きい画像サイズ

 

小さい画像サイズ

ここは深い説明が無くても理解出来ると思います。

メインコンテンツの横幅に合わせるとなぜ軽いのか。

画像サイズをメインコンテンツの横幅に合わせるとなぜ軽いのかについて説明します。

 

WordPressではメインコンテンツの横幅以上の画像をアップロードして、記事内で使用しても実際に表示される時は画像が横幅に合わせて表示されます。

大きい画像を入れても縮小されて表示される

ですので、メインコンテンツの横幅以上の大きい画像を入れてもファイルサイズが大きくなるだけで、表示される際に画質が良くなったりするというメリットはほぼ無いのです。

だったら、最初から必要最低限の大きさの画像を使用するのがデータ容量的にはスマート。

 

極端な話ですが、メインコンテンツの横幅が768pxなのに横幅10000pxの画像を入れても、結局768pxで表示されます。

だったら、最初から768pxの画像を使えばいいじゃんって話です。

ブログに最適な画像サイズの確認方法。

メインコンテンツの横幅に合わせると言っても、使っているテンプレートによってメインコンテンツの横幅は違います。

ですので、ここからはブログに最適な画像サイズをどのように確認していくかについて述べていきます。

 

手っ取り早いのはGooglechromeのデベロッパーツールを確認する事。

 

メインコンテンツ部分の横幅を確認したいブログの上で右クリックして「検証」を選択。

もしくはchromeのメニューから「その他のツール」→「デベロッパーツール」を選択。

説明1

 

デベロッパーツールが起動したら左上の矢印をクリック。

説明2

 

横幅を確認したい部分をにカーソルを合わせクリックします。

説明3

 

Computedという箇所をデペロッパーツールから探し、先ほど選択していた部分の色と同じ色の部分の数字をチェックします。

それが選択した部分の横幅、縦幅です。

説明4

 

※この方法がちょっと難しいと感じたら、そのテンプレートの公式HP等を確認しても良いし、カスタマイズフォーラム等で情報が無いかチェックするのも手です。

ただし、ブログの最適画像サイズは変わっていく。

ちなみに、ブログの最適画像サイズは時間の経過と共に変わっていくものです。

 

テンプレートを変えたり、カスタマイズをすればメインコンテンツの横幅も変わるからです。

 

このカツオのブログについてもテンプレートを賢威からJINに変えた事がありますし、賢威時代にはメインコンテンツの横幅をカスタマイズしています。

 

ですので、Wordpressブログの最適画像サイズはブログの変化とともに少しずつ変わったりするものだという認識も必要です。

僕のブログの画像サイズの考え方を紹介。

当ブログの画像サイズについて説明。

WordPressブログの最適画像サイズはブログの変化とともに変わると前章で述べました。

「じゃあ、結局どんな画像サイズにすればいいのか」という疑問が生まれてくると思いますので、そちらについてもお答えしておきます。

カッパ君
カッパ君
このブログではどんな考えで画像サイズを決めているのかについて述べていくよー!

サムネイル画像のサイズについて。

僕の場合は2020年3月現在、テンプレートはJINであり、サムネイル画像については760×428の画像を使用しています。

760×428がJINで推奨される画像サイズだから。

サムネイル画像はテンプレートによってかなり差があるのですが、変に縮小されて端が切れたりするのが嫌なので、JIN推奨サイズを使用しています。

記事内の画像サイズについて。

記事内の画像サイズについては

  • 640×400
  • 640×427

の2種類を使用しています。

 

横幅は640pxで統一しています。(以前使っていたテンプレートの横幅が640だったので)

 

640×400は黄金比と呼ばれる人間が最も美しいと感じる画像比率だからです。

(正確には640×396なのですが、管理のし易さから縦は400にしています)

 

640×427は3:2の比率なのですが、これはデジカメで撮影した画像の比率が3:2だったから。

 

これらの理由(成り行き?)からこのような画像サイズを本ブログでは採用しています。

ただし、覚えておいて頂きたいのが画像サイズについては難しく考えすぎる必要はないという事。

極論ですが

  • 読者に見やすい大きさである。
  • 重くなりすぎない。

という条件を満たしていれば、画像サイズはある意味何pxでもOK。

テンプレート毎の推奨サイズや黄金比とか色々ありまして、それらを考慮するのも大事ですが、神経質になり過ぎないのも大事ですね。

会社だけの人生を送りたい人は絶対読まないで下さい↓

カツオ
カツオ
参加無料のオンライン講座やってます。

副業で収入UPしたい!会社に依存したくない!スキルを身に付けたい!

そんな貴方は参加しなきゃ損!

カッパ君
カッパ君
参加者限定特典初心者でも月5万円稼げるブログノウハウをプレゼント!

参加者しか見れない秘密のコンテンツも盛りだくさん!

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
大学卒業後に就職した会社では会社人間となることを余儀なくされるが、「会社に魂を売っても仕方ないな」と気が付いて退社。 ネットで検索していたらブログから始めて初心者でも個人ビジネスが出来る事を知り、実践してみたところ、月収10万→30万→100万とどんどんステップアップ。 今はやりたくない事はやらない、魂に正直なライフスタイルを送っている。本業は坊主です。
こんな記事も読まれています。