ブログ画像に悩む人ブログに最適な画像サイズってどれくらいだろう？ 大きすぎると容量が増えて重たくなるし、小さすぎると見にくいし……。ちょうどいいサイズがわかりません。ブログ画像のモヤモヤ…解決したいです！
こういった悩みがある人に読んでほしい記事です。
この記事を書いてる僕は、ブログ歴１年８ヶ月ほどの副業ブロガーです。 PageSpeed Insightsでのスコアは「モバイル：99、パソコン：100」で、画像の最適化をやってるので、わりと速いと思います。
「ほんとかよ！」って人は下記リンクから実際に測定結果を見てください。多少数字が前後しますが、わりとハイスコアです。
>> ぽりけんブログのスコアを測定してみる
と、前置きが長くなりましたが今回はブログに最適な画像サイズについて紹介していきます。
ブログ画像は「大きすぎると重い…小さすぎると見にくい…何が正解なの？」って感じですよね。
僕も初心者の頃はサイズとかそんなことわからず、テキトーに設置してました…。
ですが、ブログ運営を続けることでブログに最適な画像サイズや、軽量化の大切がこれでもかと言うほどわかってきました。
ブログ画像を自分のブログに合うように最適化できると、
- サイトが軽くなって検索エンジンの評価につながる
- 表示が早くて見やすくなることは読者のためになる
といったメリットしかありません！
ぜひ記事を読んで画像を最適化する方法とセットで、検索エンジンにも読者にも好かれるブログをゲットしてくださいね。
ぽりけんでは、2分30秒で読めるノウハウ記事をどうぞ！
ブログにピッタリ！最適な画像サイズとは？
ブログにピッタリな画像サイズについてわかりやすく解説していきますね。
先に結論をまとめると、
- 横幅は1,000 〜 1,200px
- ぴったりサイズ = ブログ幅
- 容量は1,000pxで100 〜 200KB
といった感じですね。
では１つずつ詳しく見ていきましょう。
横幅1,000 〜 1,200pxあれば大丈夫
ブログに使う画像サイズは横幅1,000 〜 1,200pxあれば大丈夫です。
理由は本文や画像が表示されるブログの横幅は1,000px以内がほとんどだからですね。たまに横に広いサイトもあるので大きくても1,200pxまで。
具体例としてぽりけんブログのブログ幅は、下記画像のとおり約950pxです。
950px以上だと大きいと見た目は変わらないのに、容量だけが大きくなってサイトが重たくなっちゃいます。
逆に、300pxとかブログ幅より小さすぎると、軽いけど小さすぎて見づらくなりますね。
ぽりけんこういったことから、ブログに使う画像サイズは1,000 〜 1,200pxあれば十分です。
さらにわかりやすいように、３パターンの画像サイズを用意しました。
1,200pxの場合
ファイルサイズ：約120KBぴったりサイズで、ちょうどいい感じに表示されてますね。
1,900pxの場合
ファイルサイズ：約570KBいい感じにピッタリ表示されてますが、ファイルサイズが約５倍と、ムダに重たいです。
300pxの場合
ファイルサイズ：約28KB時々、こんな画像の貼り方をしてるブログありますが、せっかくの画像が見づらくなるのでモッタイナイです。
3つのサイズ感を見ると、ブログ画像の最適なサイズは大きすぎず小さすぎずで、横幅1,000 〜 1,200pxぐらいがちょうどいいですね。
ザックリ1,000pxぐらいでいいのはわかったけど、自分のブログ幅を知って、さらにピッタリサイズにしたい！という方は引き続き読みすすめてください。
自分のブログにピッタリな画像サイズを知る方法
『ブログにピッタリな画像サイズ＝本文や画像が表示されるブログの横幅』なので、ブログ幅を測定する方法をご紹介します。
測定方法は、次の２つ。
- ブラウザの拡張機能で測定する
- ブラウザのデベロッパーツールで測定する
それぞれ解説していきますので、使いやすい方法で測定してみてくださいね。
ちなみにGoogleChromeというブラウザを使って説明してます。Chromeはどんな環境でも使いやすいのでオススメですよ。
測定方法①：ブラウザの拡張機能で測定する
１つ目の方法はブラウザの拡張機能を使った測定法です。
拡張機能とはブラウザを便利にするオプションみたいなもので、難しい操作不要で簡単に使えます。
それでは詳しくみていきましょう！
サイト上の色んなサイズを測定できる無料の拡張機能「Page Ruler Redux」をChromeに追加します。
>> Page Ruler Redux：Chromeウェブストア
右上に追加された定規のようなアイコンをクリックします。
左上の「< >」にカーソルを合わせると、『Enable Element Mode < >』に変化して、クリックすると下記画像のように『Disable Element Mode < >』に変わります。
ブログ幅が青くなったところでクリックします。
クリックすると左上のWidthに数値が表示されるので、それが自分のブログ幅となります。
※再度測定したい場合は右上の「Tracking Mode」をONにすると、再度測定できます。
当ブログだと944pxとなってるので、800pxだと小さすぎるし、1,200pxだとムダにオーバーします。
なので、1,000pxほどあればピッタリ表示されるということですね。
細かいことを書くとマージン（余白）があるので本当の画像は測定数値より若干小さくなりますが、そこまで細かくこだわる必要はないです。
測定してわかったブログ幅より、少し大きめのキレイな数字が自分のブログにピッタリ合う画像サイズってことなので、覚えておいてくださいね。
測定方法②：ブラウザのデベロッパーツールで測定する
２つ目の方法は、ブラウザに標準搭載されてるデベロッパーツール（開発者ツール）を使って測定する方法です。
この方法は何かインストールしたりする必要はないので、追加とかなんか怖い…って人は、デベロッパーツールを使って測定しましょう。
それでは、解説していきます。
まずは自分の記事ページで、デベロッパーツールを開きます。
- Windows：【F12】 or 【Ctrl + Shift + I】
- Mac：【Command + Option + I】
- 共通：【Chromeメニュー】 ▶ 【表示】 ▶ 【開発 / 管理】 ▶ 【デベロッパーツール】
上記のいずれかの方法でデベロッパーツールを開きます。
スクリーンショット画像のように見慣れない表示が出て来たらOK。
環境によっては黒じゃなくて白だったり、画面横じゃなく画面したに表示されたりしますが、操作は同じなのでそのままで大丈夫です。
表示されたデベロッパーツールの左上にある「カーソルアイコン」をクリックします。
ブログ幅が青くなったところでクリックします。
「Computed」をクリックします。
上記のような図形が表示されたらOK。
青枠部分がブログ幅の数値で、「横の長さ × 縦の長さ」の順序で書かれてます。
この場合だと、912pxがブログ幅ということですね。
ちなみに、paddingと書かれた緑枠はマージン（余白）のことで、青＋緑は余白を含むブログの横幅になります。
１つ目の拡張機能を使った測定法だと944pxになってましたが、横幅913px + 左右の余白16px × 2 = 944pxなので、同じ数値が測定できてることがわかりますね。
これで、ブログ幅がわかったので、デベロッパーツールは右上の「☓」で終了しましょう。
- Page Ruler Reduxを使って測定する
- デベロッパーツールを使って測定する
２つの方法を紹介してきたので、できそうな方法で横幅を測定しつつ、自分のブログにピッタリの画像サイズを知ってくださいね。
ブログ画像は『容量』も大事
最適な画像サイズにすることは大事ですが、同じぐらい画像容量も気にしてください。
理由はシンプルで、同じ画像サイズでも容量が小さい方がサイトが軽くなるからですね。
画像サイズ目安としては1000PXだと100〜200KBぐらいなら軽いです。
ぽりけんもちろん小さければ、さらに軽くて、さらにいいです。
スマホやカメラ、フリー素材とかそのまま使うと1枚5MB（5000KB）とか超容量でかくて、ブログが激重なので、画像容量は軽くして使いましょう。
拡張子は画像系ならJPG、イラスト系ならPNG
画像にはJPG、PNG、GIF、TIFF、BMPとか色々あるけど、画像系だとJPG、イラストならPNGにしましょう。
よくブログに使う画像はJPG！って書いてますが、種類にあった拡張子にすることで画像容量が小さくて済みます。
ブログに使う画像は、写真はJPG、イラストや図はPNGです。
このあたりを詳しく知りたいなら「PNGとJPEG画質の違いは? 拡張子でどう違う? ウェブ画像使い分けの基本」の記事に詳しく書かれてるので読んでみてください。
ここまでをまとめると、ブログで使う画像はブログ幅にあったサイズにしつつ、容量を軽くするのが大事ってことですね。
ブログに使う画像を圧縮して軽量化する方法【便利ツールも紹介】
ブログに使う画像は、次の３つの手順で軽量化していきます。
- 画像サイズを変更（リサイズ）する
- 圧縮する
- 拡張子変更する
では１つずつ紹介…と書きたいところですが、Squoosh（スクワッシュ）という便利ツールを使えば、上記３手順が一気にできてしまいます！
ブログ画像の軽量化は「Squoosh」１つで全て完結できる！
「Squoosh」は、Google Chrome Labsが開発している無料で使える画像圧縮サービスです。
リサイズ＋圧縮＋拡張子変更をリアルタイムで確認しながら作業できるスグレモノ。
しかもウェブアプリなのでWindowsでもMacでもChromebookでもiPhoneでもiPadでもAndroidでもどんな端末でも使えます。
控えめにいって神ツールですよ。
使い方は簡単。スクリーンショットを使って解説していきますね。
画面真ん中のアイコンをクリックして軽量化したい画像をアップロードします。
ドラッグ＆ドロップでもアップロードできます。
軽量化するための設定をしていきます。
- Compress：写真なら「
MozJPEG」、イラストや図なら「OxiPNG」を選択 - Edit ▶ Resize ▶ Width：リサイズしたい横幅を入力
- Quality：75
上記のような設定でOKです。
右下に軽量化後のサイズが書いてあり、元ファイルより88％削減できて、ファイルサイズが約31KBまで軽量化できてることがわかりますね。
ちなみに、真ん中の線を動かすことで軽量化前後の様子をリアルタイム確認できます。
「もうちょっとファイルサイズ大きくてもいいから画質重視だな。」って場合は右下のQualityで画質と容量の調整ができます。
最後に右下のダウンロードアイコンをクリックすると、軽量化後の画像がダウンロードできます。
超簡単ですね。
別の画像を軽量化したい場合は、左上の「×」を押してアップロードするか、次の画像をドラッグ＆ドロップすればOKです。
複数画像を一気に軽量化することはできませんが、Squoosh１つで軽量化が完結できるとけ便利すぎ。
ぽりけんこんな便利なツール、使わない手はないですね。
使用制限とかもないので、ガンガン使って、ガンガン軽量化しましょう！
ブログ画像の軽量化に使える便利ツールまとめ
基本的に軽量化はSquooshがあれば完璧ですが、一応、他のツールもまとめておきますね。
画像サイズ変更ツール
画像圧縮ツール
- Tiny PNG：画像圧縮のウェブツール。圧縮率高め。複数まとめて圧縮できます。
- ILoveIMG：画像関係のウェブツール。リサイズや圧縮など1つのサイトで全て完結できます。
- Optimizilla：画像圧縮のウェブツール。圧縮のクオリティが確認できるのが便利です。
- JPEGmini：インストール型アプリ。圧縮率かなり高い。有料アプリ
すでにアップロードしてる画像を軽量化するには？
すでにWordPressにアップ済みの画像を軽量化する方法は２つ。
- 軽量化して再度アップロードしなおす
- WordPressプラグインを使って軽量化する
という感じですね。
10枚とか、がんばれそうな枚数なら再度アップロード、ちょっとキツイかも…ならプラグインを使いましょう。
軽量化できるプラグインは、
上記の２つが無料で使える有名どころのプラグインですね。
それぞれ使い方の記事を貼っておくので、参考にしてみてください。
ブログ画像を軽くする必要性【２つの側面がある】
上記のとおりツイートして、重要性書いてますが、念のため解説します。
ブログ画像を軽くする必要性は次の2つ。
- SEO目線での必要性
- 読者目線での必要性
SEO目線での必要性
SEOは「検索エンジン最適化」のことで、GoogleやYahooといった検索エンジンに、自分のサイトを検索上位に表示させるテクニックのこと。
サイトの読み込み速度が、SEOに影響するので、ブログ画像を軽くしてサイトを軽くすることが重要です。
Googleのアップデートアナウンスでも「ユーザー体験をランキング要素として扱う」と発表され、Googleが掲げる10の真実でも「遅いより速いほうがいい。」とあるのが理由ですね。
遅くてユーザー体験が悪いサイトはSEOに悪影響を与えることから、ブログ画像を軽くするのは鉄板中の鉄板。
読者目線での必要性
読み込みが遅いサイトは、読まれない。
そして、嫌われる。
Googleから「表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している」というデータがあります。
- ページのロード時間と離脱率の関係
- 1〜3秒になると、離脱率が32％増加
- 1〜5秒になると、離脱率が90％増加
- 1〜6秒になると、離脱率が106％増加
- 1〜10秒になると、離脱率が123％増加
読み込みが遅いほど、読者は離れるということ。
きっと体験あるはずで、遅いサイトにイライラ…、「なに？このサイト。全然ダメ！はい終了〜」と、戻って、違うサイトを見にいきますよね。
遅いサイトはSEO的にも読者的にも最悪なので、ブログ画像を軽くすることは必須です。
ブログでの画像についてよくある悩み
ここまで最適な画像サイズや軽量化について説明してきました。
が、まだブログ画像に関するモヤモヤが残ってる方に向けて、下記のような悩みを解決していきます。
- ブログ画像はどこに入れるのがオススメ？
- 逆に画像を大きくするにはどうしたらいい？
- 画像素材のおすすめサイトが知りたい。
- 圧縮せず最高画質で掲載したい場合は？
- 画像が重たいページを調べたい。
- ブログ画像の縦横比の正解は？
悩み①：ブログ画像はどこに入れるのがオススメ？
ブログ画像を入れるべき箇所は次の２つです。
- アイキャッチ
- H２見出しの下
Googleアナリティクスで分析するとわかりますが、読者の8割以上がスマホで読みます。
適度に画像がないと文字だらけだと読みにくいので、H２見出しの下には画像を設置しましょう。
H２見出しとは、ブログ内の大見出しのことです。
あとはアイキャッチですね。
たまーにアイキャッチ画像を設定してないブログがありますが、モッタイナイ！
読者の目につかない記事は、読まれませんので。
悩み②：逆に画像を大きくするにはどうしたらいい？
kakudaiAC、waifu2x-multiを使うと、小さい画像をキレイなまま大きくできます。
具体的な使い方は下記記事で詳しく解説されてるのでご覧ください。
悩み③：画像素材のおすすめサイトが知りたい。
おすすめの画像素材サイトを下記にまとめますね。
- O-DAN（オーダン）：無料画像を横断検索できる。有料級だけど無料。
- unDraw（アンドロー）：色の指定ができるのでブログカラーに合わせたイラストが見つかる無料サイト。
- ぱくたそ：日本人の画像が豊富。無料。
- いらすとや：ふきだしなどワンポイントで使えるイラストが無料で見つかります。
- Freepik（フリーピック）：初心者から上級者まで使える有料素材サイト。現在愛用中。
- Shutterstock（シャッターストック）：有料素材の最高峰。使うだけで差別化できます。
上記がおすすめサイトです。
画像素材はダウンロードしたままだと重いので、軽量化してから使いましょう。
ちなみに有料素材サイトを使う理由は「既視感の削除」なので、どこかで見たことある画像だと思われないようにしましょう。
画像素材については「ブログにおすすめフリー素材・画像サイト１２選｜商用利用OK」の記事で詳しくまとめてるので、気になる方はチェックしてみてください。
悩み④：圧縮せず最高画質で掲載したい場合は？
画像を圧縮せず保存できるクラウドストレージを利用しつつ、共有リンクを設置しましょう。
最高画質の画像をそのまま設置すると容量が大きすぎてサイト速度が遅くなるけど、リンクなら重たくならないからですね。
下記のように画像保管場所のリンクを貼り付ければ完成。
https://www.amazon.co.jp/photos/share/gSJSnap2NpOHLykAXcyCEB92eOw4Cp46IXatS4Lr9NB
※クリックすると画像が保管してあるAmazonフォトに移動します。
有名どころのクラウドストレージは下記のとおり。
きれいな風景写真など、最高な状態で紹介したい場合はクラウドストレージの共有リンクを使えば解決できます。
悩み⑤：画像が重たいページを調べたい
Googleアナリティクスで読み込み速度が遅いページを調べることができます。
※ただしページ速度が遅くなるのは、画像が重たい以外にSNSを埋め込み過ぎや、特殊な装飾・アニメーションが原因の場合もあります。
- Googleアナリティクスにアクセス
- 左メニューの行動 ▶ サイトの速度 ▶ ページ速度
上記の手順で調べることができます。
右側の読み込み速度バーが緑色だといい感じで、赤色だと読み込みが遅いよ！となってるので確認してみてくださいね。
重いページを軽量化して、読者にも検索エンジンにも喜ばれるページに仕上げましょう。
ちなみにSWELLをお使いの方は下記記事で高速化できるのでご覧ください。もちろんSWELLユーザーじゃなくても参考になる部分はあると思うので、高速化のヒントにどうぞ。
>> 【簡単】SWELLを高速化する7つのおすすめ設定【今すぐできる】
悩み⑥：ブログ画像の縦横比の正解は？
- アイキャッチ → 16：9
- 記事内の画像 → 3：2
上記の比率がキレイに見えるのでおすすめです。
とはいえ、読者は「この画像の縦横比はいいなぁ」なんて思わないので、そこまで縦横比は気にしなくて大丈夫。
実際に、他人のブログを見るときに縦横比なんて気にしないですよね。
あえて書くなら「読者が見やすいと思う」「ストレスを感じない」ような画像比が正解でしょうか。
まとめ：自分のブログ幅にあった画像を、軽量化して使おう！
今回はブログに最適な画像サイズについて紹介しています。
ザーッとかんたんにまとめます！
- 画像幅は1,000〜1,200pxあれば大丈夫
- 自分のブログに最適なサイズは、ブログ幅を調べる
- 容量は軽いほうがいいので、軽量化して使う
- 写真 → JPG、イラストや図 → PNG
- すでにアップロードしてる画像は、再度アップロードする or プラグインを活用する
こんな感じですね。
サイズとか容量とか拡張子とか…正直、細かい話ですが、こうした細かい積み重ねが小さな差になってくるので、これが普通・基本だと思ってやってみてください。
同じように画像を使うなら、見やすくて軽い方が読者にも検索エンジンにも喜ばれるので。
とはいえ、画像の最適化はサクッとできる範囲でOK。それより記事を書くことに時間を使ってくださいね。
極端な話、画像だけの記事は成立しませんが、文字だけの記事は成立しますから。
では、今回は以上です。これからも当ブログと一緒に、楽しいブログライフを送りましょう。
それじゃあ、また！
