本記事で解決できる読者の悩み
- ブログに適した画像サイズは？
- 画像をブログに最適化させる方法は？
本記事ではこのようなお悩みを解決します！
「文字だけだと読みにくいから、画像を入れることが大切！」
とはいえ、画像の最適サイズ・容量ってわからないですよね？
最適サイズなどを知らないまま、ダウンロードした画像をそのまま使うと、サイトの読み込みが遅くなり、Googleからの評価を下げてしまう恐れも。
そこで今回は、ブログに最適なサイズや容量・形式について解説します。
最適化の方法も紹介してるので、SEOに強く見やすいブログがつくれますよ！
ブログに最適な画像サイズ・容量は？
ブログに最適な画像のサイズ・容量・形式は以下のとおりです。
- サイズ：横幅1,000px程度
- 容量：200KB以下
- 形式：JPG
それでは、詳しく解説します。
画像サイズ：横幅1,000px程度
画像の横幅は1,000px程度にしましょう。
ほとんどのブログでは、本文エリアの幅が600〜900pxです。
横幅が1,000pxより大幅に小さいと画像内容が見にくくなってしまいます。
最低でも、1,000px程度の画像を使いましょう。
横幅が大きくても、自動調整されるので問題ありません。
画像の高さは一般的な比率に設定しよう
画像の横幅は1,000px程度にすべきですが、高さには特に決まりはありません。
一般的な比率でOKです。
画像の一般的比率一覧
- 16:9（横幅1,000px→高さ562px）
- 4:3（横幅1,000px→高さ750px）
- 3:2（横幅1,000px→高さ666px）
- 1.91:1（横幅1,000px→高さ523px）
迷ったら、16:9がオススメです。
内容を解説するための画像であれば、比率よりも必要な高さを優先しましょう。
スマホの画面でスクロールせず全部が表示できるようなサイズがベスト！
実際に、どのように表示されるか確認をして投稿しましょう。
画像容量：200KB以下
画像の容量は、200KB以下がベストです。
容量が大きいと、ページの表示速度が遅くなるというデメリットになってしまいます。
フリー素材は高画質のため、そのまま使うと500KB〜10MB（10,000KB）と容量がかなり大きいものばかりです。
必ず、画像を圧縮して容量を小さくしてブログに使用しましょう。
圧縮方法は、後ほど紹介します
画像形式：JPG形式
画像形式は、JPGにしましょう。
なぜなら、JPG形式は容量が軽いから。
JPGかPNGであれば、どちらもキレイさはほぼ同じです。
画質がほぼ変わらないので、できるだけJPGを使いましょう。
ブログの画像を最適化するメリットは？
画像の最適サイズ・容量・形式はわかったけど、そもそもなぜ最適化する必要があるのだろう・・・。
画像を最適化させると以下のようなメリットがあるんです！
画像を最適化するメリット
- ページの表示速度が上がる
- ブログが見やすくなる
- SEO対策になる
それでは詳しく解説します。
①ページの表示速度が上がる
画像を最適化すると、ページの表示速度が上がり、ブログをサクサク読めます。
逆に最適化しないと、表示速度が遅くなり読者が離脱してしまうことにも・・・
せっかく記事内容が良くても、読者が離脱すれば、収益にも影響出るのはもったいない！
画像サイズを小さくするだけで、表示速度は向上し記事の読み込みが速くなりますよ。
②ブログが見やすくなる
画像の大きさを整えることで、記事が整って見やすくなります。
記事の大きさがバラバラだと、画像を拡大しなければなずストレスになりがちです。
記事の幅に合っている方が画像も見やすいですね！
ストレスになると、読者が離れてしまうかもしれません。
画像の大きさを整えて、見やすいブログを作りましょう。
③SEO対策になる
画像の最適化は、SEO対策にもなります。
なぜなら、読み込み速度もSEOの順位付けの1つになるから。
読み込みが遅いと、離脱率も上がり、Googleからの評価を下げる負の連鎖にハマってしまいます。
画像最適化は、読者・ブロガー双方にとって、メリットしかないんです！
ブログの画像を最適化させる方法3ステップ
それでは、いよいよ画像を最適化させましょう！
画像を最適化させる方法は、以下の3ステップです。
画像最適化の3ステップ
- 画像をリサイズする
- TinyPNGで圧縮する
- 「EWWW Image Optimizer」で最適化する
それでは詳しく解説します。
①画像をリサイズする
まずは画像サイズを横幅1,000px程度にリサイズします。
使う画像が横幅1,000px程度なら、この作業はしなくて大丈です。
リサイズは、デフォルトで搭載されているアプリでできます。
- Windows→ペイント
- Mac→プレビュー
個人的にはiPhoneやiPadでのリサイズがおすすめです。
スマホで撮影した画像のリサイズもできるので、スマホ1台で撮影〜最適化が可能になります。
②「TinyPNG」で圧縮する
リサイズしたら、「TinyPNG（タイニーピング）」で画像を圧縮します。
「TinyPNG」とは？
→画質を保ちながらキレイに圧縮できるサイトで、無料で利用可能。
「TinyPNG」は次のような特徴があります。
「TinyPNG」の特徴
- 画質を保ちながらキレイに画像を圧縮できる
- 無料で利用できる
- 60〜80%の圧縮が可能
- PNGとJPGに対応
- 最大20枚／1枚5MBまで圧縮可能
有料プランだと1回の圧縮枚数に制限がなくなります。
ですが、無料プランでも十分すぎるくらい優秀な圧縮サイトです。
「TinyPNG」の使い方は以下のとおりです。
1、「TinyPNG」にアクセスする
まずは、「TinyPNG」のサイトにアクセスします。
2、画像をアップロードする
TinyPNGに移動しら、圧縮したい画像を中央の赤枠で囲んだ部分にドラッグ&ドロップしてください。
3、画像を自動圧縮する
ドラッグ&ドロップしたら画像が自動で圧縮されます。
今回の圧縮は、350.3KBから121.0KBへ（65%）圧縮ができました。
無料版でも20枚までなら一気に圧縮することも可能です。
圧縮したら「Download all」をタップし、画像をダウンロードしましょう。
4、圧縮した画像を確認する
ダウンロードした「zipファイル」が保存されていればOKです！
「TinyPNG」のロゴをタップすると、圧縮した履歴がリセットされて、また20枚圧縮ができるようになります。
③「EWWW Image Optimizer」で最適化する
「EWWW Image Optimizer」は、WordPressのプラグインです。
劣化なく画質をキレイに保ったまま、自動で画像を圧縮することができます。
さっきリサイズと圧縮をしたのに、プラグインも必要なの？
TinyPNGと違うのは、すでにWordPressにアップロードした画像も最適化してくれるところ。
プラグイン導入後、簡単な初期設定をすると、アップロード済みの画像をすべて最適化してくれます。
プラグインは正常に動作しないこともあるので、リサイズ・圧縮は念のためしておきましょう。
ブログにおすすめのフリー素材サイトは？
当サイトでおすすめのフリー素材サイトは以下のとおりです。
- Pixabay
- O-DAN
- GIRLY DROP
- unDraw
- ぱたくそ
読みやすいおしゃれなブログを作るためには、適所に画像やイラストを使いましょう。
なぜなら、ずっと文字ばかりだと読み疲れて、読者が離脱してしまうかもしれません。
そのための対策として、時々イラストを入れ、休憩ポイントを作ることが大切です。
フリー素材サイトのイラストや画像を効果的に活用しましょう。
詳しくは、ブログで使える！おすすめフリー素材5選【おしゃれなブログを作ろう】の記事で紹介しています。
ブログ画像を最適化したらサイトスピードを確認しよう
今のサイトの表示スピードはどのくらいなの？改善したのかな？
画像の最適化をして改善具合が気になる方は、「PageSpeed Insights」で確認をしましょう。
＞＞＞「PageSpeed Insights」でサイトスピードを確認する
Page Speed InsightsはGoogleが提供するサイトスピードを計測できるサービスです。
「0〜100」のスコアで、大きく3段階に分け評価してくれます。
- 0〜49（赤）→遅い
- 50〜89（オレンジ）→普通（平均）
- 90〜100（緑）→速い
スコアでの評価だけでなく、改善点も教えてくれるので、該当箇所を修正すれば大幅に表示速度の改善が見込めます。
画像の項目は本記事のとおりに最適化すると、簡単に改善できますよ！
まずは、画像の項目から改善していきましょう。
モバイルとPC、それぞれの計測をしてくれるので、参考にしてみてください。
まとめ：ブログ画像を最適化して見やすいブログを作ろう
本記事では、ブログで使う画像の最適なサイズや容量、最適化の方法について解説しました。
ブログ画像の最適サイズ・容量・形式
- サイズ：横幅1,000px程度
- 容量：200KB以下
- 形式：JPG
ブログ画像の最適化方法3ステップ
- 画像をリサイズする
- 「TinyPNG」で画像を圧縮する
- 「EWWW Image Optimizer」で最適化する
ブログ画像を最適化することで、表示スピードを遅くすることなく、デザイン面でもこだわってブログを作ることができます。
1つ1つの画像を最適化する作業はめんどくさいですが、メリットしかありません！
この記事の手順どおりに、画像の最適化をして見やすいブログを作りましょう！
また、見やすいブログを作るには、WordPressテーマも重要です。
当サイトで使用しているWordPressテーマ「AFFINGER6」については、AFFINGER6デメリット・メリットは？導入した本音レビュー！の記事で紹介しています。
本記事は以上です。
