- これで解決！ ブログの画像サイズの目安｜アイキャッチ画像大きさなど
本記事を読めば、ブログの画像サイズの目安｜アイキャッチ画像大きさなどがわかるようになります。
ブログ運営において、画像やイラストはユーザビリティーのおいてとても大事な役割を果たします。知らずに正しくない方法で画像を使っていると、サイトの評価が下がってしまう可能性があります。
Google検索さんは、「ユーザーの利便性を高める」ことに全力を注いでいるため、必要とする情報をウェブ検索で瞬時に提供したいと考えています。そのため、サイトを速く表示させるため画像のファイルサイズを適切にして行く必要があります。
この、ブログの画像サイズの目安がわかることで、ブログサイトにとってより有効な画像の使い方ができるようになります。またスピードアップにつながることによりSEOに大きな役割を果たしてくれることになりますよ。ぜひ参考にしてくださいね！
メチャじじあんまり気にしたことなかったけどブログの画像サイズって重要か？
チョイジジちょっと気を使った方がいいよ、画像の大きさには？
ひろおじどうして画像の大きさに気を付ける必要があるのか？どうやって画像の大きさを扱うのかお話して行きます！
この記事では、ブログの画像サイズの目安｜アイキャッチ画像大きさなどついてお話をしていきます。
- 画像の大きさについて知りたい方
- SEOでマイナス評価を受けたくない方
- ブログでの画像の扱い方を知りたい方
早く希望の記事箇所に到達したい方はコチラ
当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ！
画像の大きさ？、サイズ？ ブログで注意したいこと
メチャじじどうしてブログで画像の扱いに注意する必要があるのじゃ？
画像のサイズの大きさはとても大事
ブログ運営において、画像やイラストはユーザビリティーのおいてとても大事な役割を果たします。ただちょっと気を付けてほしい事があるのです。実は、ブログで使う画像のファイルサイズというのは、SEOととっても密接な関係があって、知らずに正しくない方法で画像を使っていると、サイトの評価が下がってしまう可能性があるのです。
Google検索さんは、「ユーザーの利便性を高める」ことに全力を注いでいるため、必要とする情報をウェブ検索で瞬時に提供したいと考えています。
Googleさんの理念に Google が掲げる 10 の事実 があります。その第三項を挙げてみます。
3. 遅いより速いほうがいい。
Google は、ユーザーの貴重な時間を無駄にしないよう、必要とする情報をウェブ検索で瞬時に提供したいと考えています。自社のウェブサイトにユーザーが留まる時間をできるだけ短くすることを目標にしている会社は、世界中でもおそらく Google だけでしょう。Google は、Google のサイトのページから余計なビットやバイトを削ぎ落とし、サーバー環境の効率を向上させることで、自己の持つスピード記録を何度も塗り替えてきました。検索結果の平均応答時間は 1 秒足らずです。Google が新しいサービスをリリースするときは、常にスピードを念頭に置いています。モバイルアプリをリリースするときも、新時代のウェブにふさわしい高速ブラウザの Google Chrome をリリースするときも同じです。今後も、さらなるスピードアップを目指して取り組みを続けていきます。
Google が掲げる 10の事実 （第三項）
Googleは、少しでも早く表示されるサイトを評価してくれますが、あまりに表示が遅いサイトは評価が下がります。そしてその画像の取り扱いが表示の遅くなる原因の一つになるのです。
ブログの画像サイズの二つの意味
- 画像の大きさ・・・画像の縦と横の寸法、大きさ
- 画像のファイルサイズの大きさ・・・画像ファイルの容量
画像の大きさ
縦横の大きさの数値をいいます。単位はピクセル（px）が表すのが一般的です。上の図では、「横720px」「縦540px」。
画像の縦と横の長さの比率を示す縦横比はアスペクト比と呼ばれ、一般的には「横の長さ : 縦の長さ」という形で表されます。「720×540px」などの記載などの記載例です。
ブログやホームページで使われる画像の縦横比は、「16：9」、「3：2」、「4：3」、「1：1」、「1.91：1」など、特に決まりはありません。
画像のファイルサイズ
画像のファイルサイズとは、画像ファイルの容量のことです。単位はKB（キロバイト）、MB（メガバイト）です。
ファイルを開くと、詳細などでファイルの種類やファイルサイズを確認することができます。
1MBは、約1000KBと覚えておけばよいでしょう。
ブログの画像サイズの目安
画像の大きさ（縦横寸法）
| 用途 | 横幅の目安 |
|---|---|
| アイキャッチ画像 | 1280×720pxが一般的 |
| ブログ本文 | ～1000px |
| メインビジュアル画像 | 1200～2000px |
アイキャッチ画像
アイキャッチ画像は記事内でも一番目につくところにあって、力を入れて画像を選択したいところ。その縦横寸法で一般的な大きさは、1280×720ピクセル。
ちょっと注意したいところは、カテゴリー表示などで縮小して表示されるところ。あまり細かい文字などを入れても、縮小表示されると全く内容がわかりません。アイキャッチ画像は統一感があると専門的なサイトに変身します。
ブログ本文
ブログの本文部分の横幅は、テーマによってマチマチですが、通常の左右どちらかにサイドバーがついている場合は大方1000px以下になると思います。従って1000px以下の大きさでよいでしょう。ただ、LPなど、1カラムの場合は、時に大きく表示させることもありますので、その際適切な大きさにすることが必要です。
メインビジュアル画像
日本でよく使用されるパソコンの画面の大きさは「1920×1080px」なんだそうです。メインビジュアル画像は拡大に耐えれるよう横幅～2000pxまでとれれば良いと思います。ただプレビュー表示を見ながら、縦幅も注意する必要があります。どの大きさでもバランスよく見えることが大切です。
ブログの画像のファイルサイズと種類
ファイルサイズ
スマホで撮った画像の中には、4MBぐらいあるものはザラです。SNSと同じような感覚でブログにアップしてはいけません。
ファイルサイズはいろいろな方法で確認できますよね！
さて、そんな気になる画像1枚当たりの容量ですが、
画像一枚当たりのファイル容量は、200KB以下にしましょう。
メチャじじえっそんなに小さくしなくてはいけないの？
初めてご覧になった方は、ちょっとびっくりかもしれません。スマホから写真もってきた方などは、画像1枚当たり3MBぐらい当たりまえかもしれません。
ちなみに、Googleさんからは１記あたりの全体で1.6MBまでを目標に収めた方が良いとアナウンスがあったようです。ということは、200KBの画像なら8枚までという計算です。
ただ、これは絶対1.6MB以下を守る必要があるかと言われればそうではなく、今のところ画像ファイルサイズに全く無頓着なサイトの評価が下がるみたいです。
ただ、今後もっと画像サイズに焦点があてられるようになれば、後から修正するのは、めちゃくちゃ大変なので、早いうちから心がけておくと慌てずにすみます。
ファイルの種類
画像やイラストで一般的に使われるファイルの種類は、JPGかPNGです。
PNG（ピーエヌジー）とJPEG（ジェイペグ）は、画像ファイル形式としてよく使われていますが、次のような違いがあります。
JPGとPNGの特徴 AI摘出
透過処理
PNGは透明な背景をサポートしているため、Webデザイナーは画像に透明な背景を適用したり、複数の透明度を適用したりすることができます。一方、JPEGは透明な背景をサポートしていないため、画像がない部分には白地を敷いたように処理されてしまいます。
圧縮方式
PNGは可逆圧縮方式を採用しているため、何度も保存しても画質が劣化しにくく、元の状態に戻すこともできます。一方、JPEGは圧縮したら一方通行で元に戻すことができません。
容量
PNGはJPEGよりも容量が大きいため、使用するファイル形式を選ぶ際にはこの点を考慮する必要があります。PNGを使用する場合は、オンラインツールなどで画像を圧縮して最適化するのもよいでしょう
| 種類 | 画像容量 | 透過 | 拡張子変換 |
|---|---|---|---|
| PNG | 重い | 一般的 そのままでよい | |
| JPG | 中間 | ||
| webp | 軽い | 必要 |
多くの場合、PNGかJPGですから、そのままで変更する必要はありません。
webp（ウェッピー）って何者？
ひょっこりでてきたwebp（ウェッピー）ですが、WebP（ウェッピー）とは、ウェブサイトのトラフィック量を削減し、表示高速化を目的として作られた新しい画像フォーマットです。ファイルの拡張子は「.webp」です。
Googleが開発した次世代画像ファイルなのですが、まだあまり認知されていないみたいです。ただ主要ブラウザがwebp（ウェッピー）の対応に応じたため、これからのファイルの形式と言えます。JPGとPNGのいいとこ取りなのに、ファイル容量が小さいというwebp（ウェッピー）ですが、注意点として一部のブラウザが未対応で表示されない場合があります。
ブログの画像の圧縮について
JPG・PNGの圧縮
とにかく、ブログにアップロードする前に、サクッと圧縮してしまいましょう。
当サイトは、「I LOVE IMG」というサイトを利用しています。
登録不要・無料です。制限もありません。
とある、画像を小さくしてみました。
1200×720pxのこのJPG画像、 274KBが151KＢまで小さくなりました。
webp（ウェッピー）への変換
今は、簡単に使えますので webpに変換を使っていきます。
先ほどの151KBの画像が、120KBまで小さくなりました。
プラグインの導入
ただ、手動で画像変換することはものすごく手間なので、プラグインを導入していきたいのですが、どうもSWELLとの相性が良くないと言うことを言われているようなので、今はちょっと導入を見送っております。今後また導入した場合にはご案内させてもらいます。
まとめ：ブログの画像サイズの目安｜アイキャッチ画像大きさなど
今回は、ブログの簡単な動画を作る「ブログの画像サイズの目安｜アイキャッチ画像大きさなど」について解説しました。
ブログ運営において、画像やイラストはユーザビリティーにおいてとても大事な役割を果たしますが、知らずに正しくない方法で画像を使っていると、サイトの評価が下がってしまう可能性があります。
ユーザーの利便性やSEOの効果などを考慮すれば、画像の正しい扱い方をする事が重要になってきます。
具体的に気になる記事箇所をチェックするのはコチラ
ブログの画像サイズの目安がわかることで、ブログサイトにとってより有効な画像の使い方ができるようになります。またスピードアップにつながることによりSEOに大きな役割を果たしてくれることになります。ぜひ参考にしてくださいね！
【ブログ記事】SEOキーワードの選定方法と効果的な使い方を実践することで、ある程度記事が溜まってブログが成長しますと、SEOキーワードに強いブログに育っていきます。ぜひ参考にしてくださいね！
また、「ブログの画像サイズの目安｜アイキャッチ画像大きさなど」が終わりましたら、次は「ブログに動画を有効に使う方法」を確認してみましょう。
詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。
